1.表格标签

1.1表格的主要作用

显示、展示数据，数据规整、可读性好

1.2表格的基本语法

<table align="center" border="1" cellpadding="5" cellspacing="0" width="500" height="250"><thead><tr><th>序号</th><th>姓名</th><th>头像</th><th>性别</th><th>年龄</th><th>相关链接</th></tr></thead><tbody><tr><td>1</td><td>吴彦祖</td><td><img src="data:images/1.png" width="50"></td><td>男</td><td>45</td><th><a href="http://www.baidu.com" target="_blank">百度</a></th></tr><tr><td>2</td><td>刘德华</td><td><img src="data:images/2.jpg" width="50"></td><td>男</td><td>53</td><th><a href="http://www.baidu.com" target="_blank">百度</a></th></tr><tr><td>3</td><td>古天乐</td><td><img src="data:images/3.jpg" width="50"></td><td>男</td><td>55</td><th><a href="http://www.baidu.com" target="_blank">百度</a></th></tr></tbody>
</table>

序号	姓名	头像	性别	年龄	相关链接
1	吴彦祖	吴彦祖.jpg	男	45	百度
2	刘德华	刘德华.jpg	男	53	百度
3	古天乐	古天乐.jpg	男	55	百度

<tr>:table row 单元行
<td>:table data cell 单元格
<th>:table head 表头单元格(加粗居中)

1.3表格属性

属性名	属性值	描述
align	left、right、center	规定表格的对齐方式(align：排列)
border	1或“”	规定表格单元是否拥有边框，默认为“”，表示没有边框
cellpadding	像素值	规定单元格边沿与其内容之间的空白，默认1像素(Padding-填充，属性定义元素边框与元素内容之间的空间。)
cellspacing	像素值	规定单元格之间的空白，默认2像素
width	像素值或百分比	规定表格宽度

注：这些属性要写到表格标签table里面去

1.4表格结构标签

分成两部分：表格头部和表格主体

<thead>头部区域
<tfoot>尾部区域
<tbody>主体区域

<table border="1"><thead><tr><th>Month</th><th>Savings</th></tr></thead><tfoot><tr><td>Sum</td><td>$180</td></tr></tfoot><tbody><tr><td>January</td><td>$100</td></tr><tr><td>February</td><td>$80</td></tr></tbody>
</table>

1.5合并单元格

特殊情况下，可以把多个单元格合并为一个单元格

1、合并单元格方式：

跨行合并：rowspan="个数" （row：行）
跨列合并：colspan="个数" （column：列）

2、目标单元格（写合并代码，th、td标签后写）

跨行：最上侧单元格为目标单元格，写合并代码
跨列：最左侧单元格为目标单元格，写合并代码

3、合并单元格的步骤：先写好基础表单，然后再合并，多余的删掉

例：

<table ><tr><th colspan="3" align="center">简历</th> </tr><tr><td rowspan="2">头像</td> <td>2</td> <td>2</td> </tr><tr><td>2</td> <td>2</td>  </tr>
</table>

简历
头像	2	2
头像	2	2

2.列表标签

表格用来显示数据，那么列表就是用来布局的。

2.1无序列表（重点）

< ul >（Unordered List表示无序列表（只能放li标签），< li >列表项 lists，里面可以放其他标签）

<h5>世界上最臭的食物？</h5>
<ul><li>榴莲</li><li>臭豆腐</li><li>鲱鱼罐头</li>
</ul>

世界上最臭的食物？

榴莲
臭豆腐
鲱鱼罐头

2.2有序列表（理解）

< ol > (ordered lists有序表，只能放li标签)

<ol><li>刘德华：10000</li><li>刘若英：2000</li><li>刘星：200</li>
</ol>

刘德华：10000
刘若英：2000
刘星：200

2.3自定义列表（重点）

自定义列表常用于对术语或名词进行解释，定义列表的列表项前没有任何项目符号

