一、 列表
1.1 无序列表 ul(Unordered List)-li(List Item)
属性：type属性值有且只有以下三个：
disc 默认实心圆
square 实心方块
circle 空心圆
2 <!-- ul-li固定嵌套 --> 3 <!-- ul中可以嵌套任意多个li标签 --> 4 <!-- li标签和div一样，可以放任何标签和内容的 --> 5 <!-- 无序列表项目符号默认实心圆 --> 6 <ul type="disc"> 7 <li>习近平：不敢有丝毫自满，但怀有无比自信</li> 8 <li>习近平向“2019·中国西藏发展论坛”致贺信</li> 9 <li>“一带一路”在制造债务陷阱？ 他们有话说</li> 10 <li>习近平：不敢有丝毫自满，但怀有无比自信</li> 11 <li>习近平：不敢有丝毫自满，但怀有无比自信</li> 12 </ul> 13 14 <!-- 设置无序列表项目符号为实心方块 square --> 15 <ul type="square"> 16 <li>习近平：不敢有丝毫自满，但怀有无比自信</li> 17 <li>习近平向“2019·中国西藏发展论坛”致贺信</li> 18 <li>“一带一路”在制造债务陷阱？ 他们有话说</li> 19 <li>习近平：不敢有丝毫自满，但怀有无比自信</li> 20 <li>习近平：不敢有丝毫自满，但怀有无比自信</li> 21 </ul> 22 23 24 <!-- 设置无序列表项目符号为空心圆 circle --> 25 <ul type="circle"> 26 <li>习近平：不敢有丝毫自满，但怀有无比自信</li> 27 <li>习近平向“2019·中国西藏发展论坛”致贺信</li> 28 <li>“一带一路”在制造债务陷阱？ 他们有话说</li> 29 <li>习近平：不敢有丝毫自满，但怀有无比自信</li> 30 <li>习近平：不敢有丝毫自满，但怀有无比自信</li> 31 </ul> |
1.2 有序列表 ol(Ordered List) – li(List Item)
属性type有且只有五个属性值：
1 默认，阿拉伯数字
A | a 大小写英文字母
I | i 大小写罗马数字
1 <!-- 有序列表 ol-li --> 2 <!-- 属性type 项目符号默认是数字 1，2，3，4。。。 --> 3 <!-- reversed h5属性 倒叙 会有浏览器差异性 IE不识别 --> 4 <ol type="1" reversed="reversed" start="3"> 5 <li>习近平：不敢有丝毫自满，但怀有无比自信</li> 6 <li>习近平向“2019·中国西藏发展论坛”致贺信</li> 7 <li>“一带一路”在制造债务陷阱？ 他们有话说</li> 8 <li>习近平：不敢有丝毫自满，但怀有无比自信</li> 9 <li>习近平：不敢有丝毫自满，但怀有无比自信</li> 10 </ol> 11 12 <!-- 属性type = A 项目符号为大写字母 --> 13 <ol type="A" start="1000"> 14 <li>习近平：不敢有丝毫自满，但怀有无比自信</li> 15 <li>习近平向“2019·中国西藏发展论坛”致贺信</li> 16 <li>“一带一路”在制造债务陷阱？ 他们有话说</li> 17 <li>习近平：不敢有丝毫自满，但怀有无比自信</li> 18 <li>习近平：不敢有丝毫自满，但怀有无比自信</li> 19 </ol> 20 21 22 <!-- 属性type = a 项目符号为小写字母 --> 23 <ol type="a" reversed start="3"> 24 <li>习近平：不敢有丝毫自满，但怀有无比自信</li> 25 <li>习近平向“2019·中国西藏发展论坛”致贺信</li> 26 <li>“一带一路”在制造债务陷阱？ 他们有话说</li> 27 <li>习近平：不敢有丝毫自满，但怀有无比自信</li> 28 <li>习近平：不敢有丝毫自满，但怀有无比自信</li> 29 </ol> 30 31 32 33 <!-- 属性type = i 项目符号为小写罗马数字 --> 34 <ol type="i" reversed start="3"> 35 <li>习近平：不敢有丝毫自满，但怀有无比自信</li> 36 <li>习近平向“2019·中国西藏发展论坛”致贺信</li> 37 <li>“一带一路”在制造债务陷阱？ 他们有话说</li> 38 <li>习近平：不敢有丝毫自满，但怀有无比自信</li> 39 <li>习近平：不敢有丝毫自满，但怀有无比自信</li> 40 </ol> 41 42 43 <!-- 属性type = I 项目符号为大写罗马数字 --> 44 <ol type="I" start="99"> 45 <li>习近平：不敢有丝毫自满，但怀有无比自信</li> 46 <li>习近平向“2019·中国西藏发展论坛”致贺信</li> 47 <li>“一带一路”在制造债务陷阱？ 他们有话说</li> 48 <li>习近平：不敢有丝毫自满，但怀有无比自信</li> 49 <li>习近平：不敢有丝毫自满，但怀有无比自信</li> 50 </ol> |
注意：
a> 有序列表和无序列表的type属性值不能通用
b> li标签可以通用有序和无序列表的type值
修改列表项目符号的颜色：
1 <head> 2 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 3 <title>Document</title> 4 <style type="text/css"> 5 ul{ 6 color: red; 7 } 8 9 span{ 10 color: #000; 11 } 12 </style> 13 </head> 14 <body> 15 <ul type="square"> 16 <li><span>习近平：不敢有丝毫自满，但怀有无比自信</span></li> 17 <li><span>卡特获颁美中关系卓越领袖奖 三任美国总统的选择</span></li> 18 <li>逾640家公司致信特朗普:要求放弃对华加征更多关税</li> 19 <li>演员王劲松：演员背台词都要被夸了？多不要脸呐</li> 20 <li>小区物业服务正常了，业委会却集体请辞……</li> 21 </ul> 22 </body> |
1.3 自定义列表 Definition List
1 <dl> 2 <dt>定义项1</dt> 3 <dd>描述项11</dd> 4 <dd>描述项12</dd> 5 <dd>描述项1n</dd> 6 7 <dt>定义项m</dt> 8 <dd>描述项m1</dd> 9 <dd>描述项m2</dd> 10 <dd>描述项mn</dd> 11 </dl> |
案例：
1 <dl> 2 <dt>北京</dt> 3 <dd>首都</dd> 4 <dd>北方的经济、政治、文化中心</dd> 5 <dd>天安门、故宫、八达岭长城</dd> 6 <dd>全聚德烤鸭</dd> 7 8 <dt>上海</dt> 9 <dd>魔都</dd> 10 <dd>南方经济文化中心</dd> 11 <dd>东方明珠、外滩</dd> 12 </dl> |
1.4 列表的嵌套
Ul-li ol-li dl-dt-dd都是固定嵌套
但是li 和 dd中可以像div一样作为容器嵌套任何东西
1 <ul> 2 <li><h4>碳酸饮料</h4> 3 <ol> 4 <li>可乐</li> 5 <li>雪碧 6 <ol type="A"> 7 <li>肯德基</li> 8 <li>啃得起</li> 9 </ol> 10 </li> 11 </ol> 12 </li> 13 <li><h4>功能饮料</h4> 14 <ul> 15 <li>脉动</li> 16 <li>红牛</li> 17 <li>健力宝</li> 18 </ul> 19 </li> 20 <li><h4>茶</h4> 21 <ul> 22 <li>红茶 23 <ul> 24 <li>大红袍</li> 25 <li>铁观音 26 <ul> 27 <li type="I">哈哈哈</li> 28 </ul> 29 </li> 30 </ul> 31 </li> 32 <li>绿茶</li> 33 <li>大麦茶</li> 34 </ul> 35 </li> 36 <li> 37 <dl> 38 <dt>奶制品</dt> 39 <dd>牛奶 40 <ul> 41 <li>蒙牛</li> 42 <li>伊利</li> 43 </ul> 44 </dd> 45 <dd>羊奶</dd> 46 </dl> 47 </li> 48 </ul> |
二、 表格table
2.1 表格基本知识
table表格
tr 行
td(th) 单元格
1 <!-- table>tr*n>td*m + Tab --> 2 <table border="1" bordercolor='blue' height="200" width="400" cellspacing="0" cellpadding="10" bgcolor="yellow" summary="这是某公司年度报表"> 3 <caption>某公司年度报表</caption> 4 <!-- 注意：caption标准中规定一个表格只能添加一个标题，但是由于浏览器差异性，一个表格 添加多个标题caption也可以显示 --> 5 <tr background="./images/aaa.jpg"> 6 <th width="100">公司名称</th> 7 <th width="100">毛利润</th> 8 <th width="100">支出</th> 9 <th width="100">净利润</th> 10 </tr> 11 <tr> 12 <th>爱创客</th> 13 <td>1000</td> 14 <td rowspan="2">11</td> 15 <td>-1</td> 16 </tr> 17 <tr> 18 <th>北大</th> 19 <td>100</td> 20 <!-- <td>1</td> --> 21 <td>99</td> 22 </tr> 23 <tr> 24 <th>清华</th> 25 <td colspan="3">50</td> 26 <!-- <td>80</td> 27 <td>-30</td> --> 28 </tr> 29 </table> |
30 |
31 |
height、width 设置 表格的宽高
align 设置水平对齐方式，用在table中设置表格整体水平对齐方式，用在tr和td设置文本水平居中
属性值：left center right
valign 设置单元格文本垂直对齐方式，属性值 middle top bottom
border、bordercolor 设置边框的厚度和颜色
cellspacing 设置边框与边框之间的距离 默认是2个像素
cellpadding 设置单元格文本距离边框的距离
bgcolor、background 设置表格或者单元格的背景颜色或背景图片
summary 设置表格的描述信息
colspan 设置列合并，同一行中的单元格合并；左右合并
rowspan 设置行合并，连续多行单元格合并，上下合并
2.2 表格区域划分
thead:
tbody:
tfoot:
三个使用顺序： thead à tfoot à tbody
目的：这样浏览器就可以在收到所有数据前呈现页脚了
tbody如果不写，浏览器会默认添加
1 <table border="" width="500" height='200'> 2 <thead> 3 <tr> 4 <th>data</th> 5 <th>data</th> 6 <th>data</th> 7 </tr> 8 </thead> 9 <tfoot> 10 <tr> 11 <th>data</th> 12 <th colspan="2">data</th> 13 </tr> 14 </tfoot> 15 <tbody> 16 <tr> 17 <td></td> 18 <td></td> 19 <td></td> 20 </tr> 21 <tr> 22 <td></td> 23 <td></td> 24 <td></td> 25 </tr> 26 <tr> 27 <td></td> 28 <td></td> 29 <td></td> 30 </tr> 31 </tbody> 32 </table> |
三、 表单form
1.1 表单介绍
表单用来收集用户数据，并将其提交到对应地址
表单form属性：
action 设置表单数据提交的地址
method 设置请求方式
target 页面打开方式
表单控件介绍：
input 输入框
textarea 文本域，多行输入框
select 下拉列表
1.2 input控件介绍
属性type的属性值：
text 文本输入框（默认）
password 密码输入框
radio 单选框
checkbox 复选框
单选框和复选框name值必须一致
属性: checked 默认被选中的选项
file 文件域
浏览器差异性
image 图像域 具有和submit同样提交的功能
submit 提交按钮
reset 清空或重置信息
button 普通按钮
<form action="think.php" method="get" target="_blank"> <table cellpadding="10px"> <tr> <td>姓名：</td> <!-- placeholder:文本提示信息 --> <td><input type="text" id="" name="" value="" placeholder="请输入您的姓名" /></td> </tr> <tr> <td>个人密码：</td> <td><input type="password" id="" name="" value="" placeholder="请输入您的密码" /></td> </tr> <tr> <td>性别：</td> <td><input type="radio" id="" name="sex" value="" checked="checked" />男 <input type="radio" id="" name="sex" value="" checked />女 <input type="radio" id="" name="sex" value="" />未知 </td> </tr> <tr> <td>个人兴趣：</td> <td><input type="checkbox" id="" name="hobby" value="" />篮球 <input type="checkbox" id="" name="hobby" value="" checked="checked" />足球 <input type="checkbox" id="" name="hobby" value="" />桌球 <input type="checkbox" id="" name="hobby" value="" checked/>学习</td> </tr> <tr> <td>上传个人简历：</td> <td><input type="file" id="" name="" value=""/></td> </tr> <tr> <td>上传个人头像：</td> <td><input type="image" src="./images/ccc.jpg" id="" name="" value=""/></td> </tr> <tr> <td><input type="submit" value="提交数据" /></td> <td><input type="reset" id="" name="" value="清空数据"/> <input type="button" id="" name="" value="普通按钮" onclick="alert('哈哈哈！小逗比，要下课了，准备好吃饭！嗯呢')" /></td> </tr> </table> </form> |
项目实战视频教程，请添加微信“haomei0452”免费领取
关注微信公众号“icketang”，获取最新前端资讯，学习资料
B站搜索“爱创课堂网络科技” 免费观看前端视频以及项目实战
