网页，是网站中的一个页面，通常网页是构成网站的基本元素，是承载各种网站应用的平台。通俗的说，网站就是由网页组成的。通常我们看到的网页都是以htm或html后缀结尾的文件，俗称 HTML 文件。
HTML 全称，Hyper Text Markup Language（超文本标记语言）。
<!DOCTYPE html>
<html> <!-- 根标签 -->
<head> <!-- 网页头标签 -->
<meta charset="utf-8"> <!-- 网页编码 -->
<title>标题</title>
</head>
<!--
text 设置网页正文中所有文字的颜色
bgcolor 设置网页的背景色
background 设置网页的背景图
-->
<body text="#0f0"> <!-- 网页正文 -->
hello sm<br>
hello sm<br>
hello sm<br>
hello sm<br>
<!-- 相比 br换行， p 标签段与段之间有空行 -->
<p>hello sm</p>
<p>hello sm</p>
<p>hello sm</p>
<p>hello sm</p>
<!--水平线标签 -->
<hr width="500px" color="blue" size="5" align="left" />
<!-- 行级块标签，独占一行，换行 -->
<div>hello sm</div>
<!-- 行内块标签，所有内容都在同一行 -->
hello sm <span style="color:red">hello sm</span> hello sm
<!-- 字体标签 -->
<font size="7" color="red" face="微软雅黑">字体标签</font>
<!-- 格式化标签 -->
<b>内容加粗</b>
<strong>强调加粗</strong><br />
<i>斜体</i> <em>强调的斜体</em><br />
<small>小号字体</small>
<big>大号字体</big>
<sub>下标字体</sub>
<sup>上标标字体</sup>
<del>删除线</del>
<!-- 内容标题 -->
<h1>超大标题</h1>
<h2>第二大标题</h2>
<h3>第三大标题</h3>
<h4>第四大标题</h4>
<h5>第五大标题</h5>
<h6>第六大标题</h6>
<!-- 无序列表 -->
<ul type="square">
<li>hello sm</li>
<li>hello sm</li>
<li>hello sm</li>
</ul>
<!-- 有序列表 -->
<ol type="1" start="6">
<li>hello sm</li>
<li>hello sm</li>
<li>hello sm</li>
</ol>
</body>
</html>
图形标签、链接标签用法。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 超链接 -->
<a href="../img/004.png">跳转到内部页面</a>
<!-- 用法2：加target属性 _blank: 在新窗口跳转 默认 _self:在自身窗口跳转 -->
<a href="http://www.baidu.com" target="_self">跳转到百度</a><br />
<!-- 用法2 跳到 name="kk" 的 a标签 -->
<a href="#kk">跳到锚点</a>
<br>
哈哈哈
<!-- 图形标签 align：与图片对齐显示方式 alt：图片未加载时的提示-->
<img src="/Users/mac/Desktop/熊本熊/53395f8e99ce089d7ee52e2f341046b2.jpg" width="300px" height="400px" align="center" alt="图片未加载时的提示">
<br>
哈哈哈
<img src="/Users/mac/Desktop/熊本熊/53395f8e99ce089d7ee52e2f341046b2.jpg" width="300px" height="400px" align="center">
<br>
哈哈哈
<img src="/Users/mac/Desktop/熊本熊/53395f8e99ce089d7ee52e2f341046b2.jpg" width="300px" height="400px" align="center">
<br>
哈哈哈
<img src="/Users/mac/Desktop/熊本熊/53395f8e99ce089d7ee52e2f341046b2.jpg" width="300px" height="400px" align="center">
<br>
哈哈哈
<img src="/Users/mac/Desktop/熊本熊/53395f8e99ce089d7ee52e2f341046b2.jpg" width="300px" height="400px" align="center">
<br>
哈哈哈
<img src="/Users/mac/Desktop/熊本熊/53395f8e99ce089d7ee52e2f341046b2.jpg" width="300px" height="400px" align="center">
<br>
<a name="kk">
哈哈哈
<img src="/Users/mac/Desktop/熊本熊/53395f8e99ce089d7ee52e2f341046b2.jpg" width="300px" height="400px" align="center">
</a>
<br>
哈哈哈
<img src="/Users/mac/Desktop/熊本熊/53395f8e99ce089d7ee52e2f341046b2.jpg" width="300px" height="400px" align="center">
<br>
哈哈哈
<img src="/Users/mac/Desktop/熊本熊/53395f8e99ce089d7ee52e2f341046b2.jpg" width="300px" height="400px" align="center">
<br>
</body>
</html>
表格标签。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- table: 子标签：tr 行 th 列加粗 td 列无加粗
属性：border：边框 cellspacing:单元格间距 ：单元格与单元格间距
cellpadding:内间距：单元格域内容的间距
rowspan: 跨行
colspan: 跨列
-->
<table border="2" cellspacing="0" cellpadding="5px">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td>zs</td>
<td colspan="2">30</td>
<td rowspan="2">删除</td>
</tr>
<tr>
<td>ls</td>
<td>24</td>
<td>女</td>
</tr>
</table>
</body>
</html>
HTML表单标签。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 块级标签(元素)：带回车换行的标签：div、p、br、h1~h6...
行级标签(元素): 不带换行的标签：span、a、img、格式化标签、font...input
-->
<!-- 表单： form标签
action: submit 触发，可以是前端跳转路径，也可以是后台服务器路径
method:请求方式：get 和post
enctype:表示是表单提交的类型
默认值：application/x-www-form-urlencoded 普通表单
multipart/form-data 多部分表单(一般用于文件上传)
-->
<form action="index.html" >
文本输入框:<input type="text" /><br />
密码框:<input type="password" /><br />
单选框：<input type="radio" /><br />
复选框：<input type="checkbox" /><br />
邮箱控件：<input type="email" /><br />
数字控件：<input type="number" /><br />
日期控件：<input type="date" /><br />
日期和时间：<input type="datetime" /><br />
上传控件：<input type="file" /><br />
隐藏控件： <input type="hidden" /><br />
范围控件： <input type="range" /><br />
取色控件：<input type="color" /><br />
<input type="submit" value="提交按钮" /><br />
<input type="button" value="普通按钮" /><br />
<input type="reset" value="重置按钮" /><br />
<input type="image" src="../img/004.png" width="80px" height="40px" value="图片按钮" />
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h2>用户注册</h2>
<form>
用户名:<input type="text" /><br />
密码：<input type="password" /><br />
<!-- 两个单选控件需要在一个组里，才能进行单选，用name分组 -->
性别:<input type="radio" name="sex" />男<input type="radio" name="sex" />女<br />
爱好：<input type="checkbox" />吃 <input type="checkbox" />喝<input type="checkbox" />玩<br />
<!-- multiple="multiple": 显示多列的列表信息 -->
省份：<select>
<option>湖南</option>
<option>湖北</option>
<!--selected="selected":默认选择的属性 -->
<option selected="selected">广东</option>
<option>广西</option>
</select><br>
基本信息：<textarea rows="10" cols="30">我的介绍..</textarea><br />
<input type="submit" value="注册" />
</form>
</body>
</html>
frameset 框架标签。
例子，左边点击链接按钮，右边显示。
<!-- head.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body bgcolor="green">
</body>
</html>
<!-- left_action.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body bgcolor="orange">
<!-- 自定义 target， 链到 frame 标签的 name 属性上-->
<a href="https://www.baidu.com" target="content">百度</a><br>
<a href="https://www.sina.com.cn" target="content">新浪</a>
</body>
</html>
<!-- right_content.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body bgcolor="white">
</body>
</html>
<!-- test.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<!-- rows划分成行
cols划分列
注意： frameset与body不能共存
frame子标签：用于关联不同页面 src属性：用于指定页面路路径；noresize:固定大小
-->
<frameset rows="%20, *">
<frame src="head.html"></frame>
<frameset cols="15%, *">
<frame src="left_action.html"></frame>
<frame src="right_content.html" name="content"></frame>
</frameset>
</frameset>
</html>
CSS ，全称 Cascading Style Sheets 层叠样式表，定义如何显示HTML元素。修饰美化html网页。外部样式表可以提高代码复用性从而提高工作效率。html内容与样式表现分离，便于后期维护。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- 优先级：内联 > (内部==外部,看顺序) -->
<!-- 3.外部样式 -->
<link rel="stylesheet" type="text/css" href="../css/red.css"/>
<!-- 2.内部样式 -->
<style>
h1{
color: green;
font-size: 100px;
font-family: "微软雅黑";
font-style: italic;
}
/* 4.导入样式，不常用 */
@import url("../css/red.css");
</style>
</head>
<body>
<!--1. 内联样式 -->
<h1 style="color: blue;">内容标题1</h1>
</body>
</html>
CSS 选择器。
基本选择器。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/* 选择器的优先级： id>class>标签 */
/* 1.标签选择器 */
h1{
color: red;
}
/* 2.类选择器 */
.myClass{
color: green;
font-size: 100px;
}
/* 3.id选择器*/
#myId{
color: blue;
font-style: italic;
}
</style>
</head>
<body>
<h1 class="myClass" id="myId">内容标题</h1>
</body>
</html>
属性选择器。根据元素的属性及属性值来选择元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/* 选择器[属性=值][属性] */
h1[name="zs"][title]{
color: red;
}
</style>
</head>
<body>
<h1 name="zs" title="tt">标题1</h1>
<h1 name="zs">标题2</h1>
</body>
</html>
伪元素选择器。主要针对 a 标签。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/* 静止状态 */
a:link{
color: red;
}
/*悬浮状态：鼠标放进来 */
a:hover{
color: green;
}
/*触发状态 */
a:active{
color: yellow;
}
/*完成状态 */
a:visited{
color: black;
}
</style>
</head>
<body>
<a href="#"><h1>伪元素选择器</h1></a>
</body>
</html>
层级选择器。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/* 后代选择器：所有后代指定标签都起作用*/
ul a{
color: red;
}
/* 子代选择器：只儿子标签起作用 */
ul>a{
color: orange;
}
/* 相邻兄弟选择器 标签+标签{}: 相邻的兄弟起作用 */
/* 第二行 li 变蓝色 */
#aa+li{
color: blue;
}
/* 第二、三行 li 变蓝色 */
li+li{
color: blue;
}
</style>
</head>
<body>
<ul>
<li id="aa"><a>aaaaa</a></li>
<li><a>bbbbb</a></li>
<li><a>ccccc</a></li>
<a>ddddd</a>
</ul>
</body>
</html>