HTML：超文本标记语言
超文本：比普通文本功能更加强大，可以添加各种样式
标记语言：通过一组标签，来对内容将进行描述。标签分为开始标签和结束标签 ：<关键字>
1.用txt保存html时在另存为里要选择这个才不会出现乱码
2.案例一：
<h1>静夜诗</h1> <b><i>--李白</i></b><br/> <p>床前明月光</p> <p>疑是地上霜</p> <p>举头望明月</p> <p>低头思故乡</p>
<h1>是标题1的标签同样的还有<h2>..<h6>，一般使用标签有开始标签和结束标签，</h1>是结束标签
<b>是粗体文本
<i>是斜体
<br>是换行符， <br> 标签是空标签（意味着它没有结束标签，因此这是错误的：<br></br>）。在 XHTML 中，把结束标签放在开始标签中，也就是 <br />。
<p>标记了一个段落
查看html的标签： https://www.w3school.com.cn/tags/tag_p.asp
3.案例二（hello world）
<!DOCTYPE html>
<!--
1.上面是一个文档声明，说明遵从html5
2.根标签 html
3. html文件主要包含两部分，头部分和体部分
头部分主要是用来放置一些页面信息，体部分主要来放置我们的html页面内容
4.通过标签来对内容进行描述，标签同时都是由开始标签和结束标签组成
5.标签不区分大小写，官方建议使用小写
-->
<html>
<head>
<!-- meta放置网站的配置信息， -->
<!-- 下面这个是指定浏览器打开页面的编码方式,utf-8编码可以显示中文-->
<meta charset="utf-8" />
<!-- 1.ctrl+/ 可以快速写注释
2.title 是指定网站标题
3.ctrl+r快速运行
-->
<title>入门案例01</title>
</head>
<body>
hello world !
</body>
</html>
4.案例三：文字
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>唐诗三百首</title>
</head>
<body>
<h3>孟浩然</h3>
<!-- <hr>是水平分割线 -->
<hr/>
<!--
font标签常用属性：
color :颜色
size：字体大小 取值范围1-7
face: 字体样式
<标签 属性名称 = "属性的值 ">
eg:
我要<font color="red"size="1"face="楷体">回家</font><br/>
-->
<p>
<font color = "red"><b><i>春</i></b></font>眠不觉晓
</p>
<p>
<!-- <strong>带语义的标签，搜索引擎更容易接受这个标签
比如给盲人阅读时，strong会加重读，而<b>也不会加重读
-->
<strong>处处闻啼鸟</strong>
</p>
<p>
<!-- <em>带语义的斜体 -->
<em>夜来风雨声</em>
</p>
<p>
花落知多少
</p>
</body>
</html>
5. 案例四：图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
img常用属性：
src : 指定图片路径
width : 指定图片宽度
height: 图片高度
如果只指定宽度或者高度其中一个，就会有等比的缩放
alt : 文件加载失败时的提示信息
-->
<img src="../img/a.jpg" width="300px" alt="这张图片可能有问题">
</body>
</html>
6.路径问题
../ 表示当前文件所在的目录的上一级目录
../../上上级
./ 表示当前文件所在的目录(可以省略)
7.案例五：友情链接
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 列表标签： 无序列表:ul li列表项 type 属性 ：小圆圈，小方块，默认小黑点 有序列表 ol type属性： 指定序号的类型 start : 从几开始，必须得写数字 --> <!-- 超链接标签 <a>标签定义超链接，其最主要的属性为href属性 <a href ="" target = " " ></a> href指定跳转位置 target以什么方式打开：(取值：_self 覆盖当前选项卡、_blank重新打开一个选项卡) 网址还得加http://（需要加上http协议） 不能只写www. --> <ul type="circle"> <li><a href ="http://www.baidu.com">百度</a></li> <li><a href ="http://www.weibo.com"target="_self">新浪微博</li> </ul> <hr/> <ol type ="a" start="2"> <li><a href ="http://www.baidu.com">百度</a></li> <li><a href ="http://www.weibo.com"target="_self">新浪微博</li> </ol> </body> </html>
8.案例五：表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
table
常用属性：
border:指定边框
width: 宽度
height: 高度(比较少指定高度)
bgcolor: 背景色
align : 对齐方式
colspan: 跨列
rowspan: 跨行
tr 行标签
td 列标签
-->
<table border="1px" width = "400px" bgcolor="yellow" align="center">
<tr bgcolor="red" align="center">
<!-- ctrl +shfit +r 可以快速复制 -->
<td colspan="2">11</td>
<!-- 占了谁的格子就要把谁给删掉要不然会突出qu
<td>12</td>
-->
<td>13</td>
<td>14</td>
</tr>
<tr>
<!-- ctrl +shfit +r 可以快速复制 -->
<td bgcolor="pink" align="center">21</td>
<td colspan="2"rowspan="2">
<!-- 表格里面嵌套表格 -->
<table border="1px" width="100%">
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
</td>
<td>24</td>
</tr>
<tr>
<!-- ctrl +shfit +r 可以快速复制 -->
<td>31</td>
<td>34</td>
</tr>
<tr>
<!-- ctrl +shfit +r 可以快速复制 -->
<td>41</td>
<td>42</td>
<td>43</td>
<td rowspan="2">44</td>
</tr>
<tr>
<!-- ctrl +shfit +r 可以快速复制 -->
<td>51</td>
<td>52</td>
<td>53</td>
<!-- 占了谁的格子就要把谁给删掉要不然会突出qu
<td>54</td>
-->
</tr>
</table>
</body>
</html>
9.案例六：综合案例（网站首页）
<!-- 一开始要用border来调试，弄完了删掉 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
1. 创建一个8行一列的表格
2. 第一部份: LOGO部分: 嵌套一个一行三列的表格
3. 第二部分: 导航栏部分 : 放置5个超链接
4. 第三部分: 轮播图
5. 第四部分: 嵌套一个三行7列表格
6. 第五部分: 直接放一张图片
7. 第六部分: 抄第四部分的
8. 第七部分: 放置一张图片
9. 第八部分: 放一堆超链接
-->
<table width="100%">
<!--第一部份: LOGO部分: 嵌套一个一行三列的表格 -->
<tr>
<td>
<table width="100%">
<tr>
<td>
<img src="../img/logo2.png"/>
</td>
<td>
<img src="../img/header.jpg"/>
</td>
<td align="center">
<!-- #号表示默认不跳转去哪里（占位符） -->
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</td>
</tr>
</table>
</td>
</tr>
<!-- 第二部分: 导航栏部分 : 放置5个超链接 -->
<tr>
<td bgcolor="black" height="50px">
<a href="#"><font color="white">首页</font></a>
<a href="#"><font color="white">手机数码</font></a>
<a href="#"><font color="white">鞋靴箱包</font></a>
<a href="#"><font color="white">电脑办公</font></a>
<a href="#"><font color="white">香烟酒水</font></a>
</td>
</tr>
<!-- 第三部分: 轮播图 -->
<tr>
<td>
<img src="../img/1.jpg" width="100%">
</td>
</tr>
<!-- 第四部分: 嵌套一个三行7列表格 -->
<tr>
<td>
<table width="100%" height="500px">
<tr >
<td colspan="7">
<h3>最新商品<img src="../img/title2.jpg" /></h3>
</td>
</tr>
<tr align="center">
<!-- 左边大图 -->
<td rowspan="2" width="206px" height = "480px">
<img src="../products/hao/big01.jpg" />
</td>
<td colspan="3" heigth="240">
<img src="../products/hao/middle01.jpg" width="100%" height="100%"/>
</td>
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣机</p>
<p><font color="red">$800</font></p>
</td>
<td>
<img src="../products/hao/small01.jpg" />
<p>榨汁机</p>
<p><font color="red">$200</font></p>
</td>
<td>
<img src="../products/hao/small03.jpg" />
<p>电饭煲</p>
<p><font color="red">$500</font></p>
</td>
</tr>
<tr align="center">
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣机</p>
<p><font color="red">$800</font></p>
</td>
<td>
<img src="../products/hao/small01.jpg" />
<p>榨汁机</p>
<p><font color="red">$200</font></p>
</td>
<td>
<img src="../products/hao/small03.jpg" />
<p>电饭煲</p>
<p><font color="red">$500</font></p>
</td>
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣机</p>
<p><font color="red">$800</font></p>
</td>
<td>
<img src="../products/hao/small01.jpg" />
<p>榨汁机</p>
<p><font color="red">$200</font></p>
</td>
<td>
<img src="../products/hao/small03.jpg" />
<p>电饭煲</p>
<p><font color="red">$500</font></p>
</td>
</tr>
</table>
</td>
</tr>
<!-- 第五部分: 直接放一张图片 -->
<tr>
<td>
<img src="../products/hao/ad.jpg" width="100%"/>
</td>
</tr>
<!-- 第六部分: 抄第四部分的 -->
<tr>
<td>
<table width="100%" height="500px">
<tr >
<td colspan="7">
<h3>热卖商品<img src="../img/title2.jpg" /></h3>
</td>
</tr>
<tr align="center">
<!-- 左边大图 -->
<td rowspan="2" width="206px" height = "480px">
<img src="../products/hao/big01.jpg" />
</td>
<td colspan="3" heigth="240">
<img src="../products/hao/middle01.jpg" width="100%" height="100%"/>
</td>
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣机</p>
<p><font color="red">$800</font></p>
</td>
<td>
<img src="../products/hao/small01.jpg" />
<p>榨汁机</p>
<p><font color="red">$200</font></p>
</td>
<td>
<img src="../products/hao/small03.jpg" />
<p>电饭煲</p>
<p><font color="red">$500</font></p>
</td>
</tr>
<tr align="center">
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣机</p>
<p><font color="red">$800</font></p>
</td>
<td>
<img src="../products/hao/small01.jpg" />
<p>榨汁机</p>
<p><font color="red">$200</font></p>
</td>
<td>
<img src="../products/hao/small03.jpg" />
<p>电饭煲</p>
<p><font color="red">$500</font></p>
</td>
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣机</p>
<p><font color="red">$800</font></p>
</td>
<td>
<img src="../products/hao/small01.jpg" />
<p>榨汁机</p>
<p><font color="red">$200</font></p>
</td>
<td>
<img src="../products/hao/small03.jpg" />
<p>电饭煲</p>
<p><font color="red">$500</font></p>
</td>
</tr>
</table>
</td>
</tr>
<!-- 第七部分: 放置一张图片 -->
<tr>
<td>
<img src="../img/footer.jpg" width="100%" />
</td>
</tr>
<!-- 第八部分: 放一堆超链接 -->
<tr align="center">
<td>
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明</a>
<br/>
copyright @小菜鸡的努力 版权所有
</td>
</tr>
</table>
</body>
</html>
10.案例七：注册页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
form 表单标签
action:提交的地址
method：
get方式 默认提交方式，会将参数拼接在后面，有大小限制（eg:4k）
post方式 会将参数封装在请求体中，没有get上面的限制，单独打开不会报错
input :
type ：指定输入项的类型
text:文本
password:密码
radio:单选按钮
checkbox:复选框
file:上传文件
submit:提交按钮
button：普通按钮
reset：重置按钮
hidden:隐藏域
date:日期类型
tel:手机号（手机上会有弹窗)
number:只能输入数字
name: 在表单提交的时候，当作参数的名称
id :给输入项取名字，以便于后期找到并且操作它
placeholder:框框里面的提示语句
textarea:文本域 ，可以输入一个文本
cols:指定宽度
rows：指定的是高度
select： 下拉列表
option：选择项
-->
<form action="../04-网站首页/网站首页.html" method="post">
<!--hidden 隐藏域
主要是用来存放页面上一些id信息
主要用来做校验
-->
<input type="hidden" value="asdfa" name="uid" />
<!-- input标签
name属性，会在上面的地址栏中出现
eg:name="username" 其中引号内的可以随便写
-->
<!-- 文本输入框 -->
用户名：<input type="text" name="username" id="username" placeholder="请输入用户名" /><br/>
<!-- 密码框 -->
密码：<input type="password" placeholder="请输入密码"/><br/>
确认密码：<input type="password" /><br/>
邮箱：<input type="text" /><br/>
<!-- 限定只有数字 -->
手机号码：<input type="number" /><br/>
<!-- 输入文件框 -->
投降：<input type="file"><br/>
<!-- 如果希望是单选效果就要给所有的radio取一个相同的名字
让他们是一组，
如果不这样的话，就会可以多选
如下面的name="sex"这个名字是可以随便取的，但是得相同
-->
性别：<input type="radio" name="sex"/>男
<input type="radio" name = "sex"/>女 <br/>
<!-- 正方形的选择框 -->
爱好：<input type="checkbox" />抽烟
<input type="checkbox" />喝酒
<input type="checkbox" />烫头
<input type="checkbox" />学习
<br/>
<!-- 输入大的文本框，cols控制的是横着，rows控制的是竖着 -->
择偶要求：
<textarea cols="40" rows="4"></textarea>
<br/>
<!-- 下拉列表 -->
籍贯：
<select>
<option>请选择</option>
<option>湖北</option>
<option>江西</option>
<option>广东</option>
<option>广西</option>
<option>湖南</option>
</select>
<br/>
<!-- 下拉选时间 -->
出生日期：
<input type="date" /><br/>
验证码：<input type="text"><br/>
<!-- 提交 value是显示文本的 -->
<input type="submit" value="注册">
<input type="button" value="普通按钮">
<input type= "reset" value="重置按钮">
<form/>
</body>
</html>
如果method不选post，可以看到其地址可以包含输入的信息：
11.案例八：网页注册页面综合设计
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
创建一个五行一列的表格
1.logo部分
2.导航栏
3.注册部分
4.页面图片
5.网站声明信息
-->
<table width="100%">
<!-- 第一部分 logo -->
<tr >
<td>
<table width="100%">
<tr>
<td>
<img src="../img/logo2.png" />
</td>
<td>
<img src="../img/header.jpg" />
</td>
<td>
<a href ="#" ><font color="skyblue">登录</a>
<a href ="#" ><font color="skyblue">注册</a>
<a href ="#" ><font color="skyblue">购物车</a>
</td>
</tr>
</table>
</td>
</tr>
<!-- 第二部分导航栏 -->
<tr>
<td bgcolor="black" height="50px">
<a href="#" > <font color="white">首页</font></a>
<a href="#" > <font color="white">手机数码</font></a>
<a href="#" > <font color="white">电脑办公</font></a>
<a href="#" > <font color="white">香水箱包</font></a>
<a href="#" > <font color="white">一帆风顺</font></a>
</td>
</tr>
<!-- 注册部分 -->
<tr>
<td background="../image/regist_bg.jpg" height="600px">
<table border="5px" width="60%" height="80%" align="center" bgcolor="white">
<tr>
<td>
<table width="30%" height="80%" align="center">
<tr>
<td colspan="2">
<font color="skyblue" size="3">会员注册</font> USER REGISTER
</td>
</tr>
<tr>
<td>用户名</td>
<td>
<input type="text" placeholder="请输入用户名"><br/>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password"placeholder="请输入密码" />
</td>
</tr>
<tr>
<td>确认密码</td>
<td>
<input type="password"placeholder="请确认密码" />
</td>
</tr>
<tr>
<td>Email</td>
<td>
<input type="text" placeholder="Email" />
</td>
</tr>
<tr>
<td>姓名</td>
<td>
<input type="text" placeholder="请输入姓名" />
</td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex"/>男
<input type="radio" name="sex"/>女
</td>
</tr>
<tr>
<td>出生日期</td>
<td>
<input type="date" />
</td>
</tr>
<tr>
<td>验证码</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="注册" >
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- 页面图片 -->
<tr>
<td>
<img src="../img/footer.jpg" />
</td>
</tr>
<!-- 网页声明信息 -->
<tr align="center">
<td>
<a href="#" > <font color="skyblue">关于我们</font></a>
<a href="#" > <font color="skyblue">联系我们</font></a>
<a href="#" > <font color="skyblue">招贤纳士</font></a>
<a href="#" > <font color="skyblue">法律声明</font></a>
<a href="#" > <font color="skyblue">友情链接</font></a>
<a href="#" > <font color="skyblue">支付方式</font></a>
<a href="#" > <font color="skyblue">配送方式</font></a>
<a href="#" > <font color="skyblue">服务声明</font></a>
<a href="#" > <font color="skyblue">广告声明</font></a>
<br/>
copyright @小菜鸡的努力
</td>
</tr>
</table>
</body>
</html>
12.案例九 ：网页后台（把几个网页整合起来）
一：后台页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<!--
框架标签
使用了frameset 就要把body删掉
按照列来分： cols
按照行来分： rows
-->
<frameset rows="15%,*">
<frame src="aaa.html" />
<frameset cols="15%,*">
<frame src="bbb.html" />
<frame src="ccc.html" name="rightframe" />
</frameset>
</frameset>
</html>
上面的ccc.html后面写了一个name="rightframe"用来跳转
二：
aaa.html、ccc.html中没啥就是改了个颜色、data.html中存放了一些数据
三：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body bgcolor="pink">
<a href="data.html" target="rightframe">收件箱</a><br />
<a href="#">垃圾箱</a><br />
<a href="#">发送箱</a><br />
</body>
</html>
<a href="data.html" target="rightframe">收件箱</a><br />
点击网页后台.html的收件箱，从data.html中调取数据，然后显示在网页后台.html中的ccc.html那一块里面（通过rightframe来找到的）
效果：（网页后台.html）点击前：
点击后：
相当于右下角从333.html转到了data.html
来源：oschina
链接：https://my.oschina.net/u/4433424/blog/3161805