HTML记录-CSDN博客

认为此文比较空洞，是因为博客的撰写者，也就是我，对这一块的认识是显得浅薄的，用来作为如教程、复习总结之流是难堪大任的，故针对于已经有丰厚HTML基础而想要获得更加全面且系统认识的人（我得称之为大佬），此文是毫无意义乃至于显得丑态百出；但我想，像我一般对于HTML了解不多的兄弟，还是有那么一点儿可能从中获得一些新的见解，或是复习一次。

可以简略介绍一些会涉及哪些内容吗？这样也能避免浪费读者时间。

当然，出于复习的目的，博客需要尽可能地覆盖html相关知识，但我对于过于理论地东西不太感冒，所以有关HTML地发展历史，以及各版本的特性将不会出现在文章内容中，读者能够了解到的内容将有：见目录【狗头保命】。

针对阅读内容有什么注意点吗？

考虑到我的写作能力有点烂，总是喜欢使用括号去补充一些内容，但补充目的还是存在差异的，下文中

()表示同位解释，就是另一种叫法
【】表示内容说明，担心表达得不够明确，特别加一点解释

开始

简单认识HTML

HTML是创建网页的标准标记语言，注意它是一种标记语言，不是编程语言。

全称是Hyper Text Markup Language(超文本标记语言)，作用是定义网页内容的含义和结构。结构很容易理解，在使用过程中也比较直观，但含义(语义)初看简单，可是一用起来常常会在不经意间忽略掉【事实上是因为一段内容会出现难以定性的情况，然后想来想去就不搞了】。

html元素的基本结构是<标签名> .... </标签名>，对于一个元素而言，总是希望是封闭的，怎么封闭？没错就是/这玩意儿，也可以把它叫做结束标志。像基本结构那样的元素显然可知</标签名>部分就是用来封闭的（结束标签），注意这是必须要有的。但还有一些只有一个部分的元素（empty element / 自闭合标签），比如<hr>，为了封闭应该写成<hr/>, 实际上<hr>也能用，但还是推荐写成封闭形式。

实际上标签名是忽略大小写的，但似乎统一都写成小写。【嗯，见到的都是...】

使用HTML定义网页，常见的结构应该都是这样的

<!DOCTYPE html> <!-- 声明这是HTML文件， 主要是相对xml而言的 -->
<html>
    <head>
        <!-- 网页基本信息， 像什么标题、内容简介、关键词、编码等等都是定义在这儿的 -->
    </head>
    <body>
        <!-- 这部分内容才是展示部分 -->
        <!-- 但是网页标题和logo【显示在浏览器tab部分】是定义在head部分的 !impotant -->
    </body>
</html>

对了，是注释，不会被渲染/使用的。

OK,认识到此告一段落。接下来就可以开始介绍常见的HTML元素了。

HTML 元素

元素结构在前面已经提过了，由开始标签+内容+结束标签组成，像<hr/>这种没有内容部分的元素姑且叫做空元素吧【好像在哪见过...】

可以粗略的讲，一个HTML网页就是由元素组成的，因此，元素理所当然是支持嵌套的(nested)。也就是这样

<div>
    ... 
    <div>
        ...
      <span>....</span>  
        ...
    </div>
    ..
</div>

当然，还能更加复杂。注意：要封闭【加上结束标签】。

但是，要描绘含有如此丰富信息的网页，只是标签远远不够，还需要属性(attribute)帮忙，这是个什么东西？我也不太清楚，但需要知道的是怎么去写它：

<a href="https:www.bilibili.com">通往B站</a>
<!-- 没错, href="...." 就是给 a 元素补充的属性， 一般也是必写的属性-->

一个元素能写的肯定不止一个属性，关于这个你看完全文之后一定认同。但也不是非要写属性部分，属性是为了补充标签所欠缺的内容，比如上面这个例子，它定义了一个超链接，如果不写href内容，那么a元素就不知道链接到哪，【如果你真的不知道链向哪，不妨写成href="#"】

好了，进入下一部分，段落与标题。

段落与标题元素

对于咱们，作文可以说是非常熟悉，一篇作文总是得有标题和内容的嘛，总不能想着拿完标题的5分就跑，自然也不能不要标题的5分是吧。好了，进入正题：

标题元素是指h1, h2, h3, h4, h5, h6这6个玩意儿，你说还有没有h7?答案很明确，不要想了。理由是: 每个h#都是自带了样式的(有自己的特点)，从1 到 6，标题的文字会依次变小，默认的大小应该是这样的：

标题	大小
h1	2em【通常HTML的 1em=16px 】
h2	1.5em
h3	1.17em
h4	1em
h5	0.83em
h6	0.63em

