Web语义化

最新推荐文章于 2022-01-26 17:52:26 发布

Yuewting

最新推荐文章于 2022-01-26 17:52:26 发布

阅读量373

点赞数

文章标签： 2018百度前端学院

本文链接：https://blog.csdn.net/Yuewting/article/details/80099816

版权

每天增加一点新知识，对前端多一点新认识

Web语义化

浏览器和W3C组织推出的如h1~h6、ul、ol的HTML标签，用于在Web页面中组织对应的内容，如网页标题、无序、有序列表，以达到更方便的协作及传播互联网内容。搜索引擎很好的利用了这些语义化标签抓取内容，又鉴于搜索引擎的巨大流量推荐，Web前端不得不考虑SEO，从而两者实现有益的循环，共同推进着语义化标签的使用。
但Web的发展超乎想象，起初定义的HTML语义化标签，不足以实现对Web页面各个部分的功能或位置描述，所以Web前端人员利用HTML标签的id和class属性，进一步对HTML标签进行描述，如对页脚HTML标签添加如id="footer"或者class="footer"的属性（值），以“无声”的方式在不同的前端程序员或者前后端程序员间实现交流。
W3C组织意识到了之前HTML版本的不足，推出的HTML5进一步推进了Web语义化发展，采用了诸如footer、section等语义化标签，弥补了采用id="footer"或者class="footer"形式的不足，以更好的推动Web的发展。

简单概括就是：

起初的想法：用来发布 Web 内容和资源的索引，方便人们查看。
但是随着 Web 规模的不断扩大，信息量之大已经不在人肉处理的范围之内了。这个时候人们开始用机器来处理 Web 上发布的各种内容，搜索引擎就诞生了。
再后来，人们又设计了各种智能程序来对索引好的内容作各种处理和挖掘。所以让机器能够更好地读懂 Web 上发布的各种内容就变得越来越重要。

(截取部分知乎)

编写在线简历

   之前用word写过一份简历，但是没有想过把它用html语言编写出来，感觉百度里给的任务都很好，既能熟悉一下html标签和css样式，还是考虑一下自己的简历格式和内容，可谓是一举两得，我所编写的简历是根据用word写出来的，较为简洁明了，css用的不是很多。

验证

1. HTML是什么，HTML5是什么？

HTML：HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言 (Hyper Text Markup Language)；HTML 不是一种编程语言，而是一种标记语言 (markup language)；标记语言是一套标记标签 (markup tag)；HTML 使用标记标签来描述网页。
HTML5：

2. HTML元素标签、属性都是什么概念？

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

3. 文档类型是什么概念，起什么作用？

HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面
内容：
<html>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
例子解释
<html> 与 </html> 之间的文本描述网页
<body> 与 </body> 之间的文本是可见的页面内容
<h1> 与 </h1> 之间的文本被显示为标题
<p> 与 </p> 之间的文本被显示为段落

4. meta标签都用来做什么的？

本身并不是很熟悉，所以搜了一下
<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
**<meta> 标签位于文档的头部**，不包含任何内容。
列如：<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

5. Web语义化是什么，是为了解决什么问题

详见第一部分。我认为是为了解决人和机器（搜索引擎）更好的读懂在web上发布的各式各样的信息。

6. 链接是什么概念，对应什么标签？

指在互联网作用下由一个地方链接跳转到另一个地方、由一个页面链接跳转到另一个页面。

7. 常用标签都有哪些，都适合用在什么场景

<html></html> 创建一个HTML文档
<head></head> 设置文档标题和其它在网页中不显示的信息
<title></title> 设置文档的标题
<h1></h1> 最大的标题
<p></p> 创建一个段落
<br> 换行插入换行符
<dl></dl> 定义列表
<dt> 放在每个定义术语词前
<dd> 放在每个定义之前
<ol></ol> 创建一个标有数字的列表
<ul></ul> 创建一个标有圆点的列表　　
<div align=""></div> 用来排版大块HTML段落,也用于格式化表
<a href="URL"></a> 创建超文本链接

8. 表单标签都有哪些，对应着什么功能，都有哪些属性

<form> 标签用于为用户输入创建 HTML 表单。
表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。
表单用于向服务器传输数据。
<menu> 标签定义命令的列表或菜单。
<textarea> 标签定义多行的文本输入控件。
fieldset 元素可将表单内的相关元素分组。

9. ol, ul, li, dl, dd, dt等这些标签都适合用在什么地方，举个例子

比较适宜于需要罗列出一条一条的例子时，使用这些标签。
<li> 标签定义列表项目。
<li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中。
<ol> 标签定义有序列表。
<ul> 标签定义无序列表。
<dl> 标签定义了定义列表（definition list）。
<dl> 标签用于结合 <dt> （定义列表中的项目）和 <dd> （描述列表中的项目）。