HTML基础及常用标签

本文只介绍了部分标签及其属性，想要了解更多，参考 HTML参考手册

HTML简介

HTML是HyperText Markup Language的简写。
中文名：超文本标记语言。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。”标识”是指该语言是由标签构成的。
超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。

语言特点

超级文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（WWW）盛行的原因之一，其主要特点如下：

简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。
可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。
平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。
通用性：另外，HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

以下总结来自传智播客的视频：

标签的类型

有开始标签和结束标签。需要把网页的数据内容封装在标签体内.
如：<h1></h1>
开始标签与结束标签在一个标签体内。功能单一，不需要封装数据到标签体内。
如：<hr/>

HTML语言的结构

<html>  <!--html语言的根标签 -->
    <head> </head>   <!--网页的头信息-->
    <body> </body>   <!--网页的体部分-->
</html>

头信息

可以设置网页的标题。

 <title>my first HTML page</title>

可以通知浏览器使用指定的码表解释html页面。

<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<!--意思是告知浏览器我这个页面的内容是文本形式（text）存在的html，使用utf-8的码表打开 -->

可以设置该网页的关键字。

<meta name="keywords" content="html,css,js" />
<!-- 一个网页的关键字最好是3~4个 -->

体部分

网页显示的内容写在体部分里。

html常用的标签及属性

标题标签

<!-- <h1>to<h6> 表示是一个标题-->
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

标题标签的属性：

<h1 align="center">标题1</h1> <!-- 设置标题居中显示 -->
<h1 align="left">标题1</h1> <!-- 左对齐 -->
<h1 align="right">标题1</h1> <!-- 右对齐 -->

段落标签###

<p></p>

水平线标签

<hr/>

换行标签

<br/>

下标标签

上标标签

水的化学式:H<sub>2</sub>O
2的16次方：2<sup>16</sup>

原样标签

<pre></pre> pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。

<pre>
                            《致橡树》

                         我如果爱你——
                         绝不像攀援的凌霄花，
                         借你的高枝炫耀自己；

                         我如果爱你——
                         绝不学痴情的鸟儿，
                         为绿荫重复单调的歌曲；
</pre>

列表标签

有序的列表标签

今天中午吃什么？
<ol type="a"><!--type属性设置显示样式-->
    <li>火锅</li>
    <li>烤肉</li>
    <li>快餐</li>
</ol>

无序的列表标签

今天中午吃什么？
<ul type="square"><!--type属性设置显示样式-->
    <li>火锅</li>
    <li>烤肉</li>
    <li>快餐</li>
</ul>

行内标签

块标签

项目标签

<dl> </dl>
<dt> </dt>
<dd> </dd> 会缩进

<dl>
    <dt></dt>
    <dd></dd>
</dl>

实体标签

&nbsp;  <!--空格-->
&lt;    <!--小于号-->
&gt;    <!--大于号-->
&amp;   <!--与&-->
&yen;   <!--￥-->
&copy;  <!--版权©-->
&reg;   <!--商标®-->

媒体标签

<embed src="1.mp3" hidden="false"></embed>
<!--src:文件路径；hidden:是否隐藏-->

飘动标签
<marquee> </marquee>

<marquee scrollamount="30" direction="right">  
<!--scrollamount:飘动速度 direction:飘动方向-->
    <font size="+6" color="red">  <!--字体大小和颜色-->
        吹啊吹啊，我的骄傲放纵！
    </font>
</marquee>

超链接标签

作用1：可用于链接资源。

常用属性：

href：用于指定链接的资源。
target: 设置打开新资源的目标。_blank在新窗口打开资源 _self 在当前窗口打开资源。

<a target="_blank" href="http://www.baidu.com">百度</a>

原理：

