一、 列表
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站搜索“爱创课堂网络科技” 免费观看前端视频以及项目实战