H5语义化标签笔记库

来源：互联网发布：论文查重率软件编辑：程序博客网时间：2024/06/07 00:40

语义化

标签的用途：我们学习网页制作时，常常会听到一个词，语义化。那么什么叫做语义化呢，说的通俗点就是：明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中，在文章中有想强调的文本，就可以使用 em 标签表示强调等等。
讲了这么多语义化，但是语义化可以给我们带来什么样的好处呢？
1. 更容易被搜索引擎收录。
2. 更容易让屏幕阅读器读出网页内容。
在后面的章节会带领大家学习了解html中每个标签的语义（用途）。

标签库

<p></p>是段落标签

<html></html>称为根标签，所有的网页标签都在<html></html>中。

<head> 标签用于定义文档的头部，描述了文档的各种属性和信息，它是所有头部元素的容器。<head>    <title>...</title>    <meta>    <link>    <style>...</style>    <script>...</script></head>

<title>标签：在<title>和</title>网页标题，出现在浏览器的标题栏中。搜索引擎通过网页标题，迅速判断网页主题。

<body>...</body>网页的主体

<!--注释文字 -->

<hx>标题文本</hx> (x为1-6)可用于标题标签，另网页上的各个栏目的标题也可使用它们。

<em>需要强调的文本</em><i></i><cite></cite> 都是斜体，区别不大<strong>需要强调的文本</strong>

<span>标签是没有语义的，它的作用就是为了设置单独的样式用的。

<blockquote>的作用也是引用别人的文本。但它是对长文本的引用，且会整段缩进

xhtml1.0写法：<br />html4.01写法：<br>大家注意，现在一般使用 xhtml1.0 的版本的写法（其它标签也是），这种版本比较规范

&nbsp;

<hr/>

<address>联系地址信息</address>如：<address>文档编写：lilian 北京市西城区德外大街10号</address><address>本文的作者：<a href="mailto:lilian@imooc.com">lilian</a></address>      在浏览器上显示的样式为斜体，如果不喜欢斜体，当然可以，可以在后面的课程中使用 css 样式来修改它<address>标签的默认样式。

<code>代码语言</code> 单行<pre>语言代码段</pre><pre> 标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。

<ul>  <li>精彩少年</li>  <li>美丽突然出现</li>  <li>触动心灵的旋律</li></ul>

<ol>   <li>信息</li>   <li>信息</li>   ......</ol>

用div标签为网页划分独立的版块<div>…</div>为了使逻辑更加清晰，我们可以为这一个独立的逻辑部分设置一个名称，用id属性来为<div>提供唯一的名称，这个就像我们每个人都有一个身份证号，这个身份证号是唯一标识我们的身份的，也是必须唯一的。

创建表格的四个元素：table、tbody、tr、th、td1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。2、<tbody>…</tbody>：如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。（通俗理解table 可以按结构一块块的显示，不在等整个表格加载完后显示。）3、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。4、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。5、<th>…</th>：表格的头部的一个单元格，表格表头。6、表格中列的个数，取决于一行中数据单元格的个数。

摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。    语法：<table summary="表格简介文本">

<a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>

<a>标签在默认情况下，链接的网页是在当前浏览器窗口中打开，有时我们需要在新的浏览器窗口中打开。_blank -- 在新窗口中打开链接 _parent -- 在父窗体中打开链接 _self -- 在当前窗体打开链接,此为默认值 _top -- 在当前窗体打开链接，并替换当前的整个窗体(框架页) 一个对应的框架页的名称 -- 在对应框架页中打开

<a href="mailto:yy@imooc.com?subject=观了不起的盖茨比有感&body=你好，对此评论有些想法">对此影评有何感想，发送邮件给我邮箱地址：mailto：抄送地址：cc=密件形式抄送地址bcc=多个收件人、抄送人 ；邮件主题 subject=邮件内容 body= 后面追加的属性除了第一个是？后面都是&号追加

<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">1、src：标识图像的位置；2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；4、图像可以是GIF，PNG，JPEG格式的图像文件。

<form   method="传送方式"   action="服务器文件">讲解：1.<form> ：<form>标签是成对出现的，以<form>开始，以</form>结束。2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。3.method ： 数据传送的方式（get/post）。

text/password/textarea/radio/checkbox/submit/reset/botton

<form action="save.php" method="post" >    <label>爱好:</label>    <select>      <option value="看书">看书</option>      <option value="旅游">旅游</option>      <option value="运动">运动</option>      <option value="购物">购物</option>      <option value="Java" selected="selected">Java</option>    </select></form> <select multiple="multiple"> 进行多选时按下Ctrl键同时进行单击

label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。语法：<label for="控件id名称">注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。例子：<form>  <label for="male">男</label>  <input type="radio" name="gender" id="male" />  <br />  <label for="female">女</label>  <input type="radio" name="gender" id="female" />  <label for="email">输入你的邮箱地址</label>  <input type="email" id="email" placeholder="Enter email"></form>总结：锚一样

阅读全文

0 0