html4+css2
html4
1、HTML:HyperText Markup Language(超文本标记语言)。
2、html基本结构:
<!-- 声明文档 告诉浏览器当前网页的版本。 --> <!DOCTYPE html> <!-- 设置html语言 作用:让浏览器显示对应的翻译 提示。利于搜索引擎优化。 --> <html lang="zh-CN"> <head> <!-- 指定字符编码为 UTF-8--> <meta charset="UTF-8"> <!-- 网页标题 --> <title>我是一个标题</title> </head> <body> <!-- body中书写html代码 --> </body> </html>
3、html基础
3.1、排版标签(3个)
<!-- h1-h6 标题 一个html代码中h1最好只有一个 h2-h6可以有多个 h标签不能相互嵌套--> <h1>最大</h1> <h6>最小</h6> <!-- p 段落 p标签中不能嵌套div h1-h6 p标签--> <p>这是一个段落</p> <!-- div 布局 div没有任何语义 用于整体布局 --> <div>我是一个div</div>
3.2、常用文本标签(3个)
<!-- em 语义:要着重阅读的内容 表现:倾斜 i表现也为倾斜--> <em>我是一个em</em> <!-- strong 语义:十分重要的内容(语气比em要强)表现:加粗 b表现也为加粗 --> <strong>我是一个strong</strong> <!-- span 没有语义 用于包裹短语的通用容器 --> <span>我是一个span</span>
3.3、图片标签
<!-- img是单标签 4个属性 src:图片的位置(相对路径、绝对路径) alt:图片加载不出来时显示的文字 seo时通过alt得知图片的内容 height:图片的高 with:图片的宽--> <img src="../1.jpg" alt="这是一个图片" width="200px" height="200px">
3.4、相对路径,绝对路径
相对路径:以当前位置作为参考点,去建立路径
./:同级目录下
../:上级目录下
/:下级目录下
绝对路径:以根位置作为参考点,去建立路径
本地绝对路径:E:/a/b/c/奥特曼.jpg 。(很少使用)
网络绝对路径:http://wwwxiaomao.com/images/index_new/logo.png 。
3.5、超链接
<!-- a href:指定要跳转到的具体目标 target:控制跳转时如何打开页面,_self :在本窗口打开。_blank :在新窗口打开。 name 属性的 a 标签是锚点 a标签也可以跳转到指定的锚点--> <a href="https://www.baidu.com/" target="_blank">点击去百度</a>
3.6、列表
<!-- ol有序列表 ul无序列表 --> <ol> <li>有序列表1</li> <li>有序列表2</li> <li>有序列表3</li> </ol> <ul> <li>无序列表</li> <li>无序列表</li> <li>无序列表</li> </ul>
3.7、表格
<!-- 表格 table:表格 width :设置表格宽度。height :设置表格最小高度,表格最终高度可能比设置的值大。 border :设置表格边框宽度。cellspacing : 设置单元格之间的间距。 caption:表格标题 thead:表头 同tr th:表头单元格 同td tbody:表格主题 同tr tfoot:表格脚注 同tr tr:行 height:单元格高度 没有宽度 table已经设置 align : 设置单元格的水平对齐方式:left :左对齐 center :中间对齐 right :右对齐valign : 设置单元格的垂直对齐方式: top :顶部对齐 middle :中间对齐 bottom :底部对齐 td:普通单元格 width :设置单元格的宽度,同列所有单元格全都受影响。 heigtht :设置单元格的高度,同行所有单元格全都受影响。 align :设置单元格的水平对齐方式。 valign :设置单元格的垂直对齐方式。 rowspan :指定要跨的行数。 colspan :指定要跨的列数。 --> <table border="1" cellspacing="0"> <caption>表格标题</caption> <thead> <tr> <th>表头一</th> <th>表头二</th> <th>表头三</th> </tr> </thead> <tbody> <tr> <td>单元格1</td> <td>单元格2</td> <td>单元格3</td> </tr> <tr> <td>单元格1</td> <td>单元格2</td> <td>单元格3</td> </tr> </tbody> <tfoot> <tr> <td>表格脚注1</td> <td>表格脚注2</td> <td>表格脚注3</td> </tr> </tfoot> </table>
3.8、表单
<!-- form 表单 action 属性: 表单要提交的地址。 target 属性: 要跳转的新地址打开位置; 值: _self 、 _blank method 属性: 请求方式,值: get 、 post input 输入框 type 属性: 指定表单控件的类型。值:text 、 password 、 radio 、 checkbox 、 hidden 、 submit 、 rest、button 等。 name 属性: 指定数据名称 value 属性:对于输入框:指定默认输入的值;对于单选和复选框:实际提交的数据;对于按钮:显示按钮文字。 disabled 属性: 设置表单控件不可用。 maxlength 属性: 用于输入框,设置最大可输入长度。 checked 属性: 用于单选按钮和复选框,默认选中 textarea 文本域 name 属性: 指定数据名称 rows 属性: 指定默认显示的行数,影响文本域的高度。 cols 属性: 指定默认显示的列数,影响文本域的宽度。 disabled 属性: 设置表单控件不可用。 select 下拉框 name 属性: 指定数据名称 disabled 属性: 设置整个下拉框不可用。 option 下拉框选项 disabled 属性: 设置拉下选项不可用。 value 属性: 该选项事件提交的数据(不指定value,会把标签中的内容作为提交数据) selected 属性: 默认选中。 button 按钮 disabled 属性: 设置按钮不可用。 type 属性: 设置按钮的类型,值: submit (默认)、 reset 、 button label 与表单控件做关联 label 标签可与表单控件相关联,关联之后点击文字,与之对应的表单控件就会获取焦点 两种与 label 关联方式 1. 让 label 标签的 for 属性的值等于表单控件的 id 。 2. 把表单控件套在 label 标签的里面。 --> <form action="#" target="_self" method="get"> 文本:<input type="text" name="text"><br> 密码:<input type="password" name="password"><br> <input type="hidden" name="hidden" value="hidden"> 单选框:<input type="radio" name="radio" value="man">男 <input type="radio" name="radio" value="woman" checked>女<br> 复选框:<input type="checkbox" name="checkbox" value="sing" checked>唱歌 <input type="checkbox" name="checkbox" value="talk">讨论 <input type="checkbox" name="checkbox" value="rap">ruap <br> 文本域:<textarea name="textarea" cols="30" rows="10"></textarea> <input type="button" value="button"> <input type="submit" value="submit"> <input type="reset" value="reset"><br> 请选择<select name="select"> <option value="1">1</option> <option value="2" selected>2</option> <option value="3">3</option> </select><br> <label for="lable1">测试lable</label><input type="lable" name="lable" id="lable1"><br> </form>
css2
1、css:层叠样式表 (Cascading Style Sheets,缩写为 CSS)
2、css引入方式
3、选择器
基本选择器(4个)
复合选择器
后代选择器:选择器1 选择器2 选择器3 ...... 选择器n {} 选择器之间,用空格隔开
子代选择器:选择器1>选择器2 {}
交集选择器:选择器1选择器2 例子div.box1 选中class为box1的div
并集选择器:选择器1,选择器2{} 选择器之间用,隔开 选择器1选择器2都会有此属性
伪类选择器
E:first-child 所有兄弟元素中的第一个。
E:last-child 所有兄弟元素中的最后一个。
E:nth-child(n) 所有兄弟元素中的第 n 个
E:hover 鼠标悬停在元素上的状态。
E:active 元素激活的状态。 什么是激活?—— 按下鼠标不松开。
选择器的优先级
4、css三大特性
5、常用属性
文字控制属性
/* 字体大小 单位像素 */ font-size: 20px; /* 字体颜色 4种表示方式 */ color: #fff; /* 行高 设置多行文本的间距 单位像素 20px或者数字2(当前标签font-size属性值的倍数) */ line-height: 20px; /* 控制水平对齐方式 left center right*/ text-align: center;
6、元素的显示模式
7、css盒子模型
8、浮动