原稿：语雀 · HTML · 原目录：HTML

HTML元素

元素分类

html中每个元素默认分为三类：块级block、行内inline、行内块inline-block

分类

特征

block

  • 构成块，单独出现在一行
  • 盒宽度默认为父元素 100% 宽度，设置 margin 和 padding 都生效
  • 代表：div、p、h1~h6、ul、ol、li、table、blockquote

inline

  • 内联元素，通常被嵌套在块元素中，不会导致换行
  • width、height 无意义，实际宽高取决于内容
  • margin 在垂直方向上不生效
  • padding 在垂直方向效果生效（设置背景色会显示），但是实际上没有撑开父元素，不会影响周围元素布局（见链接）
  • 代表：span、a、strong、b、i、textarea

inline-block

  • 元素不会切换新行，但可以设置 width、height
  • 盒宽度默认为内容宽度，设置 margin 和 padding 都生效
  • 代表：input、button

<!DOCTYPE>

<!DOCTYPE> 声明用来告知浏览器的解析器用什么文档标准解析文档，必须在HTML文档的第一行，html5标准只有一种声明-<!DOCTYPE html>

<head> 与 metadata

<head>元素保存了页面相关的元数据（尽管<meta>中的内容也是元数据）

  • <title>：页面标题，通常在页面作为标签页、收藏内容时显示
  • <meta>：添加元数据，常用见👇

语雀引用内容

  • <link>：添加favicons、css
  • <script>：引入js，但这样所有的js代码下载-解析-解释完成后网页才会渲染（即加载<body>），期间可能出现长时间页面空白，因此现在通常把<script>放在<body>后

语义化

语义化是指使用恰当语义的html标签，让页面具有良好的结构与含义，比如<p>标签就代表段落，<article>代表正文内容等等，好处是

  • 开发者友好：使用语义类标签增强了可读性，开发者也能够清晰地看出网页的结构，也更为便于团队的开发和维护
  • 机器友好：带有语义的文字表现力丰富，更适合搜索引擎的爬虫爬取有效信息（见下面的SEO），语义类还可以支持读屏软件，根据文章可以自动生成目录

常见的语义标签

结构体

文本

一致

下面是h5中新增的切片/区段标签

  • header
  • h1
  • h2
  • h3
  • nav
  • footer
  • article
  • section
  • p
  • ul
  • ol
  • li
  • blockquote
  • a
  • strong
  • em
  • q
  • abbr
  • small
HTML 配图

SEO

参考链接：基于html的SEO

SEO指搜索引擎优化，据百度的官方说法，相关性是排名的重要维度，前端布局或者说页面模型是相关性的重要组成部分，也就是说前端，包括关键词布局，内链调用机制，页面模型这几个点影响相关性，相关性影响排名，排名就是seo的基本目标

SEO最常用的HTML标签 

  2. H1-H6标签
  4. <b>、<strong>强调关键词
  6. <a href="网址" title="链接说明">网页信息</a> ，对于网页中非常重要的链接采用TITLE说明，有助于帮助搜索引擎找到网页的重点URL
  8. Alt标签<img src="XXX.jpg" alt="图片说明">，在网页中重点图片(大多数情况下是和网站突出目标关键词相关的图片)使用ALT标识，这样对搜索引擎爬行网页重要图片很有帮助，对于提高网站关键词权重也会很有好处的

HTML不同标签在SEO优化中的权重分数

  • 内部链接：10分（<a name="A"/> < a href ="#A"></a>）
  • 页面标题title：10分
  • 域名：7分
  • H1，H2字号标题：5分
  • 每段首句：5分
  • 路径或文件名：4分
  • 相似度（关键词堆积）：4分
  • 每句开头：1.5分
  • 加粗或斜体：1分
  • 文本用法（内容）：1分
  • title属性：1分 （注意不是<title>， 是title属性）
  • alt标记：0.5分
  • Meta描述（Description属性）：0.5分
  • Meta关键词（Keywords属性）：0.05分

src 与 href

在 html 引入多媒体内容、<scirpt>标签时使用src，如<img src="" width=“200” height=“140”/>；而在建立超链接时需要使用<a href=""></a> 或 <link href=“default.css” rel=“stylesheet” >

  • src 指向外部资源的位置，指向的内容会嵌入到文档中当前标签所在的位置，在请求src资源时会将其指向的资源下载并应用到文档内替换当前元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕
  • href 是指向网络资源所在位置（的超链接），只是用来建立和当前元素或文档之间的连接

小结：src 用于替换当前元素，href 用于在当前文档和引用资源之间确立联系

<a> 标签作用

参考链接：< a>，< img/>标签使用及锚点，路径相关 2. 超链接

<a> 标签定义超链接，用于从一张页面链接到另一张页面。可通过 target 规定在何处打开链接文档

  • _self：默认，目标地址在当前选项卡打开，替换当前页面
  • _blank：目标地址在新的选项卡打开
<a target="_blank" href="http://www.baidu.com/">百度</a>
  1. 设置锚点（页内链接）

点击锚标签后可以迅速跳转到页内或其他页面指定位置

# 当前页
<h2 id="center">本页面的h2标题</h2>
<a href="#center">跳转到本页面的h2标题处</a>

# 其他页
<h2 id="end">123.html页面的h2标题</h2>
<a href="123.html#end" target="_blank">跳转到123.html页面的h2标题处</a>

前端渲染 & 后端渲染

后端渲染（SSR） 2. 浏览器向后端请求页面 4. 后端服务器会计算所需的业务数据后将结果填充在页面的对应区域，再将页面响应给前端 6. 前端直接对收到的 html 进行解析其中已经包含页面的样式，也包含完整的数据信息

优点：首屏加载时间短、利于 SEO

缺点：前后端耦合，不利于开发维护；加大服务端压力

前端渲染（SPA） 2. 浏览器向后端请求页面 4. 后端响应一个静态的 html 页面，不对页面进行业务数据的拼接，该 html 上有 js 脚本 6. 浏览器下载、解析、执行 js 文件，通过操作 dom 对 html 内容进行填充修改

优点：可维护性高、用户体验好（首屏加载后的路由都由前端实现）

目前的 SPA 应用不再是一个页面，本质是一个集路由、数据、页面（组件）为一体的程序，在首次请求经服务端获取整个应用后，接下来的路由都由前端控制，前端以路由为中心枢纽控制一系列页面（组件）的渲染加载和数据交互

缺点： 2. 首屏加载时间长，需要等待 js 加载完毕才能看到页面 4. 不利于 SEO，搜索引擎爬取 html 文件时，只能看到基本的骨架和资源路径，没有办法取得 html 内容