此外，它们都是加粗的。实际上，还自带了其他默认的样式，如margin，但这些就交给CSS来说明吧。

段落元素就特指p标签了，感觉没什么好提的，需要注意的是不同的段记得使用多个p标签，意思是这样

<p>
    段落一
</p>
<p>
    段落二
</p>
....

为什么这样啊？因为在HTML中是不认\n、\r来换行的，所以就不要想着一股脑儿丢一个p里了。

那我需要换行怎么办？对于整个页面，可以使用<br/>专为换行而生的元素。特别情况，也许可以考虑加一个块级元素【这个概念后面再说】。

常用的文本元素

文本可是太常见的东西了，所以就不说文本的定义了【实际上是我不懂】。

这里主要考虑到部分文本需要特别的含义比如上下标、非常重要等等。以下是一点点相关的元素【完整的可以去MDN看看, 事关语义化，还是多看看？】

元素	作用
b	文本加粗, 效果看这
strong	重要文本，稍微加粗效果看这
i	文本倾斜，常用于 icon 效果看这
em	强调，文本倾斜效果看这
cite	表示引用,文本倾斜，效果看这
mark	标记，文本高亮效果看这
small	文本要小一些效果看这
del	删除的内容，表现为文字中间有一条线效果看这
ins	插入，文本有下划线效果看这
sub/sup	下标/上标效果看这下标上标
abbr	专业名称缩写,鼠标悬浮会显示title属性值, 效果看这WTO
.....

链接元素

HTML中的H意思是超级，所以HTML中的链接当然是超链接【有点强词了】

链接元素就是a元素，前面已经见过了。需要知道的不多，它有两个很重要的属性: href和target，前者指定链接地址，后者指定点击后链接内容的呈现方式，默认值是_self,其他常见的有_blank, _parent, _top，具体效果就不多说了，想知道的可以搜搜。

根据其链接的对象，可以进行一个划分：

外部标签: 链接外部网页
内部链接：链接同网站的其它页面
空连接：不确定连接目标，形式是<a href="#"></a>【很眼熟，对不对】
下载链接：链接一个文件/压缩包，点击即download
网页元素链接：连接对象是文本/超文本元素，如音视频
锚点链接：快速定位本页面内的某个位置，这需要设置id【额，是目标元素的id】

一个有趣的点：链接元素在点击前后颜色是不同的。

图片元素

最基本的就是img元素，它常用的属性有src, alt, width, height,具体含义如下

属性	作用
src	指定图片资源地址
alt	当图片加载失败时，提供的解释信息
width	图片宽度
height	图片高度

注意，虽然图片高度和宽度能同时设置，但推荐只给定一个，不然图片就会出现拉伸走样。

一个有点特别的属性usemap, 这个属性要搭配map元素使用，其值为对应map元素的name属性值。

map是用来定义图像地图的，也就是在同一个图片上的不同区域弄点不同的东西，怎么弄？需要定义area元素，具体使用就不多说了。【可以看看MDN】

还可以使用picture添加图片，它可以包含多个source元素，从而实现根据不同的设备【满足不同的media值】显示不同的图片。

此外，还常用CSS样式中的background-image来添加图片显示【感觉这比img好用】

网页favicon与标题

网页的favicon通常是一张小图片，可以使用ico, png, gif, jpg/hpeg, svg等格式的图片，怎么设置？如下

...
<head>
    <link rel="icon" type="image/x-icon" href="图片地址">
</head>
...

标题的设置方式和favicon很像，如下

...
<head>
    <title>网页标题</title>
</head>
...

表格元素

什么是表格？不知道。但我知道它是按照行和列组织数据的，这一点可以用来布局【不太推荐】。

直接点，你可以这样使用它

<table>
    <caption>表格名</caption> <!-- for the entire table.-->
    <tr> <!-- table row-->
        <th>列标题一</th> <!--table header-->
        <th>列标题二</th>
    </tr>
    <tr>
        <td>格子1-1</td> <!-- table data-->
        <td>格子1-2</td>
    </tr>
    <tr>
        <td>格子2-1</td>
        <td>格子2-2</td>
    </tr>
</table>

没错, table就是表格元素的头头，里面还有细分的元素/标签。

除了上面出现的元素，还有：thead, tbody, tfoot等元素，它们的含义应该是不言而喻了。【从语义角度还是挺需要它们的】

但是colgroup 和 col两个元素就值得注意一下了，首先它俩是用来统一设定一组列属性的，比如width, visibility, background, boder等，并且在位置上需要满足：

col被包裹在colgroup中
colgroup则需要被包裹在table中，并且只位于caption元素之后【应该是这样的】

