html 文档结构总结

Html 页面结构

<!DOCTYPE html>
<html lang="zh-CN">
<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>

<!DOCTYPE html> 文档类型是html。
html 根元素：浏览器渲染html的起点，入口。
<html lang="zh-CN"> 属性，标签的特征，页面语言。
html 根元素只有两个子元素 <head> 和 <body> 。
<head> 头元素：针对浏览器，搜索引擎SEO 。
<meta> 元标签：中介，媒婆：描述其他元素。
<meta charset="utf-8"/> ：页面编码。
<title> : 页面标题。
<body> 页面主体。

HTML 页面视口

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width 是逻辑宽度：开发的时候用的宽度。
device-width是物理宽度：设备宽度。

html 标签

素: 页面成员
标签: 描述元素
属性: 标签特征

属性

双标签: 元素
空标签: 元素占位符
预定义标签: 浏览器自动识别,有预定义样式
自定义标签: 内容和行为由用户自定义后浏览器才能识别

属性

使用键值对描述,class="title"
预定义属性: id,class,style,src,type,name,...
通用属性: id,class,style
自定义属性: data-前缀,如data-email

语义化布局标签

优点直观,SEO,缺点数量有限,且层级会过深
有限的回退到tag + class,如<div class="xxxx">

图像

img src="url" alt="" />

1.src 是图像链接。
2.alt是进行图像描述。

链接

<a href="http://" target="_blank"></a>

href 是链接地址。
target的属性有四个，但我们常用的是两个：_blanl:打开新的页面窗口，_self打开在当前页面，是默认值。

列表

1. 无序列表

<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ul>

2. 有序列表

<ol>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ol>

3. 自定义列表

<dl>
  <dt>title</dt>
  <dd>description</dd>
</dl>