1. web标准
1）结构标准
2）表现标准
3）行为标准
-
javascript：简称js，决定网页上动态变化的内容
2. 什么是html
- html是超文本标记语言（类似markdown语法）
- html是通过不同的标记（标签）来决定网页上的不同内容，学习html就是学html中的标签（标记）
3. html语法
1）html大小写不敏感
- html == Html == HTml == HTML
2） 标签（标记）
- a. 语法：
双标签：<标签名 属性名1=值1 属性名2=值2...> 标签内容 </标签名>
单标签：<标签名 属性名1=值1 属性名2=值2.../> 或者 <标签名 属性名1=值1 属性名2=值2...>
- b. 说明
标签名：必须是html提供的标签名，不能随便写
属性：以“属性名=值”的形式成对出现的，多对之间用空格隔开；属性的顺序可以任意，不会影响效果
值：必须放在双引号中
标签内容：只有双标签才有标签内容；标签内容可以是任何内容（不光只能是文字，还可以是其他一个或者多个标签）
<!--
DOCTYPE: 说明html版本
html - html5
-->
<!DOCTYPE html>
<!--
html结构-网页内容结构:
<html> - 代表整个网页
<head></head> - 显示网页标题顶部的位置
<body></body> - 网页内容部分
</html>
-->
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>
4. head中的标签
-
meta标签：定义了HTML文档中的元数据(设置网页的基本设置)
-
title标签：设置网页标题
-
style标签：在html中提供CSS代码对应的标签（HTML文档的样式文件）
-
link标签：导入图标/CSS文件的标签（文档和外部资源之间的关系）
-
script标签：导入js代码/文件的标签（客户端的脚本文件）
-
base标签：url基本地址（页面链接标签的默认链接地址）
<!DOCTYPE html>
<html>
<head>
<!--设置网页中文本的编码方式-->
<meta charset="UTF-8">
<!--设置网页标题-->
<title>head中的标签</title>
<!-- 设置网页图标
rel - 设置文件作用；stylesheet:样式表，icon:图标
type - 设置文件类型, 文件类型/文件后缀；text/css: 文本/后缀是css, image/ico: 图片/后缀是ico
href - 设置文件路径; 可以是绝对路径也可以是相对路径 -->
<link rel="icon" type="image/ico" href="./img/aaa.ico"/>
</head>
<body>
</body>
</html>
5. 文本标签
- 如果需要在网页中显示文字，一般不直接将文字写body中，而是根据这个文字的功能找到对应的标签
1）标题标签
<h1>我是标题1</h1>
<h2>我是标题2</h2>
<h3>我是标题3</h3>
<h4>我是标题4</h4>
<h5>我是标题5</h5>
<h6>我是标题6</h6>
2）段落标签
-
p标签：双标签，保证一个段落对应一个p标签，一个标签占一行
<p>
一花独放不是春，百花齐放春满园
</p>
<p>hello</p>
<p>world</p>
3）font标签
<font>性别</font>
<font>男</font>
<font>女</font>
4）文字效果相关标签
- 在HTML中直接敲空格、缩进是无效的
-
<br/>标签 ：单标签，往网页中的内容强制换行
-
：一个像素(一个" "代表空一个像素)
-
  ：一个空格
