网页基础 -- HTML
web 基础：
1.web标准（万维网-W3C）：
结构标准--HTML ->决定网页上有什么东西（能够显示什么内容）
表现标准--CSS ->决定网页上内容的布局和显示方式
行为标准--JavaScript（JS）->决定网页上动态的效果
2.认识HTML
HTML是超文本标记语言（可以用来标记文本、图片、视频、音频、按钮、输入框等内容）
HTML不是编程语言，不会编译执行，语法错误也不会报错导致程序不能往后执行
3.HTML版本
H5：指HTML5+CSS3+js(广义)、HTML5（狭义）
4.HTML编程
a.HTML标记语言对应文件的后缀，一般都是html
b.HTML的结构：整个html是通过不同的标记来组成
5.标签/标记
a.双标签（常规标签）
<标签名 属性=属性值 属性=属性值>标签内容</标签名>
b.单标签（自闭和标签）
<标签名 属性=属性值 属性=属性值/>
<标签名 属性=属性值 属性=属性值>
说明：
标签名：HTML标准中固定的（注意：<和标签名之间不能有空白）
属性：属性和标签名之间用空格隔开，以属性=属性值的形式存在，多个属性之间也用空格隔开
（属性可以是HTML标准中的属性，也可以是自定义的属性）
标签内容：是值开始标签和结束标签之间的内容。标签的内容可以是任何内容（可以是字符串，也可以是其它任何标签）
补充：HTML语法中，不区分大小写
6.网页的结构
<!--
DOCTYPE：来对当前的HTML版本进行说明
HTML 默认版本（HTML5）
-->
<!DOCTYPE HTML>
<!--html表示整个网页-->
<html>
<!--
head中的内容一般是不可见的，并且里面的子标签是固定的：
title -- 设置标题
meta
link
style
script
-->
<head>
<!--title设置网页标题（唯一可见）-->
<title>嗨，welcome to HTML！</title>
<!--charset:设置编码方式-->
<meta charset="utf-8"/>
</head>
<!--body网页内容-->
<body>
</body>
</html>
body:网页显示内容
文本标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.标题标签（h1-h6）-->
<h1>标题一</h1>
<h2>biaoti2 </h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<!--
2.段落标签(p)
a.一个P标签代表一个段落
b.p标签的内容结束后和其它的内容之间默认有一个空行
-->
<p>
这是最坏的时代，这是最坏的时代。被掩埋的逐渐浮出水面，被捧杀的慢慢回归历史的真相，
被抹杀的偷偷的藏了起来，这一切，只是为了让老三承认，“如果师父同意在中国的地里种鸦片，我就不杀他了”。
至于必然险阻的未来，从鹅城活下来的老七能做的已经都做了，他老了，老到了该成为永远不死的小六子的养料
的时候了，新陈代谢是自然规律，新的必然会战胜旧的，这就是历史，这就是时代，这就是，邪不压正。
</p>
<!--
3、文本符号
 ； --空格
-->
<p>
    这是最坏的时代，这是最坏的时代。被掩埋的逐渐浮出水面，被捧杀的慢慢回归历史的真相，
被抹杀的偷偷的藏了起来，这一切，只是为了让老三承认，“如果师父同意在中国的地里种鸦片，我就不杀他了”。
至于必然险阻的未来，从鹅城活下来的老七能做的已经都做了，他老了，老到了该成为永远不死的小六子的养料
的时候了，新陈代谢是自然规律，新的必然会战胜旧的，这就是历史，这就是时代，这就是，邪不压正。
</p>
<!--4.换行标签（br)-->
<p>
    这是最坏的时代，这是最坏的时代。被掩埋的逐渐浮出水面，被捧杀的慢慢回归历史的真相，<br />
