HTML简介

HTML是**超文本标记语言（HyperText Markup Language）**的简称

HTML的前世今生

从初期的网络诞生后，已经出现了许多HTML版本:

版本	发布时间
HTML	1991
HTML+	1993
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML 1.0	2000
HTML5	2012
XHTML5	2013

HTML定义

HTML语言用于编写各种网页
HTML语言可以在网页里说明文字、图形、动画、声音、表格、链接等
HTML不是一门编程语言，而是一种标记语言

HTML编辑器

常用的HTML编辑器有下列几款：

HBuilder：http://www.dcloud.io/
Notepad++：https://notepad-plus-plus.org/
Sublime Text：http://www.sublimetext.com/
VS Code：https://code.visualstudio.com/

HTML结构

<!DOCTYPE html>
<html><head><meta charset="utf-8" /></head><body><h1>这是一个文本</h1><p>这是一个段落</p>....</body>
</html>

这是一个文本

这是一个段落

....

代码分析

DOCTYPE 声明了文档
标签 <html> 与 </html> 描述了文档类
标签 <head> 与 </head>是网页的头部表示(一般不可视)
标签 <body> 与 </body> 为可视化网页内容
标签 <h1> 与 </h1> 作为一个标题使用
标签 <p> 与 </p> 作为一个段落显示

HTML标签

根据上面的代码，我们可以看到HTML代码都是由一个个<…>组成的
我们称代码里的<…>为HTML标签
在HTML中的标签分为两种
双标签(一般标签):由开始标签<…>和结束标签</…>组成的例:<html>…</html>
单标签(自闭和标签):由一个标签组成的<…/> 例:<img … />

<DOCTYPE>声明

DOCTYPE对大小写是不敏感的，以下4种均正确

<!DOCTYPE html><!--推荐-->
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>

<head>(头部)标签

<head>标签包含了所有的头部标签元素。在 <head>元素中你可（scripts）, 样式文件（CSS），及各种 meta 信息。

head中一般只能存在以下6中标签
<title>标签
<meta>标签
<link>标签
<style>标签
<script>标签
<base>标签

<title>标签

<titie>标签用来定义网页的标题

<head><title>Lai Lab-专注于技术资源的网站</title>
</head>

<meta>标签

<meta> 标签描述了一些基本的元数据。
<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
<meta> 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务。

<!--mate编码格式说明-->
<meta charset="utf-8" />
<!--为搜索引擎定义关键字-->
<meta name="keywords" content="C Java Python MySQL HTML"/>
<!--为网页定义描述内容-->
<meta name="description" content="Free Web tutorials on Java and HTML"/>
<!--定义网页作者-->
<meta name="author" content="Lai"/>
<!--每30秒刷新网页-->
<meta http-equiv="refresh" content="30"/>

<link>标签

<link> 标签定义了文档与外部资源之间的关系

<head><link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

<style>标签

<style> 标签定义了元素的CSS样式

<head><style type="text/css">*{margin: 0;padding: 0;}</style>
</head>

<script>标签

<script>标签主要用来定义页面的JavaScript代码，也可以引用外部JavaScript文件
```
<head><script>...</script>
</head>
```

<base>标签

<base> 标签描述了基本的链接地址/链接目标，该标签作为 HTML 文档中所有的链接标签的默认链接
```
<head><base href="http://www.lailab.cn" target="_blank">
</head>
```

本章练习

本章练习的完整答案将会在下一章的本章练习中给出
请默写HTML基本框架

常用标签

以下是一些常用HTML标签

标签名	标签含义
<a>	超链接标签
<b>	文字加粗
<big>	增大字体
<br />	换行
<center>	内容居中
<code>	代码模式
<div>	组件盒
<dl>	定义列表
<em>	强调文字
<font size=“” color=“”></font>	字体设置
<i>	斜体
<li>	无序列表
<p>	段落
<small>	缩小字体

标签详解

标题标签(<h1>~<h6>)

<title>和<h>都叫标题标签，但是<title>标签是用来给网页设置标题，而<h>标签是网页内部的标题
h是hander的缩写，在<h1>~<h6>中，<h1>重要性最高，<h6>重要性最低
```
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
```
一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

