认识HTML结构的基本标签

2年前发布

认识HTML结构的基本标签

1. < !DOCTYPE >

定义：定义⽂档类型。告诉浏览器渲染⻚⾯的规则。

DOC: document ⽂档。
TYPE：类型
说明：任何⼀个⽹⻚都必须在⻚⾯第⼀⾏声明⽂档类型。

⽤法：
h3⽆⽂档类型

<html>
</htm>

H4的⽂档类型

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
 
</html

H5的⽂档类型

<!DOCTYPE html>

HTML5语义化

语义：标签所含有的意义。
Html 4标签的语义化比不明显
HTML4中有语义的标签

<h1>一级标题</h1>
<p>段落</p>
<ul>无序列表</ul>
<li>无序列表项目</li>
<ol>有序列表</ol>

<em>斜切</em>

HTML4中没有语义的

<div id='header'>块</div>
<div id='nav'>导航navigation</div>
<div id='main'>主要内容区域</div>
<div id='sidebar'>次要内容区域</div>
<div id='footer'>页尾</div>

HTML对<div>派生出了多个语义化标签

<header>页头</header>
<nav>导航</nav>
<section>一章一节</section>
<main>主要内容</main>
<aside>次要内容</aside>
<footer>页尾</footer>

2. < html >

定义：定义⼀个HTML⽂档。

3. < head >

定义：定义HTML⽂档的头部区域(次要的区域）。

不是给⼈看的
- 给⽤户代理看
- 给搜索引擎看的

4. < meta >

定义：定义⻚⾯的元信息（描述⻚⾯信息的信息）。

⽤法：

< meta >标签位于⽂档的头部。
< meta >是⼀个单标签
< meta >采⽤”名值对”形式定义⻚⾯元信息。

语法

<meta name="属性名" content="属性值" >

常⻅的meta设置：
字符集: 设置⻚⾯的字符编码为utf-8字符集

<meta charset="utf-8">

⻚⾯描述：为搜索引擎设置的

<meta name="description" content="简书是⼀个优质的创作社区，在这⾥，你可以任性地创作，⼀篇短⽂、⼀
张照⽚、⼀⾸诗、⼀幅画……我们相信，每个⼈都是⽣活中的艺术家，有着⽆穷的创造⼒。">

⻚⾯关键词：为搜索引擎设置的

<meta name="keywords" content="简书,简书官⽹,图⽂编辑软件,简书下载,图⽂创作,创作软件,原创社区,⼩
说,散⽂,写作,阅读">

视⼝：为移动设备设置的

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

5. < title >

定义：定义HTML⽂档标题。

6. < link >

定义：关联外部资源与当前⽹⻚⽂档。

外部资源：可以css⽂件也可以是图⽚
收藏夹图标：favourite icon的缩写，表示收藏夹图标的意思。
在线转换ico图标：百度搜索

⽤法:

使⽤< link >关联外部的css⽂件

<link rel="stylesheet" href='css⽂件地址' >

使⽤ < link >管理收藏夹图标

<link rel='shortcut icon' href='icon图⽚地址'

7. < script >

定义： <script> 标签⽤于定义客户端脚本，⽐如 JavaScript。
客户端: 指访问⽹站的⽤户的浏览器。
脚本：⽬前使⽤率最⾼的是js （其他：ActionScript、VBScript)
⽤法
⽤法1：通过< script >引⼊外部脚本⽂件

<script src='脚本⽂件路径'></script>

⽤法2：通过< script >创建脚本区域。

<head>
 <script>
 window.onload = function(){
 
 }
 </script>
</head>

8. < body >

定义：body元素定义⽂档的主体。

主体：给⽤户看的内容全部放在body⾥⾯。
⽂档次要部分：< head >
⽤法：
⼀个HTML⽂档只能有⼀个body

9. < header > h5

定义: 标签定义⽂档的⻚眉。

⻚眉包括什么
- LOGO
- 搜索框
- 主导航
- 登录区
- 快捷⼊⼝（连接）

10. < section > h5

定义: 定义⽂档中的节。具有通⽤性。

11.main：主要

定义：定义文档的主要区域

12.aside：次要的

定义：

13section

14.nva

定义：导航

15.box-sizing属性

定义：用于定义盒模型的计算规则
语法

div{box-sizing:content-box |
border-box}

Content-box:内容盒模型，默认值
Border-box：边框盒模型

16.container{

width:1140px;
margin;

解析

盒模型规定了元素的结构。任何一个元素都是由四部分构成：内容、内边距、边框、外边距
内容盒模型：Winth属性控制到内容区
边框盒模型：winth属性控制到

奇数偶数

odd 奇数
even 偶数

14. < footer > h5

定义：定义文档的页尾

H5标签可以在项⽬中使⽤吗？

开会商量⽅案
确定你的观点：有⼀个⽹站可以帮助你决策：
- Can I Use ：http://www.caniuse.com

常⻅⻚⾯布局的种

分屏式布局
⼯字形布局
圣杯布局
⼝字型布局
两栏布局
三栏布局

评分

欢迎为Ta评分