HTML介绍
语义化与结构化
html的语义化就是标签的语义化， 简单讲就是我们看到html标签时， 就知道标签所包含的文本是想要表达什么样类型的信息。比如我看到<title> 知道这个标签所表达的含义是标题， 再比如我看到<image> 知道这个标签和图像有关。
html中有的标签是单词的缩写，如<p> ，<a> 等。有的单词是全写， 如<title> ， <header> 等
在一篇文章中有标题， 正文等， 因此在html也提出了结构化的概念（标题 ，段落等）。 相应的也诞生出了一些结构化的标签。比如<header> 表示头部，<nav> 表示导航栏等。
无特殊语义 <div><span>
在html中也有两个标签是没有任何含义的， 它们是<div> 和 <span> 。一个是块级元素（<div>）， 一个是内联元素(<span>) 。即使如此它们在html文档中时常见的一对组合。
文字处理基础
这一节介绍html标签中文字的一些基本处理， 用好这些标签，能是我们对文本进行简单的操作。
标题 <title> <h1> ~ <h6>
标题是一篇文章的灵魂， 从标题我们可以知道文章大概的含义， 所想表达的意思。<title> 在<head> 标签中使用，当我们打开一个网页时， 可以看到标签上有这个网页的标题。
<head>
<title>这是标题</title>
</head><h1> ~ <h6> 在文档中使用， 标题等级依次降低。
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
段落 <p>
段落是我们最常用的标签之一了。它是块级元素， 表示一段。
<p>
这是一个段落！这是一个段落！这是一个段落！
</p>列表 <ol>, <ul>
列表在列提纲时常用， 可以让我们很好的理清文章的层次结构， 叙述内容。
列表有有序列表和无序列表之分， 有序列表会在每一项前加上数字：
<ol>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ol>如下所示：
- 项目1
- 项目2
- 项目3
无序列表则没有：
<ul>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>如下所示：
- 项目1
- 项目2
- 项目3
强调 <em>, <strong>, <b>, <i>, <u>
在文本中我们想将某一段文字着重描绘以引起读者的注意，这时我们可以使用强调的标签来吸引注意力。
<em>这是<em>标签</em> <br>
<i>这是<i>标签</i><br>
<strong>这是<strong>标签</strong> <br>
<b>这是<b>便签</b><br>
<u>这是<u>标签</u><br>这是<em>标签
这是<i>标签
这是<strong>标签
这是<b>便签
这是<u>标签
这里需要注意的是<em> 和<i> ， <strong> 和<b> 。
<em> 表示着重强调内容或重读， <i> 主要用于区分文本（比如电影）。
<strong> 表示重要性， 是一个逻辑状态， 而<b> 是一个物理状态， 只是单纯的改变文本的视觉显示。
<em> 和<strong> 可以嵌套来表示更加重要。
详见： em, i, strong
超链接 <a>
当文章需要跳转到外部地址时， 就可以使用链接：
<a href="http://www.qq.com">跳转到qq</a>高级文本排版
描述列表 <dl>, <dt>, <dd>
前文讲述了无序列表和有序列表， 这里有一个描述列表可以实现和前文一样的样式。
<dl>
<dt>项目</dt>
<dd>项目1</dd>
<dd>项目2</dd>
<dd>项目3</dd>
<dt>工程</dt>
<dd>工程1</dd>
<dd>工程2</dd>
<dd>工程3</dd>
</dl>-
项目
- 项目1
- 项目2
- 项目3 工程
- 工程1
- 工程2
- 工程3
引用 <blockquote>, <q>
<blockquote> 和 <q> 都是用来引用，不同的是<q> 用来引用短的文本，也是行内引用。 而<blockquote> 常用来引用一段文本， 为块引用。
<p>
可以明显看出来引用缩进了。
<blockquote>
这是<blockquote>引用！这是<blockquote>引用！
</blockquote>
</p>下面markdown显示的引用样式， 正常的话可以明显看出来引用缩进了。
这是<blockquote>引用！这是<blockquote>引用！
<q> 是这样显示的：
<p>
可以看到有双引号。
<q>这是<q>引用！这是<q>引用！</q>
</p> 可以看到有双引号。 这是<q>引用！这是<q>引用！
缩略语 <abbr>
在文本中经常有一些组织或机构的名字让我们头疼不已， 因为这些名字太长了， 不便书写也不变记忆。 因此html诞生了<attr> 来帮助我们。 当看到<attr> 时， 就知道这表示一个简写。 以前还有一个<acronym> 表示首字母的缩写，但是现在已废弃了。
<p>
中国的简称是<attr>CN</attr></p>中国的简称是CN
<attr> 在不同的浏览器中显示为不同的样式， 有的显示为虚下划线， 有的则和普通文本一样。
联系方式 <address>
<address> 用于存放作者想要存放的联系信息， 除此之外的所有信息都不应该在标签内出现。
<address>
如果你对这篇文章有疑问， 请给我发送邮件！
我的邮件地址是：<a href="mailto:2628578405@qq.com">点我发邮件</a>
</address>如果你对这篇文章有疑问， 请给我发送邮件！
我的邮件地址是：点我发邮件
上下标 <sup>, <sub>
假如有这样的一种情况， 我们需要在一篇html文档中写入x的平方， 那么这个平方该如何输入呢？ html为我们提供了上下标来解决这种问题。
我们表示x的平方：
<p>x<sub>2</sub></p>x2
照葫芦画瓢， 下标也就能显示出来了：<p>y<sup>2</sup></p>y2
代码 <code>, <pre>, <var>, <kbd>, <samp>
it人员在写代码的时候， 可以使用代码标签来嵌入代码。这些代码通常为一下含义：
<code>: 用于标记计算机通用代码。
<pre>: 用于标记固定宽度的文本块，其中保留空格（通常是代码块）。
<var>: 用于标记具体变量名。
<kbd>: 用于标记输入电脑的键盘（或其他类型）输入。
<samp>: 用于标记计算机程序的输出。
<pre>
<code>
var para = document.querySelector('p');
para.onclick = function() {
alert('Owww, stop poking me!');
}
</code>
</pre>
<p>你不应使用表现元素 <code><font></code> 和 <code><center></code>.</p>
<p>在上面的JavaScript示例中, <var>para</var> 表示段落元素.</p>
<p>选择所有文本 <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>
<pre>$ <kbd>ping mozilla.org</kbd>
<samp>PING mozilla.org (63.245.215.20): 56 data bytes
64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>显示如下：
var para = document.querySelector('p');
para.onclick = function() {
alert('Owww, stop poking me!');
}
你不应使用表现元素 <font> 和 <center>.
在上面的JavaScript示例中, para 表示段落元素.
选择所有文本 Ctrl/Cmd + A.
$ ping mozilla.org PING mozilla.org (63.245.215.20): 56 data bytes 64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms
时间 <time>
<!-- 简单的标准时间 -->
<time datetime="2016-01-20">20 January 2016</time>
<!-- 只有年月 -->
<time datetime="2016-01">January 2016</time>
<!-- 只有月日 -->
<time datetime="01-20">20 January</time>
文档与网站结构
在一篇文档中， 好的结构即能让人伤心悦目， 也能让人快速抓住中心思想。 熟练运用下列标签可以让我们更好地掌握一篇文档。也让我们在网站布局的时候游刃有余。
头部 <header>
头部标签<header> 顾名思义就是网页的头部， 这一部分常用来当作页面的目录或者横向的导航栏， 又或者文档开头的部分。
<header>
<ul>
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
</ul>
</header>ul {
list-style-type: none;
display: positive;
}
ul > li {
margin: 0 4px;
float: left;
}显示如下：
导航栏 <nav>
前面<header> 可以制作导航栏，但是我们常用的是<nav> 标签。因为<nav> 的原型就是navigation。和<header> 对比发现， 效果一样。 但是我推荐大家用<nav> 而不是用< header> 。因为这才符合html标签语义化的思想。
<nav>
<ul>
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
</ul>
</nav>ul {
list-style-type: none;
display: positive;
}
ul > li {
margin: 0 4px;
float: left;
}主要内容 <main>
从<main> 来看其想要表达的意思就是主要的意思， 因此我们在html中常用这个标签表示主要内容。
<main>
<p>这是文档的主要内容！</p>
<p>这是文档的主要内容！</p>
</main>这是文档的主要内容！
这是文档的主要内容！
侧栏 <aside>
侧栏的应用随处可见。 它表示和其余页面内容几乎无关的部分。像广告， 友情链接等等。
<div>
<p>
这是我的网站！建立于<em>2000</em>年
</p>
<aside>
这是广告！这是广告！这是广告！这是广告！
</aside>
</div>这是我的网站！建立于2000年
<aside> 的功能可以用<iframe> 或者<div> 等元素代替。
页脚 <footer>
页脚当然是在页面的最下方， 经常放一些网站的相关信息， 国内大都有备案号。
<footer>
<p>Copyright Helloyong 京ICP备111111号-1</p>
</footer>文档 <article>
<article>元素表示文档、页面、应用或网站中的独立结构。
<article>
<header>
<h2>Helloyong</h2>
</header>
<article>
这是<article>元素！这是<article>元素！
</article>
<footer>
<p>
Posted on <time datetime="2018-03-15">Mar 15</time> by Helloyong.
</p>
</footer>
</article>显示如下：
章节 <section>
这个标签常用来表示一篇文章中的一节， 子元素中可以有标题标签来辨别。
<section>
<h1>这是标题</h1>
<p>我是段落！我是段落！</p>
</section>显示如下：
换行 <br>
换行通过<br> 来实现。
<p>这段话有点长, <br>我要换行显示</p>显示如下：
这段话有点长,
我要换行显示
水平分割线 <hr>
水平分割线为<hr> 。
<div>
<p>这是下面一个分割线！</p>
<hr>
<p>这上面是一个分割线！</p>
</div>这是下面一个分割线！
这上面是一个分割线！
多媒体嵌入
在文档中要想让我们的文章丰富多彩 ， 还可以加上图片，视频等。 这就需要用到下面的标签。
图片 <img>
<img> 标签用来插入图片。注意这个标签是自闭合的标签， 且是一个可替换元素。
<img src="https://cdn.pixabay.com/photo/2018/02/26/21/04/owl-3184032__480.jpg" alt="这是图片">显示如下：
视频和音频 <video> <audio>
在网页插入视频用<video> ：
<video src="rabbit320.webm" controls>
<p>你的浏览器不支持HTML5 vedio. 这是 <a href="rabbit320.webm">视频地址</a> instead.</p>
</video><audio> 的用法和<vedio> 的用法类似。
<audio src="xxx.mp3" controls>
<p>你的浏览器不支持HTML5 vedio. 这是 <a href="xxx.mp3">音频地址</a> instead.</p>
</audio>嵌入技术 <object><embed><iframe>
<iframe> 现在正在淘汰， 但是我们还能在一些网站看到它们的身影。我在这篇文章提到过它的用法。
至于<object><embed>， 从下面这段话（来自mdn）可以看出它们和<iframe> 的区别。
<embed>和<object>元素的功能不同于<iframe>—— 这些元素是用来嵌入多种类型的外部内容的通用嵌入工具，其中包括像Java小程序和Flash，PDF（可在浏览器中显示为一个PDF插件）这样的插件技术，甚至像视频，SVG和图像的内容！
具体使用本文不展示。
HTML 表格
HTML 表格基础 <table>, <th>, <tr>, <td>
我们可以用表格标签创建简单的表格。
<table border=1>
<tr>
<th>项目</th>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<th></th>
<td>001</td>
<td>张三</td>
<td>男</td>
</tr>
<tr>
<th></th>
<td>002</td>
<td>李四</td>
<td>女</td>
</tr>
<tr>
<th></th>
<td>003</td>
<td>王五</td>
<td>男</td>
</tr>
<tr>
<th>总计</th>
<td></td>
<td></td>
<td></td>
</tr>
</table>显示如下：
| 项目 | 学号 | 姓名 | 性别 |
|---|---|---|---|
| 001 | 张三 | 男 | |
| 002 | 李四 | 女 | |
| 003 | 王五 | 男 | |
| 总计 |
HTML 表格高级 <caption> <theader><tbody> <tfooter>
我们可以用<header>设置表格的头部， 用<tbody> 设置表格的主体， 用<tfooter> 设置表格的尾部。 当表格需要一个标签时， 我们可以用<caption> 。
<table border=1>
<caption>班级表</caption>
<theader>
<tr>
<th>项目</th>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
</tr>
</theader>
<tbody>
<tr>
<th></th>
<td>001</td>
<td>张三</td>
<td>男</td>
</tr>
<tr>
<th></th>
<td>002</td>
<td>李四</td>
<td>女</td>
</tr>
<tr>
<th></th>
<td>003</td>
<td>王五</td>
<td>男</td>
</tr>
<tr>
<th>总计</th>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>显示如下：
| 项目 | 学号 | 姓名 | 性别 |
|---|---|---|---|
| 001 | 张三 | 男 | |
| 002 | 李四 | 女 | |
| 003 | 王五 | 男 | |
| 总计 |
HTML 表单 (HTML Forms )
<form>
<form> 表单是用来提交数据用的。它有两种提交方式——GET和POST，为了数据的安全性， 我们常用的是POST提交。 因为GET方式提交会将参数追加到URL之中。
<form action="index.html" method="POST">
<input type="text" name="text" value="POST方法提交文本">
<input type="submit" value="提交">
</form>显示如下：
扫一扫
904
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
