「这是我参与2022首次更文挑战的第19天，活动详情查看：2022首次更文挑战」

html认知

p2-认识网页

网页组成：文字，图片，视频，音频，超链接

网页背后本质是我们写的代码

前端代码是通过浏览器的解析和渲染成用户看到的网页。

p3-浏览器

五大浏览器：ie/edge，火狐，chrome（五色） ，safari，opera

浏览器市场份额：谷歌，60%+

渲染引擎（浏览器内核）：浏览器中专门对嗲吗进行渲染的部分。

浏览器出品的公司不同，内在的渲染引擎也不同。

相同网页在不同浏览器显示效果不完全一样。

程序员最爱浏览器：chrome浏览器。

渲染引擎不同，导致解析相同代码的速度，性能，效果也不同。

p4-web标准

用不同浏览器，展现的效果一样。

浏览器不同，内核不同，渲染引擎不同，代码解析效果不同，用户体验考虑

p5-html

超文本标记语言：hyper text markup language

html标准-语法

创建.html文件

内容放在标签对里，尖括号里

标签有开始有结束，但不是绝对的。

p6-html骨架

整个网页由html标签括起来

html=head（title+）+body=

<html>
  <head>
  	<title>网页标题</title>
  </head>
  <body>网页主体内容</body>
</html>

p7-vscode

开发工具选择：快速，方便

最流行

还有其它：webstorm，subline等

文件夹拖拽到vscode，直接打开。

命令(emmet)：快速填充

输入半角!，选择第一项回车：自动补足骨架代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

p8-html注释

只给人看的，浏览器不渲染

注释作用：说明代码作用；

注释快捷键：ctrl+/，在所在行

再按一次ctrl+/，取消注释。

格式：

p9-html标签构成和关系

标签结构：

双标签：成对出现，有始有终

单标签：不需要包裹内容，因此只要有开始标签就行了

换行
水平线

标签关系：

父子关系-嵌套关系

head和title

<head>
	<title>
  </title>
<head>

兄弟关系-并列关系

head和body

<head></head>
<body></body>

p10-标题和段落

标题标签：

场景：新闻和文章页面的标题，突出文章主题

代码：h系列标签

<h1>一级标题</h1>
    <h2>一级标题</h2>
    <h3>一级标题</h3>
    <h4>一级标题</h4>
    <h5>一级标题</h5>
    <h6>一级标题</h6>

改标签，前后都改，不需要换两次鼠标。可以先选中起始标签，ctrl+d，然后改起始标签，之后结束标签会同时修改。

语义：h1-h6，只有6级标题，1-6级标签，重要程度逐渐递减

特点：标题独占一行，文字加粗，字体大小逐渐减小。

段落标签：

场景：新闻和文章标签，用于分段显示。

代码：

段落内容

语义：段落

特点：段落间存在间隙，独占一行

vscode：查看-自动换行

p11-换行和水平标签

br强制换行，p标签里，html文件换行不会换行，chrome是一个空格。

hr是水平线

    <h1>一级标题</h1>
    <hr>
    <p>段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标，这里换行<br>
        签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签</p>

        <p>第二段</p>

p12-文本格式化标签

b-strong：加粗

u-ins：下划线

i-em：倾斜

s-del：删除线

使用html5强调语义

标签语义化：根据语义选择标签

方便人理解，机器解析，seo

使用带语义的格式化标签

前端学习笔记1-html1