被抹杀的偷偷的藏了起来，这一切，只是为了让老三承认，“如果师父同意在中国的地里种鸦片，我就不杀他了”。<br />
至于必然险阻的未来，从鹅城活下来的老七能做的已经都做了，他老了，老到了该成为永远不死的小六子的养料<br />
的时候了，新陈代谢是自然规律，新的必然会战胜旧的，这就是历史，这就是时代，这就是，邪不压正。<br />
</p>
<!--5.超链接（a）-->
<a href="https://www.jianshu.com/u/5f036f508e2b">简书</a>
<!--
6、文字加粗（b/strong)
strong 有强调的作用
-->
<p>
    这是最坏的时代，这是最坏的时代。被掩埋的逐渐浮出水面，被捧杀的慢慢回归历史的真相，<br />
被抹杀的偷偷的藏了起来，这一切，只是为了让老三承认，“如果师父同意在中国的地里种鸦片，我就不杀他了”。<br /><hr />
至于必然险阻的未来，从鹅城活下来的老七能做的已经都做了，他老了，老到了该成为永远不死的小六子的养料<br />
的时候了，<i>新陈代谢</i>是自然规律，新的必然会战胜旧的，这就是<b>历史</b>，这就是<b>时代</b>，这就是<strong><em>邪不压正</em></strong>。<br />
</p>
<!--
7、文字倾斜（i/em）
em有强调作用
-->
<!--
8、水平线（hr）
-->
</body>
</html>
效果展示
列表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>list</title>
</head>
<body>
<!--有序列表(ol)-->
<ol >
<li>Chinese</li>
<li>Match</li>
<li>English</li>
</ol>
<!--无序列表-->
<ul>
<li>成都</li>
<li>长安</li>
<li>北京</li>
</ul>
<!--自定义列表-->
<dl>
<dt>City</dt>
<dd>Changan</dd>
<dd>Beijing</dd>
<dd>Shanghai</dd>
<dt>Province</dt>
<dd>Shaanxi</dd>
</dl>
</body>
</html>
表格.png
图片和超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.图片标签
a.src属性：图片的地址（本地地址、网络地址）
本地地址：绝对路径和相对地址(相对于工程目录)
注意：本地图片需要放到工程目录下的img文件夹下
b.title属性：图片的标题（鼠标停留在图片上，隔一段时间才显示出来）
c.alt属性：图片加载失败后显示的提示信息
-->
<img src="img/xin.jpg" />
<img alt="图片加载失败" title="排序算法" src="https://img.haomeiwen.com/i13183583/feb0453292eb6da3.png"/>
<!--2、超链接
网页上点击后可以跳转的标签都是超链接
href属性：跳转地址（本地地址，网络地址）
网络地址：跳转到对应的网页
本地地址：当前工程的其它的html文件路径
空串/#:刷新页面回到网页的顶部
选择器：让网页滚动到网页上的任意位置
target属性：
self:当前页面中打开href的地址
blank：在新的也面中打开href的地址
a.点击文字跳转
-->
<a href="http://www.baidu.com/" target="_self">百度一下</a>
<a href="http://www.baidu.com/" target="_blank">百度一下2</a>
</body>
</html>
表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--表格：
table:代表整个表格
tr:行
td:列
一个表格可以有多行，一行可以有多列
table属性：
1、border：设置整个表格中边框的宽度
2、width：设置表格宽度
3、height：设置表格高度
4、align:center--让整个表在其父标签中居中
5、bgcolor:背景颜色
6、cellpadding：设置内容和单元格之间的间距
7、cellspacing：设置单元格和单元格中的位置
8、 bordercolor：边界颜色
tr属性：
width：设置表格宽度
align="center":当前行中所有单元格中的内容居中
td属性：
height：设置表格高度
align="center":当前单元格中的内容居中
注意：所有的属性值都用双引号括起来
-->
<table border = '1' width="600" height="300" align="center" bgcolor="aqua" cellpadding="100" cellspacing="10" bordercolor="green">
<tr align="center">
<td >姓名</td>
<td>成绩</td>
<td bgcolor="red">是否留级</td>
</tr>
<tr>
<td align="center">GHope</td>
<td>99</td>
<td>False</td>
</tr>
<tr>
<td>Lucy</td>
<td>98</td>
<td>False</td>
</tr>
</table>
</body>
</html>
表格
稍微复杂的表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="2" width="300" height="200" bgcolor="green">
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
<table border="2" width="400" height="300"bordercolor="red">
<tr>
<td rowspan="3"></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="2"></td>
</tr>
</table>
</body>
</html>
比较复杂的表格
一些参考资料
HTML
超文本标记语言，标准通用标记语言下的一个应用。
“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容
什么是HTML
HTML是用来描述网页的一种语言。
- HTML 指的是超文本标记语言: HyperText Markup Language
- HTML 不是一种编程语言，而是一种标记语言
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML文档也叫做 web 页面
HTML标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag) 。
- HTML 标签是由尖括号包围的关键词，比如 <html>
- HTML 标签通常是成对出现的，比如 <b> 和 </b>
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
| <font size = 5><font color=f09345><标签></font>内容<font color=f09345></标签></font></font> |
|---|
HTML元素
"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:
HTML 元素:
<p>这是一个段落</p>
HTML网页结构
下面是一个可视化的网页结构：
image
其中白色区域才是在网页中可见的部分
HTML版本
从初期的网络诞生后，已经出现了许多HTML版本:
| 版本 | 发布时间 |
|---|---|
| HTML | 1991 |
| HTML+ | 1993 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML 1.0 | 2000 |
| HTML5 | 2012 |
| XHTML5 | 2013 |
<!DOCTYPE> 声明
<!DOCTYPE>声明有助于浏览器中正确显示网页。
网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。
doctype 声明是不区分大小写的，以下方式均可：
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>
通用声明
html5 :
<!DOCTYPE html>
HTML 4.01:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0 :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
查看完整网页声明类型 DOCTYPE 参考手册。
中文编码
目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
常用标签
1.HTML<head>元素
<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.
| 标签 | 描述 |
|---|---|
| <title> | 定义了文档的标题 |
| <base> | 定义了页面链接标签的默认链接地址 |
| <link> | 定义了一个文档和外部资源之间的关系 |
| <meta> | 定义了HTML文档中的元数据 |
| <script> | 定义了客户端的脚本文件 |
| <style> | 定义了HTML文档的样式文件 |
< meta>元素
meta标签主要是通过属性为网页提供元数据主要包括：name属性和http-equiv属性
<mate name=“参数”, content=“具体描述”>
name属性参数:
1.keywords(关键字)
说明：用于告诉搜索引擎，你网页的关键字。举例：
<meta name="keywords" content="python,技术，理科生，前端">
2.description(网站内容的描述)
说明：用于告诉搜索引擎，你网站的主要内容。举例：
<meta name="description" content="关于python的技术博客">
3.author(作者)
说明：用于标注网页作者 举例：
<meta name="author" content="726550822@qq.com">
4.viewport(移动端的窗口)
说明：这个属性常用于设计移动端网页。在用bootstrap,AmazeUI等框架时候都有用过viewport。
<meta name="viewport" content="width=device-width, initial-scale=1">
5.robots(定义搜索引擎爬虫的索引方式)
说明：robots用来告诉爬虫哪些页面需要索引，哪些页面不需要索引。content的参数有all,none,index,noindex,follow,nofollow。默认是all。
举例：
<meta name="robots" content="none">
具体参数如下：
a.none : 搜索引擎将忽略此网页，等价于noindex，nofollow。
b.noindex : 搜索引擎不索引此网页。
c.nofollow: 搜索引擎不继续通过此网页的链接索引搜索其它的网页。
d.all : 搜索引擎将索引此网页与继续通过此网页的链接索引，等价于index，follow。
e.index : 搜索引擎索引此网页。
f.follow : 搜索引擎继续通过此网页的链接索引搜索其它的网页。
6.renderer(双核浏览器渲染方式)
说明：renderer是为双核浏览器准备的，用于指定双核浏览器默认以何种方式渲染页面。比如说360浏览器。举例：
<meta name="renderer" content="webkit"> //默认webkit内核
<meta name="renderer" content="ie-comp"> //默认IE兼容模式
<meta name="renderer" content="ie-stand"> //默认IE标准模式
