1. 基础(一)
<h1>一级标题</h1>
<h2>二级标题</h2>
<h2>二级标题</h2>
<h3>三级标题</h3>
<p>段落标签</p>
<html>
HTML的根标签，有且只有一个根标签，所有东西都写在根标签的里面
<head>
<title>
</title>
</head>
<body>
</body>
</html>
注释:
1.每个标签都有每个标签的作用。
2.head是html的子标签，title是head的子标签
3.head中的内容是在网页中看不到的。
4.一般我们写的内容都是放在body中的。
2.基础(二)
1.标签一般成对出现，但是也存在一些自结束标签有两种写法，比如或者这种的单独存在的一个标签说不定就是自结束标签<input.>或者<.input/>
2.当你做程序的时候，你有一些不想要让用户知道的内容，或者想让同行知道的东西（多人开发一个东西），那么进行注释：
<!-- 中间放入解释注释的话 -->
<!--
这个代表HTML注释 注释中的内容会被浏览器忽略，不会再网页中直接显示，但是可以在源码中查看注释，注释用来对代码进行解释说明的的
-->
<!-- 开发中的时候注释要简单明了 -->
<!-- 注释中还可以将一些不希望显示的内容隐藏 -->
3.删除和注释掉有本质区别，删了就是彻底没有了，但是注释可以恢复.
4.注释不能嵌套如:
<!--
<!--
注释中的注释 是不可以的 浏览器检测代码时是从上面到下面的那么检测到第一个
和第三个进行匹配了，最后多出来一个 -->输出到自己的网页中，所以网页会出现错误
-->
-->
3.标签中的属性
<html>
<head>
<title>这是一个网页</title>
</head>
<body>
<!--
1.属性，在标签中（开始标签或结束标签）还可以设置属性,属性是用来来设置标
签中的内容如何现实
2.属性名不能瞎写，应该根据文档中的规定来编写
3.有些有属性值，有些没有，如果有属性值，属性值应该用引号引起来 例如
<font color="yellow" size="56px"></font>
-->
<h1>这是<font color="red">我的第三个</font>网页</h1>
</body>
</html>
注释:font的英文翻译为字体，字型
4.文档声明、关于进制、字符编码
<!doctype Html>
<html>
<head>
<title>网页的基本结构</title>
</head>
<body>
<!-- 迭代
网页的版本
HTML4;
HTML5;
XHTML2.0;（现在已经不常用了）
.....
文档声明（doctype）
---文档声明用来告诉浏览器当前网页的版本
--- html5的文档声明
<!doctype html>和<!Doctype HTML> 这个可以无所谓大小写的（
因为浏览器是自上而下读入的，所以这个文档声明应该在整个文本的第一行）
进制：
十进制；
特点：满10进1
计数：0 1 2 3 4 5 6 7 8 9 10 11...........20
单位数字：10个（0 1 2 3 4 .....9）
二进制； (计算机底层的进制)
特点：满2进1
计数：000 001 010 011 100 101 110 111
单位数字 ：2个（0 1）
-----扩展：
--所有数据在计算机底层都会以二进制的形式保存
--可以将内存想想为一个有多少小格子组成的容器
（每一个小格子中可以存储一个1或者一个0）
这一个小个子在内存中被称为1bit
8bit=1byte（字节）
1024byte=1kb（千字节）
1024kb=1MB 1024MB = 1GB 1024GB=1TB 1024TB=1PB
--在计算机中我们最小的操作数为1byte
八进制； （在我们现实生活中基本不会使用）
特点：满8进1
.........
.........
十六进制；(比较常见，一般显示一个二进制数字时，都会转换为十六进制 )
特点：满16进1
计数 ： 0 1 2 3 4 5 6 7 8 9 10 .... 15 ....1a 1b 1c....1f
........
计数的时候注意 10在16进制的时候为A 那么27的十六进制为1B
字符编码
顾浩->在计算机中存储格式为 11000010010 （编的）
电脑看来 11000010010—>顾浩
- 所有数据在计算机中存储时都是以二进制存储的，文字也不例外
所以一段文字在存储到内存中时，都需要转化为二进制编码
当我们度这段文字是，计算机会将编码转换为字符，供我们阅读
- 编码
- 将字符转换为二进制码的过程称为编码
- 解码
- 将二进制转换为字符的过程称为解码 比如电报，传递信息的时候，先进行编码后
进行解码
- 字符集（charset）
- 编码和解码所采用的规则称为字符集
很好理解例如 a 1
b 10 那么你要是想发b则发10
- 乱码问题
- 如果编码和解码采用的字符集不同就会出现乱码问题
- 常见的字符集
- ASCII 美国的 7位 128个字符
- GB2312 欧洲的 对ASCII进行扩充 8位 256个字符 但是对于其他国家都不够用，、
所以需要进行扩展
- GBK 是上一个的扩展
- UTF-8 万国码（包含了所有世界上所有的符号）现在开发程序最好的选择，这样
你写的东西可以在全世界通用,有的时候公司为了优化才使用其他的。
在开发时，我们使用的字符集都是UTF - 8
-->
</body>
</html>
<html>
<head>
<!--可以通过meta标签来设置网页的字符集，避免乱码问题 meta英文翻译为元语言即字符集
Unicode Transformation Format UTF-8即八位元 是万国码
-->
<meta charset ="UTF-8">
<title>这是一个标题</title>
</head>
<body>
</body>
</html>
！！！！！脚踏实地不要跳过每一个知识点，可能用不到但是在以后的学习过程中会用到
5.文档的使用
<!-- 文档声明 -->
<!doctype html>
<!-- HTML的根标签-->
<html>
<!-- head是网页的头部，head标签不会在网页中出现，主要用来帮助浏览器或搜索引擎来解析网页 -->
<head>
<!-- meta用来设置网页的元数据 这里meta用来设置网页的字符集 避免乱码 -->
<meta charset="UTF-8">
<!-- title中的内容会显示在浏览器的标题栏，搜索引擎会主要根据title中的内容来判断网页的主要内容-->
<title>这是一个标题</title>
</head>
<!-- body表示网页的主体，所有的可见的内容都会在body里面-->
<body>
<!-- h1是网页的大标题-->
<h1>This is a big title</h1>
</body>
</html>
翻译 ： meta 元语言 ，charset 字符集，doctype声明; 文档类型 ，
6.实体
（需要的实体可以在 www.w3school.com.cn里面找到）
第一部分、快捷键
ctrl+/ 是注释的快捷键
p+tab 实现自动补全
<p></p>
<b></b>加粗
第二部分
<!doctype html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>这是一个标题</title>
</head>
<body>
<!--
在我们网页中代码多个空格只显示出一个空格
在html中 我们不能直接书写一些特殊符号
比如连续的空格，字母两侧的大于号和小于号
如果我们需要在网页中书写这些特殊符号则需要用html中的实体（转义字符）
实体的语法：
&实体的名字：
大于号>
小于号 <
版权符号© : ©
记住后面都有分号
-->
<p>
今天 天气真不错！
</p>
<p>
a<b>c
©
</p>
</body>
</html>
7.meta 标签
1.<meta charset="utf-8">
<meta name="keywords" content="购物,手机,网恋">
<meta name="description" content="京东，我们首选的网站">
<meta http-equiv="refresh" content="3;url=http://www.baidu.com">
三秒之后跳转到百度，特定情况下会用，但是比较少
代码示例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<!--
meta主要用于设计网页中的一些元数据，元数据不是给拥护看
charset是字符集
name是指定的数据名称
content指的是数据内容
keywords表示网站的关键字
可以使用多个关键字，关键字中间用逗号隔开
meta是用于对搜索引擎的
<meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易," />
description 用于指定网站的描述
<meta name="description" content="京东JD.COM专业的门户网站">
网站的描述会显示在搜索引擎的搜索结果中
-->
<meta name="keywords" content="HTML5,前端,CSS3"/>
<meta name="description" content="so good"/>
<!--
<meta http-equiv="refresh" content="3;url="http://www.baidu.com"/>
三秒之后跳转到 百度 3代表秒数，然后分号 url= 跳转的地址
-->
<meta http-equiv="refresh" content="3;url=http://www.baidu.com"/>
<title>this is a project</title>
</head>
<body>
</body>
</html>
8.语义化标签(一)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="keywords" content="淘宝京东"/>
<meta name="description" content="你想要的应有尽有" />
<title></title>
</head>
<body>
<!--
在网页中HTML专门负责网页的结构
所以在使用 html标签时，应该关注的是标签的语义，而不是它的样式
标题标签：
h1-h6一共有六级标题
h1-h6的重要性逐级递减 h1最重要，h6最不重要
h1在网页中的重要性仅次于我们的title标签，一般情况下一个页面只有一个h1
一般情况下页面只会使用h1-h3标签，h4-h6很少用
在页面中独占一行的元素称为块元素（block element）
-->
<h1>第一标题</h1>
<h2>第二标题</h2>
<h3>第三标题</h3>
<h4>第四标题</h4>
<h5>第五标题</h5>
<h6>第六标题</h6>
<!--
hgroup标签为标题分组，可以把一组相关的标题放入hgroup
-->
<hgroup>
<h1>回乡偶书</h1>
<h2>其二</h2>
</hgroup>
<!--
em标签表示语音语调的一个加重
在页面中不会独占一行的元素称为行内元素（inline element）
-->
<p>今天天气<em>真</em>不错</p>
<!--
strong表示强调，重要的内容！
-->
<p>你今天必须<strong>完成作业!</strong></p>
<!--
blockquote 表示一个长引用 , 会独占一行
-->
鲁迅说：
<blockquote>我没说过这句话</blockquote>
<!--q表示一个短引用 即为双引号 不会独占一行-->
子曰<q>学而时习之，不亦乐乎？</q>
<!-- br 标签表示页面中的换行-->
<br/><br/>
<p>看</p>
</body>
</html>
9.块和行内
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
块元素《block element》
- 在网页中一般通过块元素对页面进行布局
行内元素《inline element》
- 行内元素主要用于包裹文字
- 一般会在块元素中放行内元素 ,而不会在行内元素中放块元素
一般<h1><em>111</em></h1>
而不会<em><h1>111</h1></em>
- p元素中不能放任何块元素
例如
<p><h1></h1></p> 是错误的
浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正
比如：
1.标签写在了根元素的外部
p元素中嵌套了块元素
<p><h1>哈哈</h1></p>
2.根元素中出现了除head以外的子元素
3......
-->
<p><h1>111</h1></p>
<!-- 网页自动修正为 <h1>111</h1>-->
</body>
</html>
<h1>我就要写在外面</h1>
<!-- 浏览器自动修正， -->
10.语义化标签(二)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>document</title>
</head>
<body>
<!--
布局标签（结构化语义标签）
-->
<!--
header表示网页的头部 header和footer可以是某个部分的头和底
main表示网页的主体部分（一个页面中只有一个main）
footer表示网页的底部 都是HTML5的新增的语义化标签,用之前要考虑兼容性,比如footer
nav表示网页中的导航，
aside 和主体网页相关的其他内容（侧边栏
article 表示一个独立的文章
他们的显示效果没有区别，因为只是区分地方的
section表示一个独立的区块，上面的标签都不能表示时使用section
div 没有语义，表示一个区块，目前来说div还是我们的主要的布局元素 可以代替上面的所有元素
-span 是一个行内元素，没有任何的语义，一般在网页中选中文字
-->
</body>
<header>ff</header>
<main>ff</main>
<footer>ff</footer>
<nav>ff</nav>
<aside>ff</aside>
<article>ff</article>
<div>ff</div>
<span>ff</span>
</html>
列表
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
列表（list）
1、尺子
2、铅笔
3、钢笔
在html中也可以创建列表，html列表有三种
1.有序列表
2.无序列表
3.定义列表
-->
<!--
有序列表，使用ol标签创建有序列表
使用li表示列表项
无序列表 ,使用ul标签创建无序列表 用的最多，如导航菜单
使用li表示列表项
定义列表，使用dl标签来创建定义列表
dt来表示定义的内容
dd来对内容进行解释说明
英文翻译：ol: ordered lists 有序列表
ul: unordered lists 无序列表
-->
<ol>
<li>行为</li>
<li>结构</li>
<li>可以</li>
</ol>
<ul>
<li>行为</li>
<li>结构</li>
<li>可以</li>
</ul>
<dl>
<dt>结构</dt>
<dd>表示网页结构</dd>
<dd>一个可以多个解释</dd>
</dl>
<ul>
<li>
aa
<ul>
<li>aa-1</li>
<li>aa-2</li>
</ul>
</li>
</ul>
</body>
</html>
12.超链接
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>ctrl+d 复制当前行</title>
</head>
<body>
<!--
超链接可以让我们从一个页面跳转到另一个页面
或者是当前页面其它位置
使用a标签来定义超链接
属性：
href 指定跳转的目标路径
- 值可以是一个外部网站的地址
- 也可以是内部页面的地址 [跳转需要在同一个目录，不然可能出现小问题。（前期）]
超链接也是一个行内元素,在a标签里可以嵌套除他自身外任何的元素
-->
<a href="http://www.baidu.com">超链接</a>
<a href="http://www.taobao.com">超链接</a>
<a href="07列表.html">超链接</a>
</body>
</html>
13.相对路径
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
我们需要跳转一个服务器内部的页面时，一般我们都会使用相对路径
相对路径都会使用.和..开头
./
../
./可以省略不写，如果不写./也不写../则就相当于写了./
-->
<!--
-->
<a href="./07列表.html">超链接</a>
<a href="../yeah/07列表.html">链接</a>
</body>
</html>
14.超链接的其他方法
未完待续
1790
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
