HTML基础知识&Web语义化

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

树上百灵鸟

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

阅读量473

点赞数 1

文章标签： HTML标签 web前端开发 Web语义化

本文链接：https://blog.csdn.net/bright0401/article/details/80403727

版权

1. HTML是什么？ HTML5是什么？
HTML 是用来描述网页的一种语言。

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

HTML5 是最新的 HTML 标准。
HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。
HTML5 拥有新的语义、图形以及多媒体元素。
HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。
HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。

2. HTML元素标签、属性都是什么概念？
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签。
开始和结束标签也被称为开放标签和闭合标签。

HTML 属性
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现，比如：name="value"。
属性总是在 HTML 元素的开始标签中规定。

3. 文档类型是什么概念，起什么作用？
HTML <!DOCTYPE>声明帮助浏览器正确地显示网页。
Web 世界中存在许多不同的文档。只有了解文档的类型，浏览器才能正确地显示文档。
HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。
<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。

4. meta标签都用来做什么的？
元数据（metadata）是关于数据的信息。

5. Web语义化是什么，是为了解决什么问题？
HTML的每个标签都有其特定含义（语义），Web语义化是指使用语义恰当的标签，使页面有良好的结构，页面元素有含义，能够让人和搜索引擎都容易理解。
如果可以在合适的位置使用恰当的标签，那么写出来的页面语义明确，结构清晰，搜索引擎也可以认出哪些是页面重要内容，予以较高的权值。简而言之，就是你在看到内容的时候想想用什么标签能更好的描述它，是什么就用什么标签，例如：h1~h6这几个标签在搜索引擎中权值非常高，用它们作页面标题就是一个简单的SEO优化了。
语义化的网页的好处，最主要的就是对搜索引擎友好，有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取，你网站的推广便可以省下不少的功夫。

6. 链接是什么概念，对应什么标签？
HTML 使用超级链接与网络上的另一个文档相连。
几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。
HTML 超链接（链接）
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
我们通过使用 <a> 标签在 HTML 中创建链接。
有两种使用 <a> 标签的方式：

通过使用 href 属性 - 创建指向另一个文档的链接
通过使用 name 属性 - 创建文档内的书签。

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

标签	描述
<html>与</html>	之间的文本描述网页。
<body>与</body>	之间的文本是可见的页面内容（即文档的主体）。
<h1>to<h6>	之间的文本被显示为标题。
<p>与</p>	之间的文本被显示为段落。
<br />	插入单个折行（换行）。
<hr />	创建水平线，元素可用于分隔内容。
<!---->	定义注释。
<a></a>	用来定义链接。
<em><./em>	定义着重文字。
<storng></storng>	定义加重语气。

HTML 头部元素：

标签	描述
<head></head>	定义关于文档的信息。
<title></title>	定义文档标题。
<meta />	定义关于 HTML 文档的元数据。
<style></style>	定义文档的样式信息。
<link />	定义文档与外部资源之间的关系。
<base />	定义页面上所有链接的默认地址或默认目标。
<script></script>	定义客户端脚本。

图像标签:

标签	描述
<img />	定义图像。
<map></map>	定义图像地图。
<area />	定义图像地图中的可点击区域。

HTML 分组标签:

标签	描述
<div></div>	定义文档中的节或区域（块级）。
<span></span>	定义文档中的行内的小块或区域(用来组合文档中的行内元素。)。

列表标签:

标签	描述
<ol></ol>	定义有序列表。
<ul></ul>	定义无序列表。
<li></li>	定义列表项。
<dl></dl>	定义自定义列表。
<dt></dt>	定义自定义列表项。
<dd></dd>	定义自定义描述。

表格标签：

标签	描述
<table></table>	定义表格。
<caption></caption>	定义表格标题。
<th></th>	定义表格的表头。
<tr></tr>	定义表格的行
<td></td>	定义表格的单元格
<thead></thead>	定义表格的页眉。
<tbody></tbody>	定义表格的主体。
<tfoot></tfoot>	定义表格的页脚。
<col />	定义用于表格列的属性。
<colgroup />	定义用于表格列的属性。

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

标签	描述
<form></form>	元素定义 HTML 表单。
<input />	元素根据不同的 type 属性，可以变化为多种形态。
<select></select>	元素定义下拉列表。
<option></option>	元素定义待选择的选项。
<textarea></textarea>	元素定义多行输入字段（文本域）。
<button></button>	元素定义可点击的按钮。
<datalist></datalist>	为 <input> 元素规定预定义选项列表。
<fieldset></datalist>	元素组合表单中的相关数据。
<legend></legend>	元素为 <fieldset> 元素定义标题。

form 属性：