a标签的href属性值如果是以http开头的，那么浏览器会马上启动http解释器去解析该网址，首先会在本地机器找一个hosts文件，如果hosts文件上该域名没有对应的主机，那么浏览器就会去对应的dns服务器寻找该域名对应的主机号。如果找到了对应的主机，那么该请求就会发给对应的主机。
hosts文件的地址：C:\Windows\System32\drivers\etc
如果a标签的href属性值没有以任何协议开头，那么浏览器就会启动file协议解析器去解析该资源路径。
如果a标签的href属性值并不是以http开头的，而是其他的一些协议，那么浏览器就会到本地的注册表中查找是否有处理这种协议的应用程序，如果有，那么马上启动该应用程序处理该协议。
- 邮件的协议：mailTo
- 迅雷的协议：thunder

请发送邮件至：<a href="mailTo:[email protected]">[email protected]</a>
下载资源：<a href="thunder://绝世高手.avi">绝世高手.avi</a>

作用2：可用于锚点定位
首先编写一个锚点，然后使用a标签的href属性链接到锚点处。

<a name="top">顶部</a>
页面要显示的一些数据......
<a href="#top">回到顶部</a>

图片标签

<img>
常用属性：
width：设置图片宽度
height：设置图片高度
alt：如果图片资源无法找到，那么就显示对应的文字对图片进行描述。

<img src="1.jpg" width="400" height="300" alt="图片的描述" />

表格标签

<table> 表格
<tr> 行
<td> 单元格
<th> 表头默认的样式是居中、加粗
<caption> 表格标题

常用属性：
border：设置表格的边框
bodercolor：设置边框颜色
width：设置表格宽度
height：设置表格高度
colspan：设置单元格占据指定的列数。
rowspan：设置单元格占据指定的行数。

<table border="1px" width="400px" height="300px">
    <caption>成绩单</caption>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>成绩</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>男</td>
        <td>100</td>
    </tr>
    <tr>
        <td>赵四</td>
        <td>男</td>
        <td>96</td>
    </tr>
    <tr>
        <td>王五</td>
        <td>男</td>
        <td>90</td>
    </tr>
    <tr>
        <td>综合测评</td>
        <td colspan="2">优秀</td>
    </tr>
</table>

成绩表

以前的浏览器一旦遇到一个<table> 表格的开始标签，就必须遇到<table> 结束标签才会显示一个表格的内容。后来一个表格被分为三部分：

<thead> 表头，可以没有
<tbody> 表体，可以有1个或多个
<tfoot> 表尾，可以没有

一个浏览器只要遇到一个网站的tbody标签，就可以显示当前页面的信息。

框架标签

frameSet：一个frameSet可以把一个页面切割成多份，只能按照行或列切割。
frame：不能被切割的，frame是位于frameSet中的。
rows：横向切
cols：纵向切

注意：
frameSet标签不能作为body标签体内的内容。

例子：完成一个简单的公司的前台页面。
一个公司的主页主要由以下四部分构成：公司名称/Logo，导航栏，联系方式和正文部分。如图：
公司主页

接下来对每一个部分进行代码的编写：
1.公司Logo部分
文件名为：top.html

<div align="center">
    <font color="red" size="30px">
        公司的Logo
    </font>
</div>

2.导航栏
文件名为：left.html

<dl>
    <dt>功能介绍</dt>
    <dd><a href="#" target="center">公司简介</a></dd>
    <dd><a href="#">产品介绍</a></dd>
    <dd><a href="#">发展历程</a></dd>
    <dd><a href="#">招聘信息</a></dd>
    <dd><a href="#">联系我们</a></dd>
    <!-- '#'表示不链接其他网页，实际开发时写入对应的网页地址 -->
    <!-- target表示该内容在哪里显示 -->
</dl>

3.正文部分
文件名为：center.html

<!-- 这里可以写需要在正文部分显示的内容 -->

4.联系方式
文件名为：foot.html

<div align="center">
    合作伙伴：百度、腾讯、阿里巴巴...
    友情链接：百度、腾讯、阿里巴巴...
    联系方式：010-12345678
    版权归属：&reg;我的HTML
</div>

接下来需要一个网页将上面的的部分放在一个网页里：

<frameset rows="20%,70%,*">
    <frame src="top.html"/>
    <frameset cols="20%,*">
        <frame src="left.html"/>
        <frame name="center" src="center.html"/>
    </frameset>
    <frame src="foot.html"/>
</frameset>