<dl><dt>名词1</dt><dd>名词1解释1</dd><dd>名词1解释2</dd>
</dl>

< dl >与< dt > 和< dd >一起使用，< dl > 里只能放< dt >或< dd >
dt、dd没有数量限制，一般是1个dt对多个dd
<dl> ：definition list-定义列表，大盒子；< dt>：define list title-定义列表中各列表项的标题；< dd>：define list define定义列表各列表项的说明文字段

2.4列表总结

标签名	定义	说明
< ul >< /ul>	无序标签	里面只能包含li，没有顺序，使用较多。li里面可以包含任何标签
< ol>< /ol>	有序标签	里面只能包含li，有顺序，使用少。li里面可以包含任何标签
< dl >< /dl>	自定义标签	里面只能包含dt和dd。dt和dd里面可以放任何标签

注：

学会什么时候用无序，什么时候用自定义列表？（看整齐度）
无序和自定义列表代码怎么写？（大盒子包小盒子）
列表布局用CSS更美观

3.表单

在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。表单目的是为了收集用户信息。

3.1表单控件：

包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

提示信息： 一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。

表单域： 它相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

3.1.1.input 控件

 <input type="属性值" value="你好">

input 输入的意思
< input />标签为单标签
type属性设置不同的属性值用来指定不同的控件类型
除了type属性还有别的属性

常用属性：

 用户名: <input type="text" /> 密  码：<input type="password" />

value属性

value 默认的文本值。有些表单想刚打开页面就默认显示几个文字，就可以通过这个value 来设置。

 用户名:<input type="text"  name="username" value="请输入用户名">

name属性

name表单的名字，这样，后台可以通过这个name属性找到这个表单。页面中的表单很多，name主要作用就是用于区别不同的表单。
- name属性后面的值，是我们自己定义的。
- radio 如果是一组，我们必须给他们命名相同的名字 name 这样就可以多个选其中的一个啦
- name属性，我们现在用的较少，但是，当我们学ajax 和后台的时候，是必须的。

 <input type="radio" name="sex"  />男<input type="radio" name="sex" />女

checked属性

表示默认选中状态。较常见于单选按钮和复选按钮。

 性    别:<input type="radio" name="sex" value="男" checked="checked" />男<input type="radio" name="sex" value="女" />女

input 属性小结

属性	说明	作用
type	表单类型	用来指定不同的控件类型
value	表单值	表单里面默认显示的文本
name	表单名字	页面中的表单很多，name主要作用就是用于区别不同的表单。
checked	默认选中	表示那个单选或者复选按钮一开始就被选中了

3.1.2 label标签

label 标签为 input 元素定义标注（标签）。
label标签主要目的是为了提高用户体验。为用户提高最优秀的服务。

作用：用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。

如何绑定元素呢

第一种用法就是用label标签直接包含input表单，适合单个表单选择
第二种用法 for 属性规定 label 与哪个表单元素绑定(通过id)。

   第一种

   <label> 用户名： <input type="radio" name="usename" value="请输入用户名">   </label>

   第二种

   <label for="sex">男</label><input type="radio" name="sex"  id="sex">

3.1.3 select表单元素

下拉列表：

 籍贯：<select><option selected="selected">河南</option><option>北京</option><option>上海</option></select>

< select >中至少包含一对< option >.
在< option >中定义select=“selected”时，当前项即为默认选中项

3.1.4 textarea控件(文本域,例：留言板)

通过textarea控件可以轻松地创建多行文本输入框.
cols="每行中的字符数"
rows="显示的行数" 我们实际开发不用

   <textarea cols="50">提示信息</textarea>

3.1.5 文本框和文本域区别

表单	名称	区别	默认值显示	用于场景
input type="text"	文本框	只能显示一行文本	单标签，通过value显示默认值	用户名、昵称、密码等
textarea	文本域	可以显示多行文本	双标签，默认值写到标签中间	留言板

表格：综合案例