列表元素

列表分成三种：ul, ol, dl(无序列表，有序列表，自定义列表)。与之相匹配的列表元素可见下面代码

<!-- 无序列表 -->
<ul>
    ...
    <li></li>
    <li></li>
    ...
</ul>
<!-- 有序列表 -->
<ol>
    ...
    <li></li>
    <li></li>
    ...
</ol>
<!-- 自定义列表-->
<dl>
    <dt></dt> <!-- title(标题) -->
    <dd></dd> <!-- description(描述) --->
</dl>

涉及到的元素通常就这些，但是它们是支持嵌套的【额，元素应该都支持嵌套】，如此便灵活了起来。

块级与行内元素

这个部分很重要，直接关乎着布局效果【但是CSS可以修改】。

HTML中的元素一般可以划分为块级元素, 行内元素, 行内块级元素三类。

块级元素在网页布局中将独自占据一行/多行【也就是说它所在的位置，同行内不存在其它元素，有点霸道】

行内元素以及行内块级元素则都可以共存一行【不强制换行】，但是行内元素通常把内容的宽高作为自己的宽高，改不了。那实在是想改呢？可以把它转换成行内块级元素，这样所有宽高，padding，margin就可控了。【如果再霸道点也能接受，也可以转换成块级元素】，关于怎么转？怎么设置？就是CSS部分了。

常见的块级元素、行内元素可以去其他地方找找。

class与id属性

这两个是用来选择元素的，主要用于CSS和JavaScript中，但单纯的HTML中也会用到，比如SVG中路径指定，锚点链接【这俩都是用id的】

class属性用来标记一类元素，也就是可以重复赋予给多个元素，当然选择时它们就都会被逮到，除非还有其它筛选条件。

可id属性就不同了，在一个HTML页面中得是唯一的，【不是说id只能用一次，是id的值不能重复用】，自然在选择元素时就能更轻松地精准定位某一个元素了。

注意，赋值的时候，别用数字开头！！！

iframe元素

iframe是内联框架元素，它能够把另一个HTML页面嵌入到当前页面中，具体的显示效果就与定义的属性有关了，比如宽度、高度...

另一个HTML页面的地址通过设置src属性指定，也就是这样

<iframe src="www.baidu.com" title="baidu" width="200" height="120" style="..."></iframe>
<!-- 也可以使用CSS设置样式 -->

另外它和a还有一个联动，可以通过设置a元素的target属性值实现把a指向的网页在iframe中显示，值关系是：a的target值等于iframe的name值，比如

<iframe src="https://www.baidu.com" name="iframe_box" title="baidu or bilibili"></iframe>
<a href="https://www.bilibili.com" target="iframe_box"> bilibili </a>

简单了解head

head部分除了title, favicon一般是不可见的【针对网页浏览者】，通常会在这儿定义这些元素：

meta -- 指定网页信息，比如使用的字符集，网页关键词、网页描述等等
link -- 定义当前页面与外部文件的关联，比如CSS文件、网页favicon
base -- 指定网页的基准路由
title -- 定义网页标题
style -- 内嵌的样式属性标签【在此元素内可以写CSS来定义网页样式】
script -- 内嵌的JavaScript标签，作用类似style

感觉内容有点单薄。。。弄点关于meta的代码凑凑数

<!--specify the character set-->
<meta charset="UTF-8"> 

<!--specify the keywords for search engine-->
<meta name="keywords" content="html, css, javascript... learning">

<!--define a description for the page-->
<meta name="description" content="the marks for learning pre-end">

<!--specify the author of a page-->
<meta name="author" content="wangxiaosheng">

<!--refresh document every 30 seconds-->
<meta http-equiv="refresh" content="30">

<!--
set the viewport for different devices
the width=device-width sets the width of the page to follow the screen-width of devices
the initial-scale=1.0 set the initial zoom level when the page is firstly loaded.
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

布局元素

回顾前文 HTML是用来定义网页内容的含义和结构，布局可是结构的重要一环。有这样一群元素，常常干着这项工作。他们是

header -- 用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。
nav -- 在当前文档或其他文档中提供导航链接
section -- HTML 文档中一个通用独立章节
article -- 表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构
aside -- 表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响
footer -- 通常包含有关该部分作者、版权数据或相关文档链接的信息
details -- 可创建一个组件，仅在被切换成展开状态时，它才会显示内含的信息。summary 元素可为该部件提供概要或者标签。
summary -- 指定了 details 元素展开盒子的内容的摘要，标题或图例
......

是不是感觉用语专业了很多？没错，是我窃来的。