段落标签(<p>)

在HTML中，可以用<p></p>来表示一段本文
```
<p>静夜思</p>
<p>床前明月光，</p>
<p>疑是地上霜。</p>
<p>举头望明月，</p>
<p>低头思故乡。</p>
```
静夜思

床前明月光，

疑是地上霜。

举头望明月，

低头思故乡。

换行标签(<br>)

在一些特定的文章中，需要手动换行，就需要用到<br >标签
```
<p>静夜思<br />床前明月光，<br />疑是地上霜。<br />举头望明月，<br />低头思故乡。</p>
```
静夜思
床前明月光，
疑是地上霜。
举头望明月，
低头思故乡。

文本标签(8种)

类型	标签
粗体标签	<strong>,<b>
斜体标签	<i>,<em></em>,<cite>
上标标签	<sup>
下标标签	<sub>
中划线标签	<s>
下划线标签	<u>
大字号标签	<big>
小字号标签	<small>

水平线标签(<hr>)

<hr />标签是英文horizon的缩写，在HTML中表示水平线

<p>静夜思</p>
<p>床前明月光，</p>
<p>疑是地上霜。</p>
<p>举头望明月，</p>
<p>低头思故乡。</p>
<hr />
<p>悯农</p>
<p>锄禾日当午，</p>
<p>汗滴禾下土。</p>
<p>谁知盘中餐，</p>
<p>粒粒皆辛苦。</p>

静夜思

床前明月光，

疑是地上霜。

举头望明月，

低头思故乡。

悯农

锄禾日当午，

汗滴禾下土。

谁知盘中餐，

粒粒皆辛苦。

盒子标签(<div>)

在HTML中，我们用<div>来划分结构，从而让CSS和JavaScript更好的控制某一块的内容

<div><!--这是第一首诗--><p>静夜思</p><p>床前明月光，</p><p>疑是地上霜。</p><p>举头望明月，</p><p>低头思故乡。</p>
</div>
<div><!--这是第二首诗歌--><p>悯农</p><p>锄禾日当午，</p><p>汗滴禾下土。</p><p>谁知盘中餐，</p><p>粒粒皆辛苦。</p>
</div>

静夜思

床前明月光，

疑是地上霜。

举头望明月，

低头思故乡。

悯农

锄禾日当午，

汗滴禾下土。

谁知盘中餐，

粒粒皆辛苦。

行内元素

块元素和行内元素在HTML中是极其重要的概念，同时也是CSS中的重要内容
在之前的学习中，可能会发现运行结果中，有些元素是独占一行的，其他元素位于其他行，如：<strong>，<b>，<em>等

以下总结了几种常见的块元素

行内元素	说明
<strong>	粗体标签
<em>	斜体标签
<a>	超链接标签
<span>	常用行内元素标签，结合CSS定义样式

块元素

除了有行内元素外，也有一些元素不是独占一行的，如：<p>，<div>，<br>，<hr>等

以下总结了几种常见的块元素

块元素	说明
<h1>~<h6>	标题标签
<p>	段落标签
<div>	盒子标签
<br>	换行标签
<hr>	水平线标签
<ol>	有序列表
<ul>	无序列表

总的来说，块元素有以下两个特点
1. 块元素独占一行，排斥其他元素与其同行
2. 块元素可以容纳其他块元素或行内元素

特殊符号

常用符号分为易通过输入法符号和不易通过输入法符号

下面几种是易通过符号

特殊符号	说明	代码
"	双引号	"
‘	单引号(左)	‘
’	单引号(右)	’
×	乘号	×
÷	除号	÷
>	大于号	>
<	小于号	<
&	“与”符号	&
—	破折号	—
\|	竖线(管道符)	\|

几种不易通过符号

特殊符号	说明	代码
§	分节符	§
©	版权符	©
®	注册商标符	®
™	商标符	™
€	欧元符	€
£	英镑符	£
¥	日元符	¥
°	度	°

注释标签

在HTML中注释标签表示为
注释的代码不会显示在浏览器中

