本篇教程介绍了HTML+CSS入门 HTML标签，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

<

HTML(Hypertext Markup Language)超文本标记语言，它负责页面的结构。超文本指的是超链接，使用超链接可以从一个页面跳转到另一个页面。

　　HTML的发展：1993年6月发布第一个版本，1995年11月第二个版本，2000年底XHTML1.0，2014年HTML5.0。
1、标题 - h1~h6

　　标题(heading)是通过<h1> ~ <h6>来定义的，<h1>定义最大的标题，<h6>定义最小的标题。

　　浏览器会自动地在标题的前后添加空行。

　　默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。

　　请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。
2、段落 - p

　　段落是通过 <p> 标签定义的。

　　浏览器会自动地在段落的前后添加空行。（<p> 是块级元素）

　　使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br /> 标签代替它。

　　如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签。

　　当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。
3、格式化文本
标签 描述
<b>  定义粗体文本。
<big>  定义大号字。
<em>  定义着重文字。
<i>  定义斜体字。
<small>  定义小号字。
<strong>  定义加重语气。
<sub>  定义下标字。
<sup>  定义上标字。
<ins>  定义插入字。
<del>  定义删除字。
<s>  不赞成使用。使用 <del> 代替。
<strike>  不赞成使用。使用 <del> 代替。
<u>  不赞成使用。使用样式（style）代替。
4、超链接 - a

<a href="//www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>

　　在所有浏览器中，链接的默认外观是：

    未被访问的链接带有下划线而且是蓝色的
    已被访问的链接带有下划线而且是紫色的
    活动链接带有下划线而且是红色的

　　如果不使用 href 属性，则不可以使用如下属性：download, hreflang, media, rel, target 以及 type 属性。

　　被链接页面通常显示在当前浏览器窗口中，除非您规定了另一个目标（target 属性）。

　　最好使用 CSS 来设置链接的样式。
download  filename  规定被下载的超链接目标。
href  URL  规定链接指向的页面的 URL。
hreflang  language_code  规定被链接文档的语言。
media  media_query  规定被链接文档是为何种媒介/设备优化的。
name  section_name  HTML5 中不支持。规定锚的名称。
rel  text  规定当前文档与被链接文档之间的关系。
rev  text  HTML5 中不支持。规定被链接文档与当前文档之间的关系。
target  

    _blank
    _parent
    _self
    _top
    framename

 规定在何处打开链接文档。
type  MIME type  规定被链接文档的的 MIME 类型。
5、图像 - img

<img src="boat.gif" alt="Big Boat">

　　在 HTML 中，图像由 <img> 标签定义。要在页面上显示图像，你需要使用源属性（src）。

　　src 指 "source"。源属性的值是图像的 URL 地址。

　　alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。
6、表格 - table tr td
复制代码

<table border="1">
    <tr>
        <th>Heading</th>
        <th>Another Heading</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>            

复制代码

　　表格由 <table> 标签来定义。

　　表格的表头使用 <th> 标签进行定义。大多数浏览器会把表头显示为粗体居中的文本。表头是可选的。

　　每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。

　　字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

　　假如一个表格内没有数据时，该表格内用空格<td>&nbsp;</td>填充。
7、列表 - ul、ol、dl
　　1.无序列表

　　无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

　　无序列表始于 <ul> 标签。每个列表项始于 <li>。

　　列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

<ul>
    <li>Coffee</li>
    <li>Milk</li>
</ul>

　　2.有序列表

　　有序列表也是一列项目，列表项目使用数字进行标记。

　　有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

　　列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

<ol>
    <li>Coffee</li>
    <li>Milk</li>
</ol>

　　3.自定义列表

　　自定义列表不仅仅是一列项目，而是项目及其注释的组合。

　　自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

　　定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

<dl>
    <dt>Coffee</dt>
    <dd>Black hot drink</dd>
    <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>

　　大多数网站最下面的info都可以用自定义列表来写。
8、表单 - form

<form action="url" method="post" ...>
    ...
     input 元素
    ...
</form>

　　表单使用表单标签（<form>）定义。

　　表单是一个包含表单元素的区域。

　　表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。

　　action属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

　　method属性定义了数据传输方式。
标签 描述
<form>  定义供用户输入的表单
<input>  定义输入域
<textarea>  定义文本域 (一个多行的输入控件)
<label>  定义一个控制的标签
<fieldset>  定义域
<legend>  定义域的标题
<select>  定义一个选择列表
<optgroup>  定义选项组
<option>  定义下拉列表中的选项
<button>  定义一个按钮
 　　1.文本框、密码框和提交按钮
复制代码

<form>
    用户名:
    <input type="text" name="username" />
    <br />
    密 码:
    <input type="password" name="pwd" />
    <br />
    <input type="submit" value="提交">
</form>

复制代码

　　在大多数浏览器中，文本域的缺省宽度是20个字符。
　　2.单选框

<form>
    <input type="radio" name="sex" value="male" /> Male
    <br/>
    <input type="radio" name="sex" value="female" /> Female
</form>

　　3.复选框

<form>
    <input type="checkbox" name="apple" />I have a apple
    <br />
    <input type="checkbox" name="pen" />I have a pen
</form>

 9、静态资源

　　href、src和url可以请求静态资源(html、css、js、image)的路径。因此，和其它request请求一样，在后端(前后端分离)需要为其写接口。写纯socket web练习时，即使本地用到jquery等，也要为其写一个视图函数来读取。
   

本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML/CSS频道，获取更多HTML/CSS知识！