属性	描述
accept-charset	规定在被提交表单中使用的字符集（默认：页面字符集）。
action	属性定义在提交表单时执行的动作。
method	属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）。
autocomplete	规定浏览器应该自动完成表单（默认：开启）。
enctype	规定被提交数据的编码（默认：url-encoded）。
name	规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate	规定浏览器不验证表单。
target	规定 action 属性中地址的目标（默认：_self）。

input的type 属性：

属型	描述
text	定义常规文本输入。
radio	定义单选按钮输入（选择多个选择之一）。
submit	定义提交表单数据至表单处理程序的按钮。
password	定义密码字段。
CheckBox	定义复选框。
button	定义按钮。
number	用于应该包含数字值的输入字段。
date	用于应该包含日期的输入字段。
color	用于应该包含颜色的输入字段。
range	用于应该包含一定范围内的值的输入字段。
month	允许用户选择月份和年份。
week	允许用户选择周和年。
time	允许用户选择时间（无时区）。
datetime	允许用户选择日期和时间（有时区）。
datetime-local	允许用户选择日期和时间（无时区）。
email	用于应该包含电子邮件地址的输入字段。
search	用于搜索字段（搜索字段的表现类似常规文本字段）。
tel	用于应该包含电话号码的输入字段。
url	用于应该包含 URL 地址的输入字段。

HTML Input 属性:

属性	描述
value	属性规定输入字段的初始值。
readonly	属性规定输入字段为只读（不能修改）。
disabled	属性规定输入字段是禁用的。
size	属性规定输入字段的尺寸（以字符计）。
maxlength	属性规定输入字段允许的最大长度。
autocomplete	属性规定表单或输入字段是否应该自动完成。
autofocus	则规定当页面加载时 <input> 元素应该自动获得焦点。
form	规定 <input> 元素所属的一个或多个表单。
formaction	规定当提交表单时处理该输入控件的文件的 URL。formaction 属性覆盖 <form> 元素的 action 属性。
formenctype	规定当把表单数据（form-data）提交至服务器时如何对其进行编码（仅针对 method="post" 的表单）.该属性覆盖 <form> 元素的 enctype 属性，formenctype属性适用于 type="submit" 以及 type="image"。
formmethod	formmethod 属性定义用以向 action URL 发送表单数据（form-data）的 HTTP 方法。该属性覆盖 <form> 元素的 method 属性。formmethod 属性适用于 type="submit" 以及 type="image"。
formnovlidate	该属性是布尔属性。如果设置，则规定在提交表单时不对 <input> 元素进行验证。该属性覆盖 <form> 元素的 novalidate 属性。formnovalidate 属性可用于 type="submit"。
formtarget	规定的名称或关键词指示提交表单后在何处显示接收到的响应。该属性会覆盖 <form> 元素的 target 属性。formtarget 属性可与 type="submit" 和 type="image" 使用。
height&width	规定 <input> 元素的高度和宽度。该属性仅用于 <input type="image">。注释：请始终规定图像的尺寸。如果浏览器不清楚图像尺寸，则页面会在图像加载时闪烁。
list	list属性引用的 <datalist> 元素中包含了 <input> 元素的预定义选项。
min&max	规定 <input> 元素的最小值和最大值。适用于如需输入类型：number、range、date、datetime、datetime-local、month、time 以及 week。
multiple	是布尔属性。如果设置，则规定允许用户在 <input> 元素中输入一个以上的值。该属性适用于以下输入类型：email 和 file
pattern	规定用于检查 <input> 元素值的正则表达式。适用于以下输入类型：text、search、url、tel、email、and password。
placeholder	规定用以描述输入字段预期值的提示（样本值或有关格式的简短描述）。该提示会在用户输入值之前显示在输入字段中。适用于以下输入类型：text、search、url、tel、email 以及 password。
required	是布尔属性。如果设置，则规定在提交表单之前必须填写输入字段。适用于以下输入类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file.
step	规定 <input> 元素的合法数字间隔。示例：如果 step="3"，则合法数字应该是 -3、0、3、6、等等。提示：step 属性可与 max 以及 min 属性一同使用，来创建合法值的范围。适用于以下输入类型：number、range、date、datetime、datetime-local、month、time 以及 week。

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

用在项目列表中

<ul>
  <li>香蕉Banana</li>
  <li>苹果Apple</li>
  <li>梨子Pear</li>
</ul>

<ol>
  <li>篮球Basketball</li>
  <li>足球Bootball</li>
  <li>乒乓球Pingpong</li>
</ol>

<ol>
  <li>猫科动物：
     <ul>
        <li>老虎</li>
        <li>狮子</li>
     </ul>
  </li>
</ol>

<dl>
  <dd>手机</dd>
  <dt>用来通讯的设备</dt>
  <dd>计算机</dd>
  <dt>用来处理数据的一种设备</dt>
</dl>

总结：尤其对web语义化有了新的认识，就是各种标签太多了，不容易记得住！这一课花了我好多天时间。不会到其他同学花了是一天吗？还是我的学习方法有问题呢？