本章练习

本章练习的完整答案将会在下一章的本章练习中给出

上章完整代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /></head><body><h1>这是一个文本</h1><p>这是一个段落</p>....</body>
</html>

用本章所学打印出以下内容

赠汪伦
唐©李白
李白乘舟将欲行，
忽闻水上踏歌声。
桃花潭水深千尺，
不及汪伦送我情。

其中题目要用2号字体，朝代用3号字体，作者用3号字体，诗歌用4号字体

列表标签

有些资料中还提到“目录标签dir”和“菜单列表menu”，这两种标签在HTML5中已经被废除了，用无需列表ul替代

有序列表

顾名思义，有序列表就是对数据列表加上顺序，如1. 2. 3.或a. b. c.等
在HTML中想要表示有序列表的话就要用到<ol>标签和<li>标签
```
<ol><li>有序列表1</li><li>有序列表2</li><li>有序列表3</li>
</ol>
```
1. 有序列表1
2. 有序列表2
3. 有序列表3
注意：想要表示有序列表必须要将<ol>和<li>两个标签一起用
从上面的运行结果上看，有序列表将表内元素用数字进行标注顺序
我们还可以通过type来设置其他样式

type属性

<ol type="属性值"><li>有序列表1</li><li>有序列表2</li><li>有序列表3</li>
</ol>

在有序列表中，type的值有如下几种

属性值	表示样式
1	阿拉伯数字：1. 2. 3.
a	小写英文：a. b. c.
A	大写英文：A. B. C.
i	小写罗马数字：i. ii. iii.
I	大写罗马数字：I. II. III.

<!--默认为数字标识-->
<ol><li>有序列表1</li><li>有序列表2</li><li>有序列表3</li>
</ol>
<hr />
<!--数字标识-->
<ol type="1"><li>有序列表1</li><li>有序列表2</li><li>有序列表3</li>
</ol>
<hr />
<!--小写字母标识-->
<ol type="a"><li>有序列表1</li><li>有序列表2</li><li>有序列表3</li>
</ol>
<hr />
<!--大写字母标识-->
<ol type="A"><li>有序列表1</li><li>有序列表2</li><li>有序列表3</li>
</ol>
<hr />
<!--小写罗马标识-->
<ol type="i"><li>有序列表1</li><li>有序列表2</li><li>有序列表3</li>
</ol>
<hr />
<!--大写罗马标识-->
<ol type="I"><li>有序列表1</li><li>有序列表2</li><li>有序列表3</li>
</ol>

有序列表1
有序列表2
有序列表3

有序列表1
有序列表2
有序列表3

有序列表1
有序列表2
有序列表3

有序列表1
有序列表2
有序列表3

有序列表1
有序列表2
有序列表3

有序列表1
有序列表2
有序列表3

无序列表

无序列表就是列表中的元素表示无顺序，例：●. ●. ●.
```
<ul><li>无序列表1</li><li>无序列表2</li><li>无序列表3</li>
</ul>
```
- 无序列表1
- 无序列表2
- 无序列表3

type属性

无序列表中也存在type属性，如下表

属性值	表示样式
disc	实心圆●
circle	空心圆○
square	实心正方形■

<!--默认是实心圆-->
<ul><li>无序列表1</li><li>无序列表2</li><li>无序列表3</li>
</ul>
<hr />
<!--实心圆标识-->
<ul type="disc"><li>无序列表1</li><li>无序列表2</li><li>无序列表3</li>
</ul>
<hr />
<!--空心圆标识-->
<ul type="circle"><li>无序列表1</li><li>无序列表2</li><li>无序列表3</li>
</ul>
<hr />
<!--实心正方形标识-->
<ul type="square"><li>无序列表1</li><li>无序列表2</li><li>无序列表3</li>
</ul>

无序列表1
无序列表2
无序列表3

无序列表1
无序列表2
无序列表3

无序列表1
无序列表2
无序列表3

无序列表1
无序列表2
无序列表3

定义列表

定义列表分为两部分：名词和描述

<dl><dt>名词</dt><dd>描述</dd>....
</dl>

