什么是HTML
- HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
HTML 标签(元素)
- HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如 <html>
- HTML 标签通常是成对出现的，比如 <b> 和 </b>
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
HTML 文档 = 网页
- HTML 文档描述网页
- HTML 文档包含 HTML 标签和纯文本
- HTML 文档也被称为网页
- Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。
- 浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容.
注意 ：有时候我们也会把标签说成元素，比如p 标签说成p元素，其实说的就是同一个东西，指示说法不同而已。
HTML的基本结构
<!DOCTYPE html> <!--文档声明：告诉浏览器以下文件用html哪个版本解析-->
<html lang="en"> <!--告诉浏览器以下文件为超文本标记语言，lang="en"告诉浏览器 这个网站是一个英文站,zh是中文站-->
<head> <!--head是html文件的头部-->
<meta charset="UTF-8"> <!-- meta 元信息，charset="UTF-8" 网站的编码格式,utf-8 国际通用编码格式-->
<title>Title</title> <!--<title>网站的标题</title>-->
</head> <!--head结束标签-->
<body> <!--html主体内容-->
<!--只要显示页面的内容都放在body标签里-->
<!--所有的代码和符号都是英文状态下的-->
</body>
</html>
HTML标签
H标题标签
- h1~h6
- 标题标签 文字大小、粗细程度 、单独占一行
- 一个页面通常只出现一个h1标签 有利于搜索引擎搜索
- 每个页面出现哪些标签，根据自己的需求
<!--一个页面通常只出现一个h1标签有利于搜索引擎搜索-->
<h1 id="box1" class="box">这是h1标签</h1>
<h2 id="box2">这是h2标签</h2>
<h3 class="box box1 box2">这是h3标签</h3>
<h4 class="box box1">这是h4标签</h4>
<h5>这是h5标签</h5>
<h6>这是h6标签</h6>
<h2>段落标签</h2>
p段落标签
换行
<br/>换行符
<hr/>水平线
a标签（超链接标签）
<a href="#">#</a> 刷新当前页面
<a href="javascript: void(0);">死链接</a> 死链接，不会跳转
<a href="#name">锚点</a> <!--在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id-->
<a href="http://baidu.com">跳转到百度</a> 跳转到百度 需要注意的是 http 不能少
<!-- 只有拥有name属性的a标签才有锚点， 其他标签可以通过id属性实现锚点
target属性：
_self 当前页面打开 默认
_blank 在新窗口打开
-->
图片标签
- 语法 ：<img src="图片地址"/>
- 图片要素
src：图片路径
alt 属性是一个必需的属性，它规定在图像无法显示时的替代文本。
title 如果需要为图像创建提示，请使用 title 属性！
alt:描述信息，用于seo给搜索引擎抓取
width:宽，不给值 默认图片多宽就多宽
height:高，不给值 默认图片多高就多高
当width/height，给定一个值的时候，另一个等比缩放，不会给默认值；
粗体标签
<b>我是b标签</b> <!--只是物理加粗-->
<strong>我是strong标签</strong> <!--不仅能加粗，还有利于搜索引擎搜索-->
斜体标签
<em>我是em标签</em> <!--强调斜体，利于搜索引擎搜索-->
<i>我是i标签</i> <!--斜体作用-->
列表
<ul> <!--快捷键：ul>li*4 然后tab-->
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
</ul>
无序列表就是所有的列表项没有先后顺序之分 默认小黑圆点（disc）
可以通过改变type 值来改变前面的小黑圆点(disc) 空心圆(circle) 小方框(square)
<ol>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
</ol>
有序列表就是有先后顺序之分 默认是1 2 3
可以通过改变type 值来改变 A 大写字母排序 a小写字母排序 I大写罗马字母排序 i小写罗马字母排序。
H5新增的两个属性：
reversed 降序排序
start 有序列表的其实值
<dl>
<dt>列表标题</dt>
<dd>列表项目1</dd>
<dd>列表项目2</dd>
<dd>列表项目3</dd>
</dl>
特殊符号
| 代码 |
符号 |
| < |
< 小于号 |
| > |
> 大于号 |
| |
空格 |
|   |
空白位 |
| © |
版权符 |
| & |
&符号 |
div 和span标签
- 可以包含任何块和行内元素，独占一行，支持设置宽高，支持所有css命令。
- 如果没有设置宽高，高度有内容撑开，宽度默认100%浏览器宽度， 没有内容，在网页上肉眼看不到东西，需要审查元素查看，宽度浏览器宽度，高度0。
- 如果设置了，则不受里面内容影响，由设置的宽高决定；
- 行内（内联）元素span display:inline
可以和其他行内元素位于同行，不支持设置宽和高，内容撑开宽高
例如：em，b，strong，i，span，a
- 行内块元素 display:inline-block;
块级元素可以横排展示，行内元素可以设置宽高
- display:none 隐藏元素
包括他的子标签，在页面中不占位置，等同于消失了。
HTML的书写规范
- HTML命名规范
- 名字用小写字母
- 以英文开头，可以包含（英文字母 _ - 数字），不能使用中文
- 见名知意
- 驼峰命名，第二个单词大写，例如：className(js中使用)
- 命名的2种方式
- id 只能有一个名字，且在页面中相同的名字只能出现一次，相当于身份证号码一样
- class相同的名字可以出现N次，并且可以有多个名字，相当于人名字一样
