HTML（超文本标记语言——HyperText Markup Language）是构成Web世界的基石。它描述并定义了一个网页的内容。其他除HTML以外的技术则通常用来描述一个网页的表现／展示效果（CSS）或功能（JavaScript）
显示文件的扩展名：
- WIN10：
查看 -> 文件扩展名
- WIN7：
组织 -> 文件夹和搜索项 -> 查看 -> 隐藏文件类型的扩展名（把对勾去掉）
后缀
.html
文档类型声明
告诉浏览器以什么方式解析文件（html）
这个声明方式是HTML5最新的声明方式
<!doctype html>
以前的声明：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
缩进
同一级别保证是一个缩进线
子级包含关系 就向右缩进
4个空格
或者 2个空格
或者一个 tab
网页三要素
主要是给搜索引擎检索这个网页使用的
- title 标题
- keywords 关键词
- description 描述
<title>网页的标题</title>
<meta name="keywords" content="HTML WEB 网页 H5" />
<meta name="description" content="超文本标记语言,WEB内容显示,HTML基础" />换行
注意： 在多数标签内，多个空格或者回车 会被解析成一个空格，除了:pre标签
<h3>静夜思
李白
</h3>
<p>
窗前明月光
疑是地上霜
举头望明月
低头思故乡
</p>
<h3>上楼梯 <br />
冯骏
</h3>
<pre>
小白 小白上楼梯
去吃肯德基
薯条呀薯条
汉堡呀汉堡
</pre>
块级元素与内联元素
块级元素
就是独占一行的元素
内联元素
内联元素不是，如: span
路径
相对路径
- ‘文件夹/文件名’ 这里的/就代表内部（里边）查找，如
img/02.jpg就是在img文件夹里的02.jpg
<img src="img/02.jpg" />- ‘../’ 向上一级目录
<img src="../pic/04.jpeg" />- ‘./’ 代表的是当前目录
<img src="./img/03/03.jpg" />绝对路径
比如： https://baidu.com,C:\Users\Administrator\Pictures\Saved Pictures\文化\6a46cff2a90b0eb71ea4db33ac5f2e7f_r.jpg,/01/01.jpg
<img src="https://cep-prd-ms-public.oss-cn-hangzhou.aliyuncs.com/PermanentFolder/5da532c8-c07b-4b45-a7f8-057cd9f152c1" />
<img src="C:\Users\Administrator\Pictures\Saved Pictures\文化\6a46cff2a90b0eb71ea4db33ac5f2e7f_r.jpg" />
<img src="/04.jpg" />1. html
2. head
3. body
注意： html,head,body一个页面中只有一个，不能出现多个
4. title
网页的标题， 放到head中
<head>
<meta charset="utf-8" />
<title>网页的标题</title>
</head>
5. meta
- [x] 设置字符集编码，单标签
<meta charset="utf-8" />设置关键字
<meta name="keywords" content="HTML WEB 网页 H5" />设置描述
<meta name="description" content="超文本标记语言,WEB内容显示,HTML基础" />6. 标题标签
- h1
- h2
- h3
- h4
- h5
- h6
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
7. p
段落标签
8. pre
段落标签，会保留空格 缩进 回车
9. div
就是普通的容器标签
10. span
没有什么样式，普通的内联元素
11. a
链接标签，可以用来跳转网页，跳锚链接，发邮件，发短信，打电话…
- 通过 href 指定 链接的地址
- 通过 target 属性， 指定跳转链接的方式。
target的默认值是 _self；
_blank 指定在新窗口打开链接
<a href="https://baidu.com" target="_blank">百度</a>- title 属性 鼠标移入a链接会显示title的属性值内容
12. img
- [x] + 图片标签，单标签，通过src属性链接图片，格式如下:
<img src="图片的路径" />title 属性，图片的名称，给用户友好提示
alt 属性，当图片路径出现问题，无法正常显示，alt的属性值会显示出来，给用户以提示，这个图片是干嘛滴
13. 无序列表
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>大白梨</li>
</ul>
14. 有序列表
<ol>
<li>篮球</li>
<li>足球</li>
<li>羽毛球</li>
<ol>
15. 会话列表
<dl>
<dt>你好，小王</dt>
<dd>你好，小李</dd>
<dt>how are you?</dt>
<dd>fine 3Q</dd>
<dt>how old are you?</dt>
<dd>...</dd>
</dl>
16. em
斜体 强调
17. strong
加粗 强调
18. i
斜体
19. iframe
<iframe src="01.html" width="800" height="1000" frameborder="0"></iframe>- src属性：指定嵌套网页的链接地址
- frameborder： 设置边框
- width： 宽度
- height： 高度
- name：名字
可以通过a标签的href属性与target属性修改iframe嵌套内容，href指向要跳转的地址，target指向iframe的name值，代码如下：
<div>
<a href="03.html" target="myframe">跳03</a>
<a href="01.html" target="myframe">跳01</a>
<a href="02.html" target="myframe">跳02</a>
<a href="04.html" target="myframe">跳04</a>
</div>
<iframe src="02.html" name="myframe" width="800" height="1000" frameborder="0"></iframe>20. small
小号文字，可以放在标题标签中，作为副标题使用
21. br
- [x] 换行，单标签
22. hr
- [x] 分割线，单标签
23. 注释
<!--注释-->
24. 特殊字符
| 字符 | 代码 |
|---|---|
| < | < |
| > | > |
| “ | " |
| ‘ | ' |
| & | & |
| × | × |
| 空格 | |
| © | © |
| ® | ® |
| ™ | ™ |
25. sub
下标
26. sup
上标
27. u
下划线
28. b
加粗
29. code
代码格式
30. blockquote
引用， 块级元素
31. del
删除线
32. mark
标记标签,高亮黄色背景
示例代码：
<em>斜体</em>
<strong>加粗</strong>
<i>斜体</i>
<u>下划线</u>
<b>加粗</b>
<del>删除</del>
<small>小小小小鸟</small>
<code>console.log('hello geek')</code>
下标<sub>sub</sub>
上标<sup>sup</sup>
<mark>标记</mark>
<blockquote>这里是引用</blockquote>效果如下：
任务清单
- 整理复习
- 个人简历制作
- 总结博客：那些是单标签、双标签，那些是行内元素、块级元素
2033
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
