前端入门（二）

叁歲伎倆 2022-05-16 08:00 132阅读 0赞

# 前言 #

许久未更新了，今天七夕，为了逃避现实，重启博客。  
本博客主要记录一些前端学习中的入门级问题。

--------------------

## Q1：HTML标签、元素、属性都是什么概念？ ##

A1:  
HTML标签：HTML标签标记了HTML文档和HTML元素，HTML标签由开始标签和结束标签组成.  
开始标签为尖括号包围的元素名,结束标签为尖括号包围的斜杠和元素名。  
例如:`<h2> My First Heading</h2>`

HTML元素：HTML文档是由html元素定义的.  
HTML的元素是指从开始标签到结束标签的所有代码..例如:`<p>我是一个段落</p>`表示一个html元素.  
可以看出,html元素主要包括html标签和纯文本.标签定义网页显示的格式,文本表示网页的内容.  
故此,网页 = html文档,而html文档则是由html元素定义的.

HTML属性：  
HTML属性为HTML元素提供附件信息,例如在超链接标签`<a href = “https://inspurer.github.io>月小水长的个人博客</a>`  
使用了href属性来指定超链接的地址.  
属性总是以名称/值的形式出现,例如:name = “value”  
属性总是在开始标签中定义.

--------------------

## Q2：meta标签都用来做什么的？ ##

A2： 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。  
标签位于文档的头部，不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。

--------------------

## Q3： Web语义化是什么，是为了解决什么问题？ ##

A3:  
简言之，web语义化的目的是提高计算机和人对web代码的可读性。

网上的解释很多，个人总结分三个阶段比较容易理解。  
1、原始的一些有实际含义的标签定义。浏览器和W3C组织推出的如h1~h6、thead、ul、ol  
的HTML标签用于在Web页面中组织对应的内容，如网页标题、表头、无序、有序列表，  
以达到更方便的协作及传播互联网内容的目的。搜索引擎很好的利用了这些语义化标签抓取  
内容，又鉴于搜索引擎的巨大流量推荐，Web前端不得不考虑SEO，从而两者实现有益的  
循环，共同推进着语义化标签的使用。

2、前端开发人员自定义的标签。但Web的发展超乎想象，起初定义的HTML语义化标签，  
不足以实现对Web页面各个部分的功能或位置描述，所以Web前端人员利用HTML标签的  
id和class属性，进一步对HTML标签进行描述，如对页脚HTML标签添加如id=”footer  
“或者class=”footer”的属性（值），以“无声”的方式 在不同的前端程序员或者  
前后端程序员间实现交流。

3、在第二步的推动下结合新技术出现的一些标签。W3C组织意识到了之前HTML版本的不足，  
推出的HTML5进一步推进了Web语义化发展，采用了诸如footer、section等语义化标签，  
弥补了采用id=”footer”或者class=”footer”形式的不足，以更好的推动Web的发展。  
正所谓：世上本没有路，走的人多了，也便成了路。

--------------------

## Q4: 表单标签都有哪些，对应着什么功能，都有哪些属性? ##

A4: 还是W3School的这篇教程经典：[HTML表单标签之input][HTML_input]

--------------------

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

A5:

1.无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。  
无序列表始于 `<ul>`标签。每个列表项始于 `<li>`。  
示例代码如下：  
`<ul> <li>Apple</li> <li>Orange</li> </ul>`  
浏览器显示如下  
![这里写图片描述][70]  
2.有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。  
有序列表始于 `<ol>`标签。每个列表项始于`<li>` 标签。  
示例代码如下：  
`<ol> <li>Apple</li> <li>Orange</li> </ol>`  
浏览器显示如下：  
![这里写图片描述][70 1]

3.定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。  
自定义列表以 `<dl>`标签开始。每个自定义列表项以 `<dt>` 开始。  
每个自定义列表项的定义以`<dd>` 开始。  
![DLDdGKN.jpg][]

[HTML_input]: http://www.w3school.com.cn/html/html_form_input_types.asp
[70]: /images/20220516/f4e932dc32db4c1db004a30de971906b.png
[70 1]: /images/20220516/f9fab4ceb445481b9e8be3102dc085b3.png
[DLDdGKN.jpg]: https://i.imgur.com/DLDdGKN.jpg