HTML常用标签整理

HTML常用标签整理

HTML转义字符

常用转义字符：

< &lt;
> &gt;
空格 &nbsp;
? &copy;
? &reg;
? &trade;

HTML中注释

元素类型

1. 区块元素（block）：效果上会独占一行的标签
2. 内联元素（inline）：和其它的元素放在一起

在HTML中内联元素和区块元素基本各占一半。

文本样式相关标签

注意： 废弃的标签也要学，但是后续在CSS3中会讲解其替代的方式，还在用旧的标签的最主要的原因是：可能有的网页早已经写好，并且没有人去维护了，但是浏览器不能不支持这样的网页，但是在新写的网页中不要再使用废弃的元素。

<b> </b> 强调标签，样式标签，bold，在html中已经废弃，不推荐使用，内联元素inline
<strong> </strong> 语义上的强调，在html中推荐使用，内联元素inline
<i> </i> italic的缩写，内联元素，自己有多宽占多宽，文本斜体显示，inline元素
<em> </em> 也是斜体的表示，在html中推荐使用其来代替i标签,emphasize缩写为em,inline元素
<u> </u> underline缩写为u，inline元素，已经废弃
<s> </s> strike缩写为s，在字体上做一个删除线的效果，描述的也是样式，废弃的标签
 subscript的缩写sub，inline，下标，在html5中已经废弃
 superscript的缩写sup，在数学上经常用着两个标签,inline，上标，描述样式的标签，在html5中已经废弃
<h1> </h1> 描述语义的标签，block元素，从上到下字体一次减少，该标签的margin在不同的浏览器中是不一样的，要注意。
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>
<p> </p> paragraph的缩写，描述的是语义，在html5中保留，没有被废弃，段中没有间距，但是在段与段之间是有间距的，但是margin在不同的浏览器中是一样的，典型的block元素。
<br /> 单标签，输出换行。
<hr /> 单标签，输出分割线 ，常用的属性有color、width、align（对齐方式）其中align有三个选项：left、right、center。horizontal rule的缩写：hr，在项目中用的很少。
<pre> </pre> 在网页中表示代码时会用到这个标签，意思是采用预定义格式，也就是保留了代码的书写格式，比如缩进等，区块元素。
<code> </code> 经常和上面的pre元素一起使用来表示网页中的代码

分区元素

分区元素用于为元素分组，常用于页面布局

<span> </span> 行内分区元素，最简单的inline元素，没有任何的显示效果，需要CSS样式去实现效果。span直译为“跨距”，但是不好理解，所以在实际的使用中不去翻译。必须要配合CSS和JS才会有效果。
<div> </div> 元素分组，division（分组）的缩写为div，在页面布局中经常会用到，block元素，跟p不一样，p元素上下是有间距的，最简单的区块元素，只是用来将指定的内容放在一个区块中。

在页面中显示图片

<img src=”图片的路径” /> 实际上不是将一张图片嵌入到网页中，而是通知服务器发起一个图片请求（get），请求服务器找到图片并且加载，其中还有img还有几个属性：width:像素和百分比、height、alt：若图片无法显示时显示的文字、title：鼠标悬停时显示的文字，inline元素。

web开发用到的图片格式

bmp ： 未经压缩的bit图
jpeg
jpg
png
gif
psd
tiff

像素

屏幕实际上是由像素点组成，比如我的笔记本电脑是1920*1080像素，也就是说水平方向有1920个像素点，在垂直方向有1080个像素点，在CSS的属性中经常会用到像素的概念，不要理解。

链接元素

<a> </a> inline元素。其中href属性指定了要跳转的url、邮箱（mailto:13101900@qq.com ）、JavaScript代码。 target属性指定你在哪个页面中打开（_self、_blank）。name指定可供停靠的锚点名称， 返回本页的最顶部锚点名称是#，直接href=”#”就够了。

表格元素

列表元素

1. 无序列表 ul（unorder list） 典型的区块元素，并且ul还有margin，在不同的浏览器中margin是不同的，type属性：disc/circle/square
   
   • 列表项： li (list item) 典型的区块元素
2. 有序列表 ol(order list ) 典型的区块元素，也有margin，在不同的浏览器中margin也是不同的 type属性：1/A/a/i/I start属性:100 ，从100开始排，可以自己指定
   
   • 列表项： li (list item) 典型的区块元素
3. 定义列表 dl (definition list) 典型的区块元素
   
   • dd definition detail 类型详情 典型的区块元素
   • dt definition type 类型定义 典型的区块元素
4. 列表可以嵌套

注意：间距最简单的理解方式就是两个元素之间必须要保持一定的距离。

表单元素

form（表单）标签的使用应该是整个HTML中最重要的标签之一，并且包含的内容及其丰富，使用过程需要注意。

form的作用

收集用户的数据，并将其提交给动态页面，与后台程序之间进行交互。

表单使用