-
<b></b>标签 ：加粗
-
<strong></strong>标签 ：加粗(有强调的意义)
-
<i></i>标签 ：倾斜
-
<em></em>标签 ：倾斜(有强调的意义)
6. 列表标签
1）无序列表(ul)
-
ul 标签：代表列表容器，是一个整体
-
li 标签：列表中的元素
<ul>
<li>Python</li>
<li>H5</li>
<li>Java</li>
<li>Testing</li>
</ul>
2）有序列表(ol)
-
ol 标签：代表列表容器，是一个整体
-
li 标签：列表中的元素
<ol>
<li><a href="">挑选小龙虾</a></li>
<li>清理小龙虾</li>
<li>煮小龙虾</li>
</ol>
3）自定义列表(dl)
-
dl标签：代表列表容器，是一个整体
-
dt标签：小分类标签(名词)
-
dd标签：小分类下面的元素(解释)
<dl>
<dt>四川</dt>
<dd>成都</dd>
<dd>绵阳</dd>
<dd>眉山</dd>
<dt>辽宁</dt>
<dd>大连</dd>
<dd>沈阳</dd>
<dd>盘锦</dd>
</dl>
7. 图片和超链接
1）图片标签(img)
- 单标签，默认情况下一行可以显示多张图片
-
src属性：设置图片地址/路径，可以是本地路径也可以是网络地址
-
title属性：设置图片标题（当鼠标停留在图片上才会显示出来）
-
alt属性：图片加载失败的时候的提示信息
<img src="img/jd_logo.ico" title="路飞" alt="图片不存在！"/>
<img title="百度" src="https://www.baidu.com/img/bd_logo1.png"/>
2）超链接(a)
- 双标签
-
href属性：跳转的目的地
a. 网址：点击超链接直接加载网址对应的网页
b. 本地html文件地址：点击超链接直接加载本地html文件对应的网页
c. # ：刷新
d. 选择器：让当前页面滚动到指定的位置
-
target属性：跳转方式
a. _self ：在当前页面中加载新的网页(默认值)
b. _blank ：在新的页面中加载新的网页
<a href="#p1" id="top">第1组</a><br />
<a href="#p2">第2组</a><br />
<a href="#p3">第3组</a><br />
<a href="#p4">第4组</a><br />
<p id="p1">第一组图片</p>
<img src="img/luffy.jpg" title="路飞" alt="图片不存在！"/>
<img title="百度" src="https://www.baidu.com/img/bd_logo1.png"/>
<br />
<p id="p2">第二组图片</p>
<img src="img/luffy1.png" title="路飞" alt="图片不存在！"/>
<img title="百度" src="https://www.baidu.com/img/bd_logo1.png"/>
<br />
<p id="p3">第3组图片</p>
<img src="img/luffy2.png" title="路飞" alt="图片不存在！"/>
<img title="百度" src="https://www.baidu.com/img/bd_logo1.png"/>
<br />
<p id="p4">第4组图片</p>
<img src="img/jd_logo.ico" title="路飞" alt="图片不存在！"/>
<img title="百度" src="https://www.baidu.com/img/bd_logo1.png"/>
<br />
<!--加载网页-->
<a href="https://www.baidu.com" target="_blank">百度一下</a>
<a href="https://www.baidu.com"><img src="https://www.baidu.com/img/bd_logo1.png"/></a>
<br />
<!--加载本地html文件-->
<a href="03-列表标签.html">列表</a>
<!--刷新当前网页-->
<a href="#">刷新</a>
<!--页面内跳转-->
<a href="#top">回到顶部</a><br />
8. 表格标签
1）table标签（代表表格整体）
-
cellspacing属性：设置表格中单元格和单元格以及单元格和表格表框的间距
-
cellpadding属性：设置单元格中的内容到单元格(上下左右)边框之间的距离
-
bgcolor属性：设置整个表格背景颜色(包含单元格的部分)
-
width属性：设置整个表格的宽度
-
height属性：设置整个表格的高度
-
align属性：center(居中)，left(左对齐)，right(右对齐)；让整个表格在它的父标签里面居中、居左或者居右
-
border属性：设置单元格边框的宽度
-
bordercolor属性：单元格边框的颜色
2）tr标签（代表表格中的一行）
-
bgcolor属性：设置一行中所有单元格的背景颜色
-
height属性：设置一行的高度
-
align属性：让一行中所有单元格的内容在单元格中居中、居左或者居右
3）td标签（代表表格中的一个单元格）
-
bgcolor属性：设置指定单元格的背景颜色
-
width属性：设置td所在的列的宽度
-
align属性：让当前单元格中的内容在单元格中居中、居左或者居右
<table border="2" bordercolor="red" cellspacing="0" align="center">
<!--第一行-->
<tr bgcolor="white" height="40" align="center">
<td width="120">第1行第1列</td>
<td width="150" bgcolor="purple">第1行第2列</td>
<td width="200">第1行第3列</td>
</tr>
<!--第二行-->
<tr bgcolor="greenyellow" height="80">
<td>第2行第1列</td>
<td align="right">第2行第2列</td>
<td>第2行第3列</td>
</tr>
<!--第三行-->
<tr bgcolor="pink" height="80">
<td>第3行第1列</td>
<td>第3行第2列</td>
<td>第3行第3列</td>
</tr>
<!--第四行-->
<tr bgcolor="orange" height="80">
<td>第4行第1列</td>
<td>第4行第2列</td>
<td>第4行第3列</td>
</tr>
</table>
4）补充：细线表格
- 设置整个的table的背景颜色是边框线的颜色
- 设置每个单元格的颜色和边框线的颜色不一样
- 设置单元格和单元格的间距(cellspacing)为1
<table cellspacing="1" bgcolor="red" cellpadding="20" width="1000" height="500">
<!--第一行-->
<tr bgcolor="white">
<td>第1行第1列</td>
<td bgcolor="purple">第1行第2列</td>
<td>第1行第3列</td>
</tr>
<!--第二行-->
<tr bgcolor="greenyellow">
<td>第2行第1列</td>
<td>第2行第2列</td>
<td>第2行第3列</td>
</tr>
<!--第三行-->
<tr bgcolor="pink">
<td>第3行第1列</td>
<td>第3行第2列</td>
<td>第3行第3列</td>
</tr>
<!--第四行-->
<tr bgcolor="orange">
<td>第4行第1列</td>
<td>第4行第2列</td>
<td>第4行第3列</td>
</tr>
</table>
9. 复杂表格
-
colspan属性：列合并
-
rowspan属性：行合并
<table cellspacing="0" border="1" bordercolor="black" width="1000" height="500">
<!--第1行-->
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
<!--第2行-->
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
<!--第3行-->
<tr>
<td></td>
<td colspan="2"></td>
<td rowspan="3"></td>
<td colspan="2" rowspan="3"></td>
</tr>
<!--第4行-->
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<!--第5行-->
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<!--第6行-->
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<!--第7行-->
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
