001.从零开始复习前端--HTML

001.从零开始复习前端–HTML

学习没有动力就可以看看招聘网站上面的薪资，可以对比其他的工作环境

安装VScode

搜索VScode官网下载，免费的但是它是外网会可能会很慢，也可以选择国内的第三方下载（不建议可能有广告）

安装插件

• 转成中文：Chinese (Simplified) (简体中文) Language Pack for Visual Studio Cod
• 不需要刷新就能更新：Live Server
• 自动修改结束标签：Auto Rename Tag

修改默认配置

• 自动保存：在VScode左上角点击文件打开自动保存
• 修改字体大小：在设置里面找到Font Size
• 自动换行：在设置里面找到Word Wrap
• 展示空格：在设置里面找到Render Whitespace
• 跳转tab缩进：在设置里面找到Tab Size
  • Tab向后缩进、shift+Tab向前缩进

HTML

MDN链接：https://developer.mozilla.org/zh-CN/docs/Web/HTML

w3school：https://www.w3school.com.cn/html/index.asp

元素的主要部分有：

1. 开始标签（Opening tag）：包含元素的名称（本例为 p），被大于号、小于号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
2. 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
3. 内容（Content）：元素的内容，本例中就是所输入的文本本身。
4. 元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。

属性应该包含：

1. 在属性与元素名称（或上一个属性，如果有超过一个属性的话）之间的空格符。
2. 属性的名称，并接上一个等号。
3. 由引号所包围的属性值。

空元素

不包含任何内容的元素称为空元素。比如 img 元素

h(1-6)标签

h标签和seo优化有关

合理的使用是可能提高网站的权重的、提高网站在搜索引擎的排名

img标签

alt属性

都知道图片加载失败显示文字要使用alt，但是不要忽略使用阅读器时也会描述alt的内容

title鼠标悬停显示文字

可能会遇到图片403问题

用 <a>、<area>、<img>、<iframe>、<script> 或者 <link> 元素上的 referrerpolicy 属性为其设置独立的请求策略，例如：

1

<img src="http://……" referrerPolicy="no-referrer">

或者直接在HTMl 页面头中通过meta 属性全局配置：

1

<meta name="referrer" content="no-referrer" />

a标签

target

• _self：当前页面加载
• _blank：新窗口打开
• _parent：父级页面打开，没有父级页面和_self效果相同（iframe嵌套）
• _top：顶级页面打开，没有父级页面和_self效果相同（iframe嵌套多级）

href

• 指定地址
• 锚点
• 下载文件（xxx.zip）
• mailto:766187397@qq.com（协议地址）

iframe标签

用于嵌入其他页面

全局属性

不仅仅属于某一个或多个标签的属性

• class：设置样式类名
• data-*：自定义数据属性
  • HTMLElement.dataset获取
  • 该名称不能以xml开头，无论这些字母是大写还是小写；
  • 该名称不能包含任何分号 (U+003A)；
  • 该名称不能包含 A 至 Z 的大写字母。
• id：唯一标识
• lang：语义化定义
• style：样式
• title：鼠标悬浮的名称

行元素块元素

行内元素: 就是在web页面布局时可以与其他元素一块共享一行的元素

块元素： 就是每一个元素,占有一行,即使自己的内容不够多也不让其他元素侵犯自己的底盘