dl是定义列表（definition list）的简称，规定了列表的有效范围
dt是定义名词（definition term）的简称，用于添加列表的名词
dd是定义描述（definition description）的简称，用于添加列表的解释
```
<dl><dt>Java</dt><dd>Java分为Java EE，Java SE，Java ME</dd><dt>Web</dt><dd>Web主要分为HTML，CSS，JavaScript</dd>
</dl>
```
Java

Java分为Java EE，Java SE，Java ME

Web

Web主要分为HTML，CSS，JavaScript

HTML语义化

在HTML中一个功能可能会有很多种实现方法，例：

<!--代码1-->
<ol><li>有序列表1</li><li>有序列表2</li><li>有序列表3</li>
</ol>
<!--代码2-->
<p>1.有序列表1</p>
<p>2.有序列表2</p>
<p>3.有序列表3</p>

有序列表1
有序列表2
有序列表3

1.有序列表1

2.有序列表2

3.有序列表3

由此我们会发现，用p标签写的代码反而比有序列表写法更简单，同理，在HTML中很多标签可以用以前学过的标签来代替，所以就懒得学新标签了，这种想法是完全错误的，HTML语言的精髓恰恰在此，正是因为HTML的语义化才使得HTML在可读性和可维护性上更好，所以，初学者在刚接触HTML时不要抱着这种心态

本章练习

本章练习的完整答案将会在下一章的本章练习中给出

上章完整代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"></head><body><h2>赠汪伦</h2><h3>唐&copy;李白</h3><h4>李白乘舟将欲行，</h4><h4>忽闻水上踏歌声。</h4><h4>桃花潭水深千尺，</h4><h4>不及汪伦送我情。</h4></body></html>

用本章所学打印出以下问卷调查

问卷调查
-----------------------------------------------------------------------------------------
1.你是通过什么途径来到Lai Lab官网的？A.微信公众号B.朋友推荐C.百度搜索D.其他途径2.你感觉Lai Lab官网怎么样？A.很好，功能很多B.一般般，没有什么突出的地方C.很差。。。

其中标题要用2号字体，问题用3号字体，–…–表示分割线

表格标签

在web1.0时代，网页布局通常是用表格来完成的，但是在web2.0中，CSS技术取代了这种方式，但是在网页制作上表格还是有着重要的作用，表格可以整齐的显示信息，如下表

技术	说明
HTML	网页的结构
CSS	网页的外观
JavaScript	网页的行为

基本结构

<table><tr><td>第一行第一列</td><td>第一行第二列</td></tr><tr><td>第二行第一列</td><td>第二行第一列</td></tr>
</table>

第一行第一列	第一行第二列
第二行第一列	第二行第一列

在HTML中，表格标签分为三个部分
- 表格标签：<table>
- 行标签：<tr>
- 列标签：<td>

完整结构

一个完整的表格不仅仅有<table>，<tr>，<td>这些标签，还应该具有<caption>，<th>等

表格标题(caption)

<table><caption>表格标题</caption><tr><td>第一行第一列</td><td>第一行第二列</td></tr><tr><td>第二行第一列</td><td>第二行第一列</td></tr>
</table>

表格标题
第一行第一列	第一行第二列
第二行第一列	第二行第一列

注意：一个表格只能拥有一个标题（caption）

表头单位格(<th>)

  <table><caption>表格标题</caption><tr><th>第一列</th><th>第二列</th></tr><tr><td>第一行第一列</td><td>第一行第二列</td></tr><tr><td>第二行第一列</td><td>第二行第二列</td></tr></table>

表格标题
第一列	第二列
第一行第一列	第一行第二列
第二行第一列	第二行第二列

扩展知识

通常情况下，我们需要的表格都需要有边界，但表格默认是没有边框的，这时我们可以用table中的border属性来定义边框的宽度
```
 <table border="1">...
</table>
```

代码语义化

在平时生活中，表格通常被用来储存一些数据，如成绩等，通常数据需要有表头（数据类型栏），表身（数据栏），表尾（统计数据），在HTML中，我们可以分别用<thead>，<tbody>，<tfoot>来表示表头，表身和表尾