<h4>青春不常在，抓紧谈恋爱！！</h4>
<table width="500"><tr><td>性别：</td><td><input type="radio" name="sex" id="sex1"><label for="sex1"><img src="data:images/1.png"width="10">男</label><input type="radio" name="sex" id="sex2"><label for="sex2"><imgsrc="data:images/2.jpg" width="10">女</label></td></tr><tr><td>生日：</td><td><select value="请选择年"><option selected="selected">--请选择年--</option><option>1999</option><option>2000</option><option>2001</option></select><select><option selected="selected">--请选择月--</option><option>1</option><option>2</option><option>3</option></select><select value="请选择日"><option selected="selected">--请选择日--</option><option>1</option><option>2</option><option>3</option></select></td></tr><tr><td>所在地区：</td><td><input type="text"></td></tr><tr><td>婚姻状况：</td><td><input type="radio" name="marriage" id="marriage1"><label for="marriage1">未婚</label><input type="radio"name="marriage" id="marriage2"><label for="marriage2">已婚</label><input type="radio" name="marriage"id="marriage3"><label for="marriage3">离婚</label></td></tr><tr><td>学历：</td><td><input type="text"></td></tr><tr><td>喜欢的类型：</td><td><input type="checkbox">强壮的<input type="checkbox">年轻的<input type="checkbox">帅气的<input type="checkbox">安静的</td></tr><tr><td>自我介绍：</td><td><textarea></textarea></td></tr><tr><td></td><td><input type="submit" value="免费注册"></td></tr><tr><td></td><td><input type="checkbox">我同意注册条款和会员加入标准</td></tr><tr><td></td><td><a href="login.html">我是会员，立即登录</a></td></tr><tr><td></td><td><h4>我承诺</h4><ul><li>年满18岁，单身</li><li>抱着严肃的态度</li><li>真诚寻找另一半</li></ul></td></tr>
</table>

4.查阅文档

学会查阅文档

推荐网站：

百度
W3C：w3school 在线教程
MDN：MDN Web Docs

【前端学习-初阶-HTML】HTML标签（下）相关推荐

【数据结构初阶】链表（下）——带头双向循环链表的实现
目录带头双向循环链表的实现 1.带头双向循环链表的节点类型 2.创建带头双向循环链表的节点 3.向带头双向循环链表中插入数据 <3.1>从链表尾部插入数据 <3.2>从链表头 ...
前端学习——HTML初学__2 HTML标签
一.HTML语法规范 1.标签关键词总是在<>中,并且大多数成对出现,成为双标签.如:<html>开始标签</html>结束标签当然也有单独出现的标签,如< ...
DSP学习初阶的一些笔记
这些内容都是一些基础的.概述性的知识,是本人在学习.使用DSP开始阶段的一些总结,对于DSP内部结构:各个寄存器的配置使用.各种外设的详细配置.中断处理机制.内存管理以及各种编程.调试的经验,以后有空 ...
前端学习第三章——a标签（超链接）
目录 a标签(超链接) 超链接的本地跳转功能性链接 a标签(超链接) 我们浏览一个网页,比如京东.天猫.腾讯视频.csdn.掘金,这些网站,我们总是可以看到一些按钮或者图片或者文字,点击之后可以跳转 ...
前端学习（HTML）--图片标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
Python学习初阶：Python基本介绍及常用数据类型
**************************************************************************************************** ...
前端学习（86）：标签嵌套规范
Eclipse开发初阶之Eclipse多国语言包安装
Eclipse开发初阶之Eclipse多国语言包安装 2008-02-01 13:07:13  标签:Eclipse 开发多国语言包 Java 安装 ...
前端三剑客之 HTML - JavaEE初阶 - 细节狂魔
文章目录前言后端 && 前端的部分历史 - java 关于网站搭建正文开始! HTML 怎么编写一个HTML的代码? 小拓展: 快速编写 HTML 代码的小技巧浏览器的开发者工 ...

【前端学习-初阶-HTML】HTML标签（下）