可以看到不同的布局元素有着不同的含义，自然也可能带着默认的样式，如果你觉得这点不好，可以使用CSS去改掉，当然，使用div去替换所有也勉强是可行，可那样就失去了语义化的特点了【嗯，不推荐，尽管我是这样的】

语义化实际上涉及到的元素更多，比如figure, time等。就不多讲了【唉，我也不太懂】

引用与代码元素

关于引用，如果是块引用，可以使用blockquote, 一段较短的文字使用q，而若是文学作品、电影等的名字，不妨使用cite。

对了，遇到专业名称缩写可以使用abbr，记得使用title属性给出全称。

有关计算机的几个元素【大概不止这几个】，

code -- 程序代码
kbd -- 键盘输入
samp -- 输出结果
var -- 变量

注意，HTML是标记语言，不是编程语言，所以上面只是语义是这样，不会运行计算的。

如果你此时写了一些HTML,可能会发现code怎么不能换行啊，严重影响代码风格！！但这就对了，毕竟HTML是不认\n,\r换行的，要保留换行/空格，记得使用pre元素。

实体符号

HTML是支持特殊字符的，当然这和你设置的<meta charset="字符集">有关，但往往都是给定的UTF-8,所以无需多虑能不能用了。怎么用？给一个简单的例子，相信就能举一反三啦【希望如此】

&lt; <!-- 对应 <= -->
&#60; <!-- 糟糕，忘了对应值，也许可以去查查 -->
o&#769; <!-- 这我知道，对应值是 ó -->

具体的实体符号对应的值就不给了，【我也要去查一查】。

表单元素

别看晃眼了，即将到来的是表单元素。

表单的东西是真多，这里就简单介绍一下了，但不要太担心，毕竟常用的也就这些。

关于表单元素form的几大属性【form是表单的最外层元素】,

action -- 指定了表单将要送往何处，一般是服务器的相应接口。
target -- 有点类似与a的target属性，指定表单提交后的响应该在哪儿展示
method -- 表单提交方式，对此往往想到使用post方式，但是默认值是get【有点小惊喜】，但还是建议使用post
autocomplete -- 决定是否以历史值自动填充
novalidate -- 决定表单元素提交时不进行校验，【感觉挺少用的，也不一定】
还有很多，想知道？去翻翻参考文档吧【带我一起~~】

内部更为具体一点的表单元素，比如input

input -- 表单最最最常用的输入元素，可以指定它的type, 常用的类型有text, password, email......

label -- 这是个好东西，可以实现快速聚焦表单元素，【啥叫聚焦？就是鼠标/光标定位到目标身上】

具体方式如下

<form>
    ...
    <label for="target-input-id">瞄准目标</label>
    <br />
    <input name="target-input-id" id="qiguai-zh"/> <!-- 这是目标吗？额，不是 -->
    <input id="target-input-id" name="buqiguai-zh" /> <!-- 这才是目标, 点击label 也可聚焦此处 -->
    ...
</form>

select -- 下拉选择框，搭配option, optgroup使用
- option -- 一个朴实无华的选项
- optgroup -- 将那些朴实无华的选项划分为一些小团体（分组）
textarea -- 多行文本输入框，可以通过设置cols,rows简单的控制大小，但主要还是靠css控制大小。很少见的，它可以调整大小，但有时候不想它被调整【感觉不太会有这种需求】，可以使用resize 去改变这点。
button -- 按钮，同样使用type属性去设置类型，一般是submit, reset, button之一
fieldset -- 将form中的元素进行分组处理【都得给我抱团】, 这是非必要的(几乎用不上)
legend -- 属于fieldset的标题

datalist -- 给一个input预先定义一些值, 比如

<form>
    ...
    <input list="browsers"/>
    <datalist id="browsers">
        <option value="safari"/>
        <option value="edge" />
        ...
    </datalist>
    ...
</form>

output -- 展示一个计算结果，比如下面的例子【有点amazing】

<form οninput="x.value=parseInt(a.value) + parseInt(b.value)">
    <input type="range" id="a" name="a" value="50" />
    <input type="number" id="b" name="b" value="50" />
    <output name="x" for="a b"></ouput> <!-- 结果是 a的值 + b的值 -->
    <!--the above seems to be amazing.-->
</form>

接下来补充一点点关于input的东西

input的常见类型: button, checkbox, color, date, datetime-local, email, file, hidden, image, number, month, password, range, radio, reset, search, submit, tel, text, time, url, week.....

input常见属性: value, readonly, disabled, size, maxlength, min, max, mulptiple, pattern, placeholder, required, step, autofocus, height, width, list, autocomplete... 【部分属性需要特定的type才有效】