<table><!--表头--><thead><tr><td>第一行第一列</td><td>第一行第二列</td></tr></thead><!--表身--><tbody><tr><td>第二行第一列</td><td>第二行第二列</td></tr></tbody><!--表尾--><tfoot><tr><td>第三行第一列</td><td>第三行第二列</td></tr></tfoot></table>

第一行第一列	第一行第二列
第二行第一列	第二行第二列
第三行第一列	第三行第二列

列合并(colspan)

在前面我们学习了coption标题标签，我们发现这个标题其实是在表的外面的，有时我们可能需要标题存在于表内，此时我们可以通过列合并（cospan）来解决，我们可以合并第一行的两列来显示标题

 <table><!--表外标题--><!--<caption>表格标题</caption>--><tr><!--合并两列来作为内部标题--><td colspan="2">第一行第一列</td></tr><tr><td>第一行第一列</td><td>第一行第二列</td></tr><tr><td>第二行第一列</td><td>第二行第二列</td></tr></table>

第一行第一列
第一行第一列	第一行第二列
第二行第一列	第二行第二列

同理，就能用列合并来解决很多其他问题

行合并(rowspan)

行合并就是讲纵向的多个单位格合并

<table><tr><td rowspan="2">第一行第二行第一列</td><td>第一行第二列</td></tr><tr><td>第二行第二列</td></tr></table>

第一行第二行第一列	第一行第二列
	第二行第二列

本章练习

本章练习的完整答案将会在下一章的本章练习中给出

上章完整代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /></head><body><h2>问卷调查</h2><hr /><ol><li><h3>你是通过什么途径来到Lai Lab官网的？<h3/><ol type="A"><li>微信公众号</li><li>朋友推荐</li><li>百度搜索</li><li>其他途径</li><br /></ol></li><li><h3>你感觉Lai Lab官网怎么样？<h3/><ol><li>很好，功能很多</li><li>一般般，没有什么突出的地方</li><li>很差。。。</li></ol></li></li></body>
</html>

用本章所学打印出注册页面

<!--
格式为：
Lai Lab用户登录系统
账号:  01234567890
密码： ***********
-->
--------------------
|Lai Lab用户登录系统|
--------------------
|账号:|01234567890 |
--------------------
|密码:|*********** |
--------------------

表格边框为1

图片标签

任何网站都不能没有图片，一个图片炫酷交互友好的页面就能吸引更多的流量，而要在网站中加入图片,就要使用图片标签，下面就让我们来认识一下图片标签

基本结构

图片标签是<img />标签，他的结构为
```
<img src="" alt="" title="" />
```
其包含3个常用属性

路径属性（src）

src是<img />标签的路径属性，这个路径可以是想对路径，也可以是绝对路径，也可以是网络路径
src是<img />必要的标签
引用同路径的image.png图片
```
<img src="data:image.png" />
```

描述属性（alt，title）

alt与title都是<img />的描述属性
- alt是描述给浏览器看的，只有当图片无法显示是才会看见alt中的内容
- title是描述给用户看的，当鼠标移动到图片上是，就能看到图片的title内容
```
<img src="data:image.png" alt="美丽的图片" title="漂亮的图片" />
```

本章练习

本章练习的完整答案将会在下一章的本章练习中给出

上章完整代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"></head><body><table border="1"><tr><td colspan="2">Lai Lab用户登录系统</td></tr><tr><td>账号:</td><td>01234567890</td></tr><tr><td>密码:</td><td>**********</td></tr></table></body></html>

本章问题：描述alt与title的区别

超链接标签

HTML最终要的标签（没有之一，本人观点）正是有了超链接（<a>标签），每个网页才会被链接在一起，才会产生复杂的互联网

基本结构

超链接标签是<a>标签，基本结构为
```
<a href="链接地址">文本或图片</a>
```
链接地址可以是内部页面地址也可以是网络（外部）链接地址
当点击文本或图片时，跳转到链接地址

跳转格式属性(terget)

