网页，是网站中的一个页面，通常网页是构成网站的基本元素，是承载各种网站应用的平台。通俗的说，网站就是由网页组成的。通常我们看到的网页都是以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 /><!-- 用法3 跳到 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 和postenctype:表示是表单提交的类型默认值：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>
文章转载自java小小小小栈，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。