<form > </form > 典型的区块元素,form本身没有任何的显示效果，只有语义性的概念。action属性指定处理数据的动态页面，action属性基本在任何情况下都不可省略。 method属性也要指定：get（获取资源）、post（向服务器提交）等。enctype的全名是：Encoded Type（表单中提交数据的编码类型），可取值总共有三个：text/plain（表单数据不做任何处理直接上传），application/x-www-form-urlencoded（默认值，把表单中的数据（比如中文字符）编码后再上传，只能对字符进行编码，也就是说只能提交字符数据，如果想提交的是字节数据，必须使用第三项）、multipart/form-data（以一种特殊的格式上传字符/字节数据）
<input / > 必须要用type来指定类型，类型分别有：submit、text、password、radio（单选按钮，典型内联元素）、checkbox（复选框），默认是text类型。 典型的内联（inline）元素。 name属性绝对不能省略，name表示的是输入的内容含义。 value属性：在输入框中显示的文字提示，提示用户需要输入的可能值：比如用户名、邮箱等。 maxlength：限制最大输入的字符个数 。更加复杂的设置智能根据JS来做。 readonly：只读属性，关于boolean属性在html 5中有特别的说明，这种属性会提交给服务器。 disabled属性表示禁用（表现形式是相应的框会变成灰色），这种属性的特点是不能提交给服务器。 在其中指定一个id，和下面将要讲到的label标签中的for属性配合使用。 checked写上就表示默认被选择。
<label > </label > for属性的值为input标签中id指定的名字，意思是给这个id指定了一个标签。 典型的内联元素
textarea元素代表文本框（输入文本框，只是纯文本的输入框）
select元素：下拉选择框（滚动列表），比较少用，但是还是比较重要的。
option元素：select实现的下拉框的可选项
optgroup:在select标签中中将下拉框中的内容（可选项[由option标签实现]）分组

富文本编辑框，想要输入文本、图片、表格等需要使用富文本编辑框，可以使用第三方工具实现此效果。

• 思考怎么实现多中选一？只要name属性值一样就能实现多中选一。

• 选多个？那么不同就可以了。

• get方法直接把请求追加在地址栏的查询字符串中（有长度的限制），非常的不安全。

• post方法将数据以单独数据包的形式发送给服务器，但是仍然可以以抓包的方式获取到密码等信息（在一个局域网中，并且没有长度的限制），采用的工具是wireshark，同一个局域网内十分的不安全，所以经常用的是https协议。

富文本输入框–可选的第三方工具

在bootstrap中提供了富文本编辑框，要学会使用。已经非常成熟的富文本编辑器有：KindEditor、FCKEditor、CuteEditor。等学完JavaScript我想自己改一个开源的富文本编辑器或者自己从头到尾写一个富文本编辑器，基于web版本的。

表单实现上传图片或者文件

<input type="file"  /> <br />

表单中实现文件上传必须满足的三件事情：

1. <input type="file" name="name" /> 选择文件
2. 表单必须使用post提交，method=”POST”
3. 表单的编码类型必须声明为： enctype=”multipart/form-data”

表单实现编号

注意：一般都是后端人员实现这个功能
需求：应用场景，假如在京东商城中有很多的商品，要对商品进行编号，用表单怎么实现？唯一的标识一个物体。

使用隐藏域实现，需要交给服务器，但是不需要让用户知道，此时就需要使用hidden隐藏域。隐藏域一般由后台人员写，并不是由前台写的

<input type="hidden" name="productionID" value="123456"/>  #name和value必须都要有 

为控件分组

fieldset（双标签元素）：实现分组、legend（双标签元素）：给每个分组进行命名让用户增加明确你的分组到底是什么意思。

#将输入域进行分组，使页面更加整齐。
<fieldset>
    <legend>
    分组名字1
    </legend>
</fieldset>

<fieldset>
    <legend>
    分组名字2
    </legend>
</fieldset>

wireshark抓包工具

工具的具体使用请参见官方文档。

按钮元素

总共有5中可用的button，，其中第5个是最常用的，5种按钮分别是：

1. button：双标签元素，在其中可以加CSS实现样式的控制，单纯的使用button是没用的，但是结合js可以大有作为，具体的功能：在表单外调用一个js函数使用。

<button onclick="alert(‘您确定要关闭吗？‘)">
   关闭网页
</button>

1. input type=“buttoon”，使用input单标签元素，99%的情况是用在form中的，这是基本的一个语义逻辑，在表单内低矮用js函数使用。

2. input type=“submit” 在表单内提交表单。检查不合理，一般不会使用，因为他不管你的输入是否正确它都会提交，并没有任何实际的功能，不好，不合理，这种情况不需要使用name属性，其他的都建议使用name，value两种功能：对于输入框代表的是提示语句；对于按钮是按钮上面显示的文字。

3. input type=“reset” 也不用提供name，只需要提供value属性的值。重置所有的域为初始值，这个按钮基本废弃。

4. input type=“image” src=”” 在表单内显示一个图片按钮，用的还是比较多的，这个选项用的很多，经常会去切图，然后做成图片，然后导入作为我的按钮键。CSS可以使这个功能更加的完美，最常用。实际上其所用和3中的情形作用是一样的。

<input type="image" src="图片地址"></input>

注意：**所有的button都是内联（inline）
元素**。

iframe标签

在当前页面中嵌入另外一个页面。必须要有src属性，src属性指明将要嵌入页面的url。该标签已经废弃，有的浏览器是不支持的。该元素时一个典型的内联（inline元素）。

<iframe src="1.html" width="800px" height="600px" style="border:0" >
    您的浏览器不支持该种功能
</iframe>

details和summary集合的效果

<details>
    <summary>
    三国志
    </summary>

    <p>
    从前一个人写了一本书，叫三国志。
    </p>
</details>

最后几个

mark、meter、time，这些元素并不重要，用到的时候查就可以了。

参考资料

1. http://www.jpzhu.tech
2. 火狐提供的开发者参考文档 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element