默认跳转方式是在原网页基础上跳转，在某些情况下可能需要新建窗口，就需要用到terget属性，terget为我们提供了4种跳转方式

属性值	说明
_self	原窗口打开（默认）
_blank	新窗口打开
_parent	父窗口打开
_top	顶层窗口打开

锚点链接(页内查找)

<a>标签除了可以链接外部页面和内部页面，还可以在本页面里锚点链接

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><div><a href="#html">html</a><a href="#css">css</a><a href="#javascript">javascript</a></div><div id="html"><p>这是HTML模块</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p></div><div id="css"><p>这是CSS模块</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p></div><div id="javascript"><p>这是JavaScript模块</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p></div></body></html>

当我们点击上面的超链接后会发现，网页跳转到了对应的版块

本章练习

本章练习的完整答案将会在下一章的本章练习中给出
上章问题答案
- alt是描述给浏览器看的，只有当图片无法显示是才会看见alt中的内容
- title是描述给用户看的，当鼠标移动到图片上是，就能看到图片的title内容
本章问题
1. 定义“百度一下1”超链接点击本窗口跳转百度
2. 定义“百度一下2”超链接点击新建窗口跳转百度

表单标签

我们前面的知识只能让我们学习静态页面，本节我们将通过学习表单制作动能与用户交互的动态页面
从标签来看表单标签分为5种
- form标签
- input标签
- textarea标签
- select标签
- option标签
从外观上，表单可分为8种
- 单行文本框
- 单行密码框
- 单选框
- 复选框
- 按钮
- 文件上传
- 多行文本框
- 下拉菜单

表单标签(<form>)

一说起表，大家就会想起几行几列的表格，但是在HTML中，表单和表格本质存在不同，表单是指一些输入框，按钮，复选框，单选框的统称
对于初学者，也可以将表单与<div>标签进行类比，先认为表单是储存这些控件的盒子

form的几个属性

属性	说明
name	表单名称
method	提交方式
action	提交地址
target	打开方式
enctype	编码方式

表单名称（name）

一个网页中可能有多个表单，可以通过name属性对这些表单命名，以便于区分
```
<form name="MyForm1">...
</form>
<form name="MyForm2">...
</form>
```

提交方式（method）

在后面我们会了解到数据提交会有post和get两种方式，在表单里面，一般采用post方式提交
```
<form name="MyForm" method="post">...
</form>
```

提交地址（action）

声明此表单由谁处理

<form name="MyForm" method="post" action="index.php">...
</form>

打开方式（target）

类比<a>标签，target属性同样也是网页打开方式，属性值也与<a>标签相同
```
<form name="MyForm" mrthod="post" action="index.php" target="_blank">...
</form>
```

编码格式（enctype）

enctype规定了表单的编码格式，一般情况下，不需要修改

属性	说明
application/x-www-form-urlencoded	默认的编码方式，把表单域的值处理成URL编码格式
multipart/form-data	用二进制流处理表单中的数据
text/plain	用表单发送邮件

文本框

文本框分为单行文本框和多行文本框

单行文本框

在HTML中，单行文本框用<input>标签实现，单行文本框的类别是通过type属性进行区分的
使用格式为
```
<input type="value" />
```

常用的属性有如下几种

值	描述
email	定义用于 e-mail 地址的文本字段
hidden	定义隐藏输入字段
number	定义带有 spinner 控件的数字字段
password	定义密码字段。字段中的字符会被遮蔽。
search	定义用于搜索的文本字段。
tel	定义用于电话号码的文本字段。
text	默认。定义单行输入字段，用户可在其中输入文本。默认是 20 个字符。
url	定义用于 URL 的文本字段。

同时文本框还有以下几个常用属性

属性	说明	内容
value	添加内容	任意字符串
size	尺寸大小	数字
maxlength	最大输入长度	数字
placeholder	提示文字	任意字符串

<!DOCTYPE html><html><head><meta charset="utf-8" /></head><body><form name="MyForm" mrthod="post" action="index.php" target="_blank"><input type="email" value="这是电子邮件输入框"/><br /><input type="number" value="这是数字输入框"/><br /><input type="search" value="这是搜索框"/><br /><input type="tel" value="这是电话输入框"/><br /><input type="url" value="这是网址输入框"/><br /><input type="text" value="这是单行输入框" /><br /><input type="password" value="这是密码框" /></form></body></html>

