HTML复习（一）
2018-08-22 本文已影响0人
趴趴捏
什么是html
简单来说，html就是“HyperText Markup Language”的简写，也就是超文本标记语言。
通过浏览器解析之后就渲染成页面。
html主要用来标记页面中的内容，同时浏览器会赋予其一定的样式。但是在开发过程中我们一般不使用默认的样式，而是通过css来制定。
历史版本
- 1991 html
- 1995 html2（第一个官方标准）
- 1996 html3.2
- 1997 html4.0
- 1999 html4.1
- 2000 xhtml1.0（转折点）
- 2001 xhtml1.1
- 2005 xhtml2.0（不被浏览器厂商认同）
- 2008 html5（草案）
- 2014 html5（啊，终于等到你～）
- 持续更新
文档结构
<!-- 文档声明 -->
<!DOCTYPE html>
<!-- 根元素 -->
<html lang="en">
<!-- 文档头部 -->
<head>
<meta charset="UTF-8">
<title>lexian-mall</title>
</head>
<!-- 文档主体 -->
<body>
</body>
</html>
文档声明
html文档声明告诉了浏览器应当用什么标准解析这份html文档，如果不添加，浏览器可能会用自己默认的解析方式来解析，造成错误。
要求：
- 写在文档的首行
- 格式
<!DOCUTYPE 声明内容>，对大小写不敏感 - HTML4.01时代有很多声明，比如：
- strict.dtd
- loose.dtd
- frameset.dtd
- HTML5时代
只要有<!DOCTYPE html>
文档头部
主要有mate，title，link，style
除了title作为浏览器的tab上的文字显示，其他内容均不会显示
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./../common/base.css">
<title>Document</title>
<style>
#app{
margin: auto；
}
</style>
</head>
文档主体
文档主题是用户真正可见的内容
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./../common/base.css">
<title>Document</title>
<style>
#app{
margin: auto；
}
</style>
</head>
基本语法
标签
符合W3C标准的标签是小写的，（所以在vue工程中，驼峰命名的组件，在调用时都是小写），一般是成对的开闭标签，有时也会是单个标签比如：
<div>有开有闭</div>
<img alt="hehe">
标签属性
- 属性控制了标签的行为，比如
<a href="demo.html">链接</a> - 属性可以不加引号，但是在属性中包含等号的时候必须加，比如
<a href="demo.html?page=13">链接</a> - 有些属性的类型是bool，可能不需要使用等于号，直接用属性名就可以表示，比如：
<button disabled>按钮</button>
注释
语法为 ``，用户不可见，增加可读性
全局属性
- id（唯一标示）
-class （一类标示） - style（行内样式，优先级最高的样式）
- title （当元素被hover时显示的信息）
实体字符
符合html标签规则的文字会被解析为标签，不被显示，这时我们需要进行转义。
| 名称 | 实体字符 |
|---|---|
| 空格 |  ,  |
| 引号 | "，" |
| > | >,> |
| < | <,< |
| © | ©,© |
| & | &,& |
