关于前端:jsliang-求职系列-39-HTML-系列总结

不折腾的前端，和咸鱼有什么区别

目录
一目录
二 HTML5 标签
三构造语义化
3.1 为什么须要语义化
3.2 构造语义化
3.3 头部
3.4 次要内容
3.5 页脚
四层级关系
五替换元素和不可替换元素
5.1 替换元素
5.2 不可替换元素
六行内元素和块级元素
6.1 常见块级元素
6.2 常见行内元素
6.3 行内元素和块级元素转换
七参考文献

常见的 HTML5 标签有：

<section> – 章节
<nav> – 导航
<article> – 残缺独立内容块
<aside> – 和页面内容关联度较低的内容：例如广告（残余的）
<header> – 页面或者文章头部
<footer> – 页面或者文字尾部
<main> – 文档次要内容
<figure> – 一个和文档无关的图例
<figcaption> – 图例阐明
<mark> – 须要被高亮的援用文字
<video> – 视频
<audio> – 音频
<source> – 为 video 和 audio 指定 媒体源
<track> – 为 video 和 audio 指定 文本轨道 （字幕）
<canvas> – 位图区域
<svg> – 矢量图
<progress> – 进度条
<meter> – 滑动条

HTML 有个光彩的工作：

在没有 CSS 的状况下，可能清晰的、有构造地表述这个页面的内容。

所以，构建一个页面构造，须要充分考虑到语义化。

易批改、易保护
无障碍浏览反对
搜索引擎良好，利于 SEO
面向未来的 HTML，浏览器在将来可能提供更丰盛的反对

<!-- 头部 -->
<header>
  <nav></nav>
</header>

<!-- 内容区 -->
<main>
  <!-- 左侧 -->
  <article>
    <!-- 左侧题目 -->
    <header></header>
    <!-- 图片区块 -->
    <figure>
      <img>
      <figcaption></figcaption>
    </figure>
  </article>

  <!-- 右侧 -->
  <aside>
    <!-- 友情链接 -->
    <nav></nav>
    <section></section>
  </aside>
</main>

<!-- 底部 -->
<footer></footer>

<header> 用来示意网页的头部。

头部信息区能够蕴含 <nav> 导航栏等内容信息。

<main> 用来规定出 <header>、<footer> 外的所有内容：

<aside>：能够寄存广告、搜寻内容、分享链接等
<section>：表单、清单、文章分块等内容
<article>：示意一个残缺的、自成一体的内容块。如文章或者新闻报道。
<figure>：文章插图块
<figcaption>：文章插图正文

<footer> 标签外部能够蕴含版权、起源信息、法律限度等文本或者链接信息。

docoment、window、html、body 的层级关系：

window > document > html > body

window 是 BOM 的外围对象，它一方面用来获取和设置浏览器的属性和行为，另一方面作为一个全局对象。
document 对象是一个跟文档相干的对象，领有一些操作文档内容的性能，然而位置没有 window 高。
html 元素对象跟 document 元素对象是属于 html 文档的 DOM 对象，能够认为就是 html 源代码中那些标签化成的对象，它们跟 div、select 这些对象没有什么基本区别。

<input> 和 <img> 尽管是行内元素，然而它们是能够设置宽和高的，因为它们波及到可替换元素和不可替换元素。

替换元素 就是浏览器依据元素的标签和属性，来决定元素的具体显示内容。

例如：

<img> 依据 src 属性来读取图片信息并显示进去
<input> 依据标签的 type 属性来决定是显示输入框，还是单选按钮。

替换元素有：<img>、<input>、<textarea>、<select>、<object>。

HTML 大多数元素都是不可替换的，即其内容间接展示给浏览器。

例如：

<p> 间接全副展现

整体比拟：

块级元素	行内元素
独占一行。默认状况下宽度主动填充父元素宽度	宽度随元素内容变动。相邻的行内元素会排列在同一行内，直到一行排不下，才会换行。
能够设置 `width`、`height`	设置 `width`、`height` 有效
能够设置 `margin` 和 `padding`	能够设置 `margin-left`、`margin-right`、`padding-left`、`padding-right`
对应：`display: block`	对应 `display: inline`

<div> – 标签块
<h1>、<h2>、<h3>、<h4>、<h5>、<h6> – 题目 1 – 题目 6
<form> – 表单
<hr> – 水平线
<ul> – 无序列表
<ol> – 有序列表
<li> – 定义列表我的项目，用于 ul 和 li 中
<p> – 段落
<table>、<thead>、<tbody>、<thead>、<th>、<tr>、<td> – 表格元素

<a> – 超链接或者锚点
<b> – 字体加粗
<br> – 换行
<code> – 定义计算机代码文本
<i> – 斜体
<img> – 图片
<input> – 输入框
<label> – 为 input 进行标记 / 标注
<button> – 按钮
<textarea> – 多行文本框

display 属性能够使行内元素和块级元素之间转换。

display: inline – 转换为行内元素
display: block – 转换为块级元素
display: inline-block – 转换为行内块元素

本系列参考 8 篇文章。

[x] MDN – HTML5 标签列表【浏览倡议：5min】
[x] html5 语义化标签【浏览倡议：5min】
[x] 块级元素与内联元素总结【浏览倡议：5min】
[x] html 中内联元素和块级元素的区别【浏览倡议：5min】
[x] MDN – HTML5 标签列表【浏览倡议：5min】
[x] html5 语义化标签【浏览倡议：5min】
[x] 块级元素与内联元素总结【浏览倡议：5min】
[x] html 中内联元素和块级元素的区别【浏览倡议：5min】

一 目录

二 HTML5 标签

三 构造语义化

3.1 为什么须要语义化

3.2 构造语义化

3.3 头部

3.4 次要内容

3.5 页脚

四 层级关系

五 替换元素和不可替换元素

5.1 替换元素

5.2 不可替换元素

六 行内元素和块级元素

6.1 常见块级元素

6.2 常见行内元素

6.3 行内元素和块级元素转换

七 参考文献

一目录

三构造语义化

四层级关系

五替换元素和不可替换元素

六行内元素和块级元素

七参考文献