Web前端——HTML中的列表、表格、表单⼀. 列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<!--
列表（list）
1、铅笔
2、尺⼦
3、橡⽪
在html中也可以创建列表，html列表⼀共有三种：
1、有序列表
2、⽆序列表
3、定义列表
⽆序列表，使⽤ul标签来创建⽆序列表
使⽤li表⽰列表项(list item)
有序列表，使⽤ol标签来创建⽆序列表
使⽤li表⽰列表项
定义列表，使⽤dl标签来创建⼀个定义列表
使⽤dt来表⽰定义内容
使⽤dd来对内容进⾏解释说明
列表之间可以相互嵌套
-->
<ul>
<li>结构</li>
<li>表现</li>
<li>⾏为</li>
</ul>
<ol>
<li>结构</li>
<li>表现</li>
<li>⾏为</li>
</ol>
<dl>
<dt>结构</dt>
<dd>结构表⽰⽹页的结构，结构⽤来规定⽹页中哪⾥是标题，哪⾥是段落</dd>
<dd>结构表⽰⽹页的结构，结构⽤来规定⽹页中哪⾥是标题，哪⾥是段落</dd>
<dd>结构表⽰⽹页的结构，结构⽤来规定⽹页中哪⾥是标题，哪⾥是段落</dd>
</dl>
<ul>
<li>
aa
<ul>
<li>aa-1</li>
<li>aa-2</li>
</ul>
</li>
</ul>
</body>
</html>
结果：
1. 符号列表
<h3>HTML5 + CSS + JS --- 符号列表</h3> <hr>
<!-- 添加⽂档主体内容 -->
html中提交表单用什么属性<ul type="disc">
<li>圆点符号列表1</li>
<li>圆点符号列表2</li>
<li>圆点符号列表3</li>
</ul>
<ul type="circle">
<li>空⼼圆形符号列表1</li>
<li>空⼼圆形符号列表2</li>
<li>空⼼圆形符号列表3</li>
</ul>
<ul type="square">
<li>⽅形符号列表1</li>
<li>⽅形符号列表2</li>
<li>⽅形符号列表3</li>
</ul>
2. 编号列表
<title>符号列表标签</title>
</head>
<body>
<!--
type属性可以修改列表项前⾯的符号
-->
<h3>HTML5 + CSS + JS --- 编号列表</h3> <hr>
<!-- order list -->
<ol type="1">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>
<hr>
<ol type="I">
<li>列表I</li>
<ol type="i">
<li>列表i</li>
<li>列表ii</li>
</ol>
<li>列表II</li>
</ol>
<hr>
<ol type="A">
<li>列表A</li>
<ol type="a">
<li>列表a</li>
<li>列表b</li>
<li>列表c</li>
</ol>
<li>列表B</li>
<li>列表C</li>
</ol>
</body>
</html>
3. ⾃定义列表
<title>⾃定义列表标签</title>
</head>
<body>
<h3>HTML5 + CSS + JS --- ⾃定义列表</h3>
<hr>
<!-- 添加⽂档主体内容 -->
<dl>
<dt>HTML 5</dt>
<dd>HyperText Mark-up Language 5th</dd>
<dt>CSS3</dt>
<dd>Cascading Style Sheets 3</dd>
<dt>JavaScript</dt>
<dd>⾮常、⾮常强⼤的脚本语⾔</dd>
</dl>
</body>
</html>
⼆. 表格
1. 定义
HTML表格⼀般由表格标题、表头、表格主体、表格⾏、表格列、单元格、表注等部分组成
表格由 <table> 标签来定义。
每个表格均有若⼲⾏（由 <tr> 标签定义），每⾏被分割为若⼲单元格（由 <td> 标签定义）。
字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含⽂本、图⽚、列表、段落、表单、⽔平线、表格等等。
<!doctype HTML>
<html>
<head>
<title>表格</title>
</head>
<body>
<table border="1"><!-- 边框属性，表⽰边框的宽度 -->
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
<!-- tr表⽰⾏，td表⽰列 -->
</table>
</body>
</html>
表格的表头单元格使⽤ <th> 标签进⾏定义。
⼤多数浏览器会把表头显⽰为粗体居中的⽂本：
<table border="1"align="center"><!--align设置表格相对于页⾯的对齐⽅式--> <tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
2. 属性
(1). 定义表格主体的标签
<caption>标签--------定义表格的标题
<caption align="⽔平对齐⽅式"valign="垂直对齐⽅式">
表格标题
</caption>
<thead>标签 ---------表格的页眉（表头部分）
<tbody>标签 ---------表格的主体
<tfoot>标签 ---------定义表格的页脚（表格的注脚）
表格三要素 table、tr、td 缺⼀不可。
(2). 定义表格属性的标签
语法：
<table 属性1=""属性2=""...>
</table>
<table> 标签（定义表格）
常⽤属性：
border="1" 表格边框的宽度
bordercolor="#fff" 表格边框的颜⾊
cellspacing="5" 单元格与单元格之间的空⽩间距
cellpadding="6" 设置单元格内容与其边框之间的空⽩距离宽度
width="500" 表格的总宽度
height="100" 表格的总⾼度
bgcolor="#fff" 表格整体的背景⾊
align="对齐⽅式" 设置表格对齐⽅式
(3). th标签属性
<th> 标签（定义表格的表头单元格）
常⽤属性:
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论