多行文本框（textarea）

多行文本框的表示方法为

<textarea rows="行数" cols="列数" value="取值">默认内容</textarea>

按钮标签

按钮标签分为4种

使用格式为

<input type="value" />

属性值	说明
button	一般按钮
submit	数据提交按钮
reset	重置按钮

还有一种如今已很少用了的按钮标签

<button></button>

<!DOCTYPE html><html><head><meta charset="utf-8" /></head><body><form name="MyForm" mrthod="post" action="index.php" target="_blank"><input type="button" value="这是按钮" /><br /><input type="submit" value="这是提交按钮" /><br /><input type="reset" value="这是重置按钮" /><br /><button>已经不用了的按钮</button><br /></form></body></html>

已经不用了的按钮

单选框

在HTML中，单选框的表示方式是

<input type="radio" name="组名" value="内容" />

注意：想要实现单选框的单选效果，就要把各个控件的name属性相同

通过checked属性来表示选中

<!DOCTYPE html><html><head><meta charset="utf-8" /></head><body><form name="MyForm" mrthod="post" action="index.php" target="_blank"><!--checked表示选中状态--><input type="radio" name="sex" value="男" checked />男<!--相当于<input type="radio" name="sex" value="男" checked="checked" />男--><input type="radio" name="sex" value="女" />女</form></body></html>

男女

复选框

复选框的表示方式为

<input type="checkbox" name="组名" value="内容" />

与单选框类似，复选框各个控件的name属性相同

同样也是通过checked属性来表示选中

<!DOCTYPE html><html><head><meta charset="utf-8" /></head><body><form name="MyForm" mrthod="post" action="index.php" target="_blank"><input type="checkbox" name="food" value="苹果" checked />苹果<input type="checkbox" name="food" value="香蕉" />香蕉<input type="checkbox" name="food" value="梨子" checked />梨子</form></body></html>

苹果香蕉梨子

下拉列表

与无序列表类似，下拉列表是通过<select>标签和<option>标签配合表示的

下拉菜单很节省空间

<!DOCTYPE html><html><head><meta charset="utf-8" /></head><body><form name="MyForm" mrthod="post" action="index.php" target="_blank"><select><option>菜单1</option><option>菜单2</option><option>菜单3</option></select></form></body></html>

菜单1 菜单2 菜单3

select有系列2个常用属性

属性	说明
multiple	下拉菜单可以选中多项
size	下拉菜单最多显示多少栏


<!DOCTYPE html><html><head><meta charset="utf-8" /></head><body><form name="MyForm" mrthod="post" action="index.php" target="_blank"><select multiple><option>菜单1</option><option>菜单2</option><option>菜单3</option><option>菜单4</option><option>菜单5</option><option>菜单6</option><option>菜单7</option><option>菜单8</option><option>菜单9</option><option>菜单10</option></select></form></body></html>

菜单1 菜单2 菜单3 菜单4 菜单5 菜单6 菜单7 菜单8 菜单9 菜单10


<!DOCTYPE html><html><head><meta charset="utf-8" /></head><body><form name="MyForm" mrthod="post" action="index.php" target="_blank"><select size="5"><option>菜单1</option><option>菜单2</option><option>菜单3</option><option>菜单4</option><option>菜单5</option><option>菜单6</option><option>菜单7</option><option>菜单8</option><option>菜单9</option><option>菜单10</option></select></form></body></html>

菜单1 菜单2 菜单3 菜单4 菜单5 菜单6 菜单7 菜单8 菜单9 菜单10

本章练习

上章完整代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><div><a href="http://www.baidu.com" target="_self">百度一下1</a><a href="http://www.baidu.com" target="_blank">百度一下2</a></div></body></html>

【Web笔记】Html学习手册相关推荐

