H5语义化标签笔记库

简介: 语义化标签的用途:我们学习网页制作时,常常会听到一个词,语义化。那么什么叫做语义化呢,说的通俗点就是:明白每个标签的用途(在什么情况下使用此标签合理)比如,网页上的文章的标题就可以用标题标签,网页上的各个栏目的栏目名称也可以使用标题标签。

语义化

标签的用途:我们学习网页制作时,常常会听到一个词,语义化。那么什么叫做语义化呢,说的通俗点就是:明白每个标签的用途(在什么情况下使用此标签合理)比如,网页上的文章的标题就可以用标题标签,网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中,在文章中有想强调的文本,就可以使用 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、td

1、<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>

总结:锚一样
相关文章
|
5月前
|
移动开发 搜索推荐 HTML5
如何使用HTML5的语义化标签来提高网站的可访问性?
【4月更文挑战第1天】如何使用HTML5的语义化标签来提高网站的可访问性?
72 1
|
3月前
|
搜索推荐 UED SEO
语义化标签有什么作用
语义化标签有什么作用
26 0
|
5月前
|
移动开发 前端开发 开发者
【专栏:HTML进阶篇】网页结构与语义化标签进阶
【4月更文挑战第30天】提升网页结构清晰度和无障碍访问性,有利于SEO。这些标签为屏幕阅读器提供额外上下文,简化CSS样式设计,避免无意义的&lt;div&gt;和&lt;span&gt;。正确使用语义化标签是现代网页开发的关键,能创造更优质、易访问和优化的Web体验。
62 0
|
5月前
|
开发框架 前端开发 搜索推荐
标题:【专栏:CSS进阶篇】CSS样式重置与框架:快速构建统一风格的网页
【4月更文挑战第30天】本文探讨了CSS样式重置和框架在确保网页跨浏览器一致性中的作用。样式重置通过消除默认样式差异实现一致外观,而CSS框架如Bootstrap提供预设样式和组件,加速开发并保证页面一致性。框架还有响应式设计和易于维护的优点,但也可能限制自定义和增加性能开销。选择使用哪种工具应根据项目需求、团队技能和设计复杂度来决定。开发者可结合使用两者以平衡灵活性和控制。
48 0
|
5月前
|
前端开发
【HTML专栏1】语法规范、基础结构标签
【HTML专栏1】语法规范、基础结构标签
50 0
|
JavaScript API
什么是语义化版本?
最近在对项目的版本号做优化,因此重新学习了一下语义化版本的知识。
99 0
|
前端开发
HTML基础教程7——表格标签和语义化标签
表格用<table>标签实现,内部主要有<tr>和<td>标签,其中表示行,表示列,属性border的值表示表格边框线的粗细,属性cellspacing的值表示内框和外框之间的距离,属性cellpadding的值表示内框的大小。
HTML基础教程7——表格标签和语义化标签
|
前端开发 搜索推荐 索引
重学前端 5 # 如何运用语义类标签来呈现Wiki网页?
重学前端 5 # 如何运用语义类标签来呈现Wiki网页?
116 0
重学前端 5 # 如何运用语义类标签来呈现Wiki网页?
|
数据采集 前端开发 开发者
标签的语义化及标题标签|学习笔记
快速学习标签的语义化及标题标签
标签的语义化及标题标签|学习笔记
|
移动开发 前端开发 HTML5
Web前端开发笔记——第二章 HTML语言 第六节 区域标签、列表标签
Web前端开发笔记——第二章 HTML语言 第六节 区域标签、列表标签
Web前端开发笔记——第二章 HTML语言 第六节 区域标签、列表标签
下一篇
无影云桌面