标签：inpu 指定 com 内容 焦点 语言 strong body 目标
<!DOCTYPE html>第一行的 DOCTYPE 表示文档类型，这是HTML5的标准格式
<html lang="zh-CN"></html> 在 html 标签中要设置语言，英语是：en，中文是：zh-CN
<meta charset="UTF-8"> 在 meta 标签中一定要设置字符集，是文档存储时用的字符集，还可以设置 GBK
<h1></h1> h 标签用于设置标题，h1 标签最大，h6标签最小<p></p> p 标签用于生成段落<hr /> 标签用于生成一条横线，该标签是一个单标签<br /> 强制换行标签，p 标签也可以换行，但是p标签表示的是段落，所以行距会很大。<b></b>，<strong></strong>，都是将文字以粗体方式显示。XHTML 推荐使用 strong 标签
<i></i>，<em></em>，都是让文字以斜体显示，同样推荐使用 em 标签
<s></s>，<del></del>，文字以加删除线方式显示，推荐使用 del 标签
<u></u>，<ins></ins>，文字以加下划线方式显示，推荐使用 ins 标签img 标签必须要有一个 src 属性，该属性的值是图片的URL地址或者存储地址，属性如下：
| 属性 | 属性值 | 描述 |
|---|---|---|
| src | 文本 | 图片路径 |
| alt | 文本 | 图片不能显示时的替换文本 |
| title | 文本 | 鼠标悬停时显示的内容 |
| width | 像素（XHTML不支持%页面） | 设置图片宽度 |
| height | 像素（XHTML不支持%页面） | 设置图片高度 |
| border | 数字 | 设置图片边框的宽度 |
通常 width 和 height 属性只设置一个一即可。
a 标签有两个属性 href 和 target。其中 href 属性是必须的。href 属性可以指向外部链接、内部链接、空链接。例如：
<a href="https://www.baidu.com">百度一下</a>，这个是指向外部链接
<a href="01-html骨架标签.html">内部链接</a>，这个是指向本地一个 html 文件就是内部连接
<a href="#">空链接</a>，这个 href="#" 表示是一个空链接a 标签的另一个属性 target 的属性值是 _self 和 _blank 两种，默认是 _self。使用 _blank 时表示在新的空白页打开链接。
a 标签不仅可以对文字创建链接，对图像、表格、音频等都可以创建链接。
html 的注释标签是：
<!-- 注释内容 -->
注释内容在程序运行时是不会执行的。
在 sublime 中注释的快捷方式是同时按下 Ctrl + / 键。
路径分为：相对路径 和 绝对路径。
相对路径，是从代码所在的这个文件出发，去寻找目标文件，通常所说的上一级、下一级、同一级，简单来说是相对于 文件 位于 HTML 的页面的位置。
绝对路径：绝对路径使用较少，并且要注意绝对的写法，在windows中绝对路径符号是 ，而不是相对路径的 / 符号。当然绝对路径可以使用 网页的地址。
锚点通常用在同一个页面中跳转，被锚的点是标签的 id 属性的值。例如在页面开始部分的 a 标签中，a 标签内容如下：
<a href="#one">第一集</a>
前面说过，href="#" 是指向空白页，这里是 href="#one" 表示指向本页面的一个标签的 id 属性值是 one 的位置，例如在本页的后面标签中，某一个 h 标签的 id 属性是 one，h 标签内容如下：
<h2 id="one">第一集<h2/>
这时在页面的开始部分点击 第一集 就会跳转到本页的 h2 标签的 第一集 位置。这就是锚点。
这个标签可以设置整体连接的打开的状态。语法如下：
<base target="_blank" />
该标签一定要写在<head></head>之间。添加这个标签及 target="_blank" 属性值后，在后面的 <body></body> 标签中的所有 a 标签都拥有这个属性，就是在新的页面打开链接。避免对每个 a 标签设置这个属性。
语法如下：
<pre>
此例演示如何使用 pre 标签
对空行和 空格
进行控制
</pre>在这个标签内书写的文字会按照书写的模式显式，不需要换行和段落标签。由于不好整体控制，使用较少。
在 html 中有些特殊符号不能直接使用，例如空格、换行、大于、小于等，这时就要用特殊符号来做。
几个常用的特殊字符是：空格：?，小于号（<）：<，大于号（>）：>。还有其它一些特殊符号就不全部列出。
表格标签用于在页面中显示表格。表格有表格标题、有行和列。表格不是用来布局的。常用于显示、展示表格数据。表格使用熟练可以将繁杂的数据表现得有条有理。
创建表格的基本的三对标签 table、tr、td。
表格的重点属性是 cellspacing、cellpadding。具体属性如下，这里属性都是在 table 标签内：
用于表格的第一行或第一列，并且文本加粗居中显示。
th 标签也是一个单元格，与普通的 td 标签不一样，th 标签会让在里面的文字居中并加粗显示。
用法：
<table>
<caption>我是表格标题</caption>
</table>合并单元格的两种方式：跨行合并和跨列合并
合并单元格三步曲：
先确定是跨行还是跨列合并。
根据先上后下，先左后右的原则找到目标单元格，然后写上合并方式及要合并的单元格数量，比如：
<td colsapn="3"></td>
删除多余的单元格。
| 标签名 | 定义 | 说明 |
|---|---|---|
<table></table> |
表格标签 | 就是一个四方的盒子 |
<tr></tr> |
表格行标签 | 行标签在table标签内部才有意义 |
<td></td> |
单元格标签 | 单元格标签是个容器级元素，可以放任何东西 |
<th></th> |
表头单元格标签 | 它还是一个单元格，但是里面的文字会居中且加粗 |
<caption></caption> |
表格标题标签 | 表格的标题，跟着表格一起走，和表格居中对齐 |
| clospan 和 rowspan | 合并属性 | 用来合并单元格的 |
表格可分为三个部分：表头、正文和脚注。分别用：thead、tbody、tfoot来表示。
<thead></thead>：用于定义表格的头部。用来放标题之类的东西。 内部必须拥有 <tbody></tbody>：用于定义表格的主体。放数据本体 。<tfoot></tfoot>放表格的脚注之类。无序列表的各个列表之间没有顺序级别之分，是并列的，默认在每一项前面有一个提示点，基本语法如下：
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul><ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。<li>与</li>之间相当于一个容器，可以容纳所有元素。有顺序排列的列表，各个列表项按照一定的顺序排列定义，默认在每一项前面有一个数字，语法如下：
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ol>基本语法与无序列表一致，在实际中有序列表使用较少。
自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。语法如下：
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>自定义列表标签在实际中很常用。该标签内部还有dt、dd两个标签，一定要注意。
| 标签名 | 定义 | 说明 |
|---|---|---|
<ul></ul> |
无序标签 | 里面只能包含li，没有顺序，在以后布局中最常用的列表 |
<ol></ol> |
有序标签 | 里面只能包含li，有顺序，使用情况较少 |
<dl></dl> |
自定义列表 | 里面有2个兄弟，dt 和 dd |
现在还没有学布局，只要注意下面3点：
作用：收集用户信息。在页面中与用户进行交互，收集用户资料时需要用到表单。
语法：
<input type="属性值" value="值">
常用属性如下：
（1）、type 属性
通过改变这个属性值，可以决定使用哪种 input 表单。比如 type="text" 表示文本框；type="password" 表示密码框，输入密码时不可见，例如：
用户名: <input type="text" />
密 码：<input type="password" />
（2）、value属性
该属性值可在表单显示默认的文字，可以提示用户，例如：
用户名:<input type="text" name="username" value="请输入用户名">
（3）、name属性
用法：
用户名:<input type="text" name=“username” />
<input type="radio" name="sex" />男<input type="radio" name="sex" />女
（4）、checked属性
表示默认选中状态。常与单选按钮和复选按钮一起组合使用。例如单选按钮组合使用，默认选中男：
性 别:
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女
（5）、checkbox 复选框
用于选择多个选项，可使用 checked="checked" 表示默认选项。例如：
爱好:
睡觉 <input type="checkbox" name="hobby" checked="checked" />
爬山 <input type="checkbox" name="hobby" />
篮球 <input type="checkbox" name="hobby" />
足球 <input type="checkbox" name="hobby" /> <br />
（6）、按钮表单 button属性
<input type="button" value="获取短信验证码" />
（7）、提交表单 submit属性
要与 form 表单组合使用才有效，value 属性值可以不写。
<input type="submit" value="提交所填" />
（8）、重置表单 reset属性
<input type="reset" value="重置所填" />
（9）、图像形式提交 image属性
图片提交按钮里面必须包含 src 属性值。例如：
<input type="image" src="images/btn.png" /> <br />
（10）、文件域 file 属性
用于上传文件等，要与 form 表单一起使用才起作用。示例：
<input type="file" />
（11）、input 属性小结
| 属性 | 说明 | 作用 |
|---|---|---|
| type | 表单类型 | 用来指定不同的控件类型 |
| value | 表单值 | 表单里面默认显示的文本 |
| name | 表单名字 | 页面中的表单很多，name主要作用就是用于区别不同的表单。 |
| checked | 默认选中 | 表示那个单选或者复选按钮一开始就被选中了 |
（1）、第一种用法就是用 label 直接包括 input 表单，适合单个表单选择。如下：
<label> 用户名： <input type="radio" name="usename" value="请输入用户名"> </label>
（2）、用 for 属性规定 label 与哪个表单元素绑定。如下：
<label for="sex">男</label>
<input type="radio" name="sex" id="sex">
这里 label 标签的 for="sex" 与 input 标签的 id="sex" 对应，这样 label 标签就与 input 标签绑定。现在用鼠标点击 label 标签里面的文字时，光标会定位到指定的表单里面。
常用于评论区，可以输入多行文字。语法如下：
<textarea cols="每行中的字符数" rows="显示的行数">
文本内容
</textarea>通过 textarea 控件可以创建多行文本输入框。cols 属性和 rows 属性在实际开发中不常用，可用 js 控制。
文本框和文本域区别
| 表单 | 名称 | 区别 | 默认值显示 | 用于场景 |
|---|---|---|---|---|
| input type="text" | 文本框 | 只能显示一行文本 | 单标签，通过value显示默认值 | 用户名、昵称、密码等 |
| textarea | 文本域 | 可以显示多行文本 | 双标签，默认值写到标签中间 | 留言板 |
目的：在有多个选项可供选择的时候，为了节约空间，可使用 select 控件定义下拉列表。语法如下：
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>注意：
<select> 中至少包含一对 option 标签。收集的信息是通过 form 表单域传递给后台服务器端。
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>常用属性如下：
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址。 |
| method | get/post | 用于设置表单数据的提交方式，其取值为get或post。 |
| name | 名称 | 用于指定表单的名称，以区分同一个页面中的多个表单。 |
注意
元素属性值使用双引号语法；元素属性值可以写上的都写上。
推荐使用下面的写法：
<input type="text" />
<input type="radio" name="name" checked="checked" />不推荐下面的写法：
<input type=text />
<input type='text' />
<input type="radio" name="name" checked />标签：inpu 指定 com 内容 焦点 语言 strong body 目标
原文地址：https://www.cnblogs.com/Micro0623/p/11969573.html