python官方手册笔记_Python学习手册笔记
Python学习手册(原书第4版)Mark Lutz 著第一部分使用入门 >> orthogonal >> 交互提示模式下编写代码 >> "%&quo ...
《Python学习手册》读书笔记
原文地址为: <Python学习手册>读书笔记之前为了编写一个svm分词的程序而简单学了下Python,觉得Python很好用,想深入并系统学习一下,了解一些机制,因此开始阅读<P ...
CCNA精品学习资料汇总（学习手册+笔记+题库）
CCNA精品学习资料汇总(学习手册+笔记+题库) CCNA认证标志着具备安装.配置.运行中型路由和交换网络,并进行故障排除的能力.获得CCNA认证的专业人士拥有相应的知识和技能,能够通过广域网与 ...
Web前端系统学习——课程笔记（章节8-9）
Web前端系统学习--课程笔记课程链接:WEB前端系统学习 - 网易云课堂参考教程:菜鸟教程笔记链接:Web-Learn-Note 章节8 表格与表单课时30 表格嵌套规则样式初始化 14: ...
python数值类型不包含复数_[python学习手册-笔记]003.数值类型
003.数值类型 ❝ 本系列文章是我个人学习<python学习手册(第五版)>的学习笔记,其中大部分内容为该书的总结和个人理解,小部分内容为相关知识点的扩展. 非商业用途转载请注明作者和出 ...
Python学习手册(第4版)学习笔记
Python学习手册(第4版)是学习Python比较好的教程. (具体教程网上去搜,很多!) 由于看的比较快,很多知识记得不是很牢. 记笔记如下,便于一会按内容翻看.(页码是PDF文件的页码,不是书的 ...
语句与语法笔记：学会python中_doc_和pydoc——python学习手册笔记之3
标题## 语句与语法:学会python中的_doc_和pydoc--python学习手册笔记之3 光看书不练习很难学好python,光看书不做点学习笔记,恐怕连书本的东西也是半知半解,不知所云.这手册 ...
java web开发学习手册_Java 人必备学习手册开发下载！
今天给大家分享一套 5000 页的 Java 学习手册,新鲜出炉!此手册内容专注 Java技术,包括 JavaWeb,SSM,Linux,Spring Boot,MyBatis,MySQL,Nginx ...
阿里P8连夜赶出来的5000页Java学习手册及笔记，巴适的很！
网上的博客知识太碎片化,而看视频学习效率太低,很多人想:如果有完整知识体系 PDF 教程供大家学习,那该多好! 不要慌,成系统的教程和高质量博客,都帮你整理好了! 1. 高质量博客刚刚整理完毕,专注 ...
[译] Google Interview University 一套完整的学习手册帮助自己准备 Google 的面试
[译] Google Interview University 一套完整的学习手册帮助自己准备 Google 的面试十一七天乐,看池博的github,发现这个markdown,转过来mark一下原 ...

【Web笔记】Html学习手册

HTML简介

HTML的前世今生

HTML定义

HTML编辑器

HTML结构

这是一个文本

代码分析

HTML标签

<DOCTYPE>声明

<head>(头部)标签

<title>标签

<meta>标签

<link>标签

<style>标签

<script>标签

<base>标签

本章练习

常用标签

标签详解

标题标签(<h1>~<h6>)

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

段落标签(<p>)

换行标签(<br>)

文本标签(8种)

水平线标签(<hr>)

盒子标签(<div>)

行内元素

块元素

特殊符号

注释标签

本章练习

列表标签

有序列表

type属性

无序列表

type属性

定义列表

HTML语义化

本章练习

表格标签

基本结构

完整结构

表格标题(caption)

表头单位格(<th>)

扩展知识

代码语义化

列合并(colspan)

行合并(rowspan)

本章练习

图片标签

基本结构

路径属性（src）

描述属性（alt，title）

本章练习

超链接标签

基本结构

跳转格式属性(terget)

锚点链接(页内查找)

本章练习

表单标签

表单标签(<form>)

表单名称（name）

提交方式（method）

提交地址（action）

打开方式（target）

编码格式（enctype）

文本框

单行文本框

多行文本框（textarea）

按钮标签

单选框

复选框

下拉列表

本章练习