记录前端学习--HTML

学习路线

先学习基础部分，即web三件套

HTML负责结构，网页想要表达的内容由html书写。
CSS负责样式，网页的美与丑由它来控制。
JS负责交互，用户和网页产生的互动由它来控制。

然后学习框架，即“大前端开发”

vue
React
angular

另外学习其他知识

浏览器
网络
webpack

HTML

超文本标记语言（HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。

<!--
 * @Author: h4m5t
 * @Date: 2021-01-21 10:11:09
 * @LastEditTime: 2021-01-21 20:23:30
-->
<!DOCTYPE html>
<html>
    <head>
        <title>第一个程序</title>
        <!--编码以及屏幕自适应-->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <meta name="keywords" content="测试">
        <!--网页自动跳转-->
        <!--<meta http-equiv="refresh" content="3;https://dydhzj.xyz">-->
    </head>
    <body>
        <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="tupian">
        <!-- 表示在新的标签页 打开页面-->
        <a href="https://dydhzj.xyz" target="_blank">这是我的博客链接</a>
    </body>
</html>

语义与呈现分离

是一句常见的熟语、一种设计哲学，同时也是在多种出版技术纪律中应用的一种方法学，涉及到信息检索、模板处理、网页设计、网页程序设计、文字处理、桌面出版、模型驱动开发等出版领域。其为关注点分离这个更加宽泛的哲学的特例。一篇文档的实际内容和意义，与这篇文档呈现给读者的方式，是相互独立的。

HTML 负责内容结构和含义，内容呈现交给 CSS

HTML语义化的优点

便于浏览器解析器解析
便于搜索引擎解析
在没有css的情况下，也以一种文档格式显式，并且是容易阅读的
结构良好，更容易将网站分块；便于阅读，开发和后期维护

1. 文档与元数据元素

元素	说明	类型
base	相对 URL 基础	元数据
body	HTML 文档内容	无
DOCTYPE	HTML 开始	无
head	HTML 文档元数据	无
html	HTML 文档 html 部分	无
link	外部链接的关系	元数据
meta	文档信息	元数据
noscript	禁用脚本	元数据、短语
script	脚本	元数据、短语
style	CSS 样式	元数据
title	文档标题	元数据

2. 文本元素

元素	说明	类型
a	超链接	短语、流
abbr	缩略语	短语
b	非强调标记文字	短语
br	换行	短语
cite	其他作品标题	短语
code	代码片段	短语
del	文字删除线	短语、流
dfn	术语定义	短语
em	强调标记	短语
i	与周边不同的文字	短语
ins	加入文档的文字	短语、流
kbd	用户输入的内容	短语
mark	标记	短语
q	引用他处的内容	短语
rp	ruby 标记括号	短语
rt	ruby 标记注音符号	短语
ruby	位于表意文字上方或者右方的注音符号	短语
s	表示内容不再准确	短语
samp	计算机输出的内容	短语
small	小号字体	短语
span	同样元素	短语
strong	重要内容	短语
sub	下标	短语
sup	上标	短语
time	时间	短语
u	非强调标记文字	短语
var	计算机中的变量	短语
wbr	安全换行的地方	短语

3. 内容

元素	说明	类型
blockquote	引用的大段内容	流
dd	dl 元素中，表示定义	无
div	通用元素，与 span 对应	流
dl	术语定义的说明列表	流
dt	dl 元素中，表示术语	无
figcaption	figure 元素的标题	无
figure	图片	流
hr	段落级别的主题转换	流
li	ul、ol、menu 元素中，表示列表项	无
ol	有序列表	流
p	段落	流
pre	格式应被保留的内容	流
ul	无序列表	流

4. 划分内容

元素	说明	类型
address	文档或者 article 的联系信息	流
article	作品信息	流
aside	周边牵涉内容	流
details	区域，展开获取细节	流
footer	尾部	流
h1-h6	标题	流
header	首部
hgroup	一组标题组织，形成目录	流
nav	导航元素	流
section	部分流
summary	details 元素中，表示该元素标题	无

5. 制表

元素	说明	类型
caption	表格标题	无
col	列	无
colgroup	一组列	无
table	表格	无
tbody	表格主体	无
td	单元格	无
tfoot	表脚	无
th	表头表脚单元格	无
thead	表头	无
tr	一行单元格	无

6. 表单

元素	说明	类型
button	按钮	短语
datalist	建议列表	流
fieldset	一组表单元素	流
form	表单	流
input	输入	短语
keygen	生成公私钥	短语
label	表单说明标签	短语
legend	fieldset 元素说明标签	无
optgroup	一组相关的 option 元素	无
option	用户选择的可选项	无
output	计算结果	短语
select	用户选择固定项	短语
textarea	多行输入	短语

7. 嵌入内容

元素	说明	类型
area	客户端分区响应区域	短语
audio	音频	无
canvas	画布	短语、流
embed	用插件嵌入内容	短语
iframe	嵌入另一个文档	短语
img	图片	短语
map	客户端分区响应	短语、流
meter	许可值范围背景中的图形表示	短语
object	生成上下文与客户端分区响应图	短语、流
param	通过 obj 元素传给插件的参数	无
progress	进度	短语
source	媒体资源	无
svg	结构化矢量内容	无
track	媒体附加轨道（如字幕）	无
video	视频	无