<b>粗体文字</b>
<em>强调文字</em>
<strong>加强调文字</strong>
<i>斜体显示</i>
<sup>上标</sup>例如：x²
<sub>下标</sub>
<br/>换行
<p>段落标记</p>
<h1>一级标题</h1>
<ul>无序列表（将ul换成ol就变为有序列表，即自动为列表项编号）
<li>无序列表项</li>
<ul>
<li>无序列表项</li>
<li>无序列表项</li>
</ul>
<li>无序列表项</li>
<li>无序列表项</li>
</ul>
..上级目录
../..上级的上级目录
<hr/>显示一条水平线
<a href=”链接” target=_blank>在新窗口打开链接</a>
<a href=”链接” target=_self>在当前窗口打开链接</a>
建立的超链接（可以是网站，也可以是图片，文档等）
<a href=”mailto=邮箱地址”>发邮件给指定邮箱</a>
<img src="../HTML/cswz.jpg" usemap="#pic">
<map id="#pic">
<area shape="rect" coords="0,0,1000,1000" href="http://www.baidu.com/index.html">
</map>
<iframe src="http://www.baidu.com"></iframe>
在当前页面增加小窗口，
<style>
iframe{
width:300px;
height:300px;
border:none;
}
</style>
表格
<table>表示一个表格对象的开始
<tr>表格一行的开始
<td>一行中一个单元格</td>
</tr>表格一行的结束
</table>表示一个表格对象的结束
<table>
<tr><td>AAAAA</td><td>BBBBB</td><td>CCCCC</td></tr>
<tr><td>aaaaa</td><td>bbbbb</td><td>ccccc</td></tr>
</table>
合并单元格
左右合并：需要合并的第一个<td>变为<td colspan=”3”>//3代表合并3个单元格,并将后面两个单元格的<td>标记删除。
上下合并：需要合并的第一个<td>变为<td rowspan=”3”>
<table>
<tr><td>AAAAA</td> <td>BBBBB</td> <td>CCCCC</td></tr>
<tr><td colspan="2">aaaaa bbbbb</td> <td>ccccc</td></tr>
</table>
上下左右合并
表格中<caption><thead><tfoot><tbody>的使用：
<table>
<caption>学生成绩单</caption>
<thead>
<tr>
<th>姓名</th><th>性别</th><th>成绩</th>
</tr>
</thead>
<tfoot>
<tr>
<td>平均分</td><td colspan="2">540</td>
</tr>
</tfoot>
<tbody>
<tr><td>张三</td><td>男</td><td>500</td></tr>
<tr><td>李四</td><td>男</td><td>500</td></tr>
<tr><td>王二</td><td>男</td><td>80</td></tr>
</tbody>
</table>
使用表单
用于收集浏览者的信息，标记为<form></form>
<form action=”url” method=”get|post” enctype=”mine”></form>
1、单行文本输入框text
<form>
登陆信息<br>
用户名称
<input type="text" name="user"><br>
用户密码
<input type="password" name="password" size=”20” maxlength=”15”><br>
<input type="submit" value="登录">
</form>
size定义文本框宽度，单位为单个字符宽度
maxlength定义输入最大字符长度
2、多行文本输入框textarea
<form>
输入您的建议：<br>
<textarea name="yoursuggestion" cols="20" rows="5" wrap="输入内容过多"></textarea>
<br>
<input type="submit" value="提交">
</form>
name定义文本框的名称，必须是独一无二的；
cols定义多行文本框的宽度；
rows定义多行文本框的高度。
<input type=”password” name=”” size=”” maxlength=””>
Type=“password”表示密码框
单选按钮radio
name定义单元按钮名称，以组为单位使用；
value定义单选按钮的值。
<form>
<input type="radio" name="book" value="book1">JAVA程序设计<br>
<input type="radio" name="book" value="book2">PYTHON语言程序设计<br>
<input type="radio" name="book" value="book3">数据库系统原理<br>
</form>
复选框
checkbox
<form>
<input type="checkbox" name="book" value="book1">JAVA程序设计<br>
<input type="checkbox" name="book" value="book2">PYTHON语言程序设计<br>
<input type="checkbox" name="book" value="book3">数据库系统原理<br>
</form>
选择列表标记selectmultiple表示多选，去掉表示单选,selected表示默认已选择。
<form>
<select name="fruit" size="3" multiple>
<option value="book1" selected>java开发
<option value="book2">python开发
<option value="book3">python2开发
<option value="book4">python3开发
<option value="book5">python4开发
<option value="book6">python5开发
</select>
</form>
普通按钮botton
<input type=”button” name=”普通按钮名称” value=”按钮显示文字” onclick=”单击行为，可通过指定脚本函数定义”>
提交按钮submit
<input type=”submit” value=”提交”>
重置按钮reset
<input type=”reset” name=”重置按钮名称” value=”按钮显示内容”>
红色部分可省略，点击重置按钮即可清空<form></form>中输入框中内容。
url和email属性
<form>
请输入网址：<br>
<input type="url" name="userurl">
</form>
<form>
请输入邮箱地址：<br>
<input type="email" name="user_email">
<input type="submit" value="提交">
</form>
date和times
<form>
请选择购买商品的日期：<br>
<input type="date" name="user_date">
</form>
number属性
<form>
此网站我来过<input type="number" name="user_num" max="9" min="0">了！
</form>
range属性
<form>
此网站我来过<input type="range" name="user_ran" max="9" min="0">了！
</form>
required属性输入域不能为空
<form>
此网站我来过<input type="password" name="userpass" required="required">了！
</form>
文件上传框
<form>
<input type="file" name="fileup" size="30" maxlength="50">
</form>
CSS3的使用方法
1、行内样式：不经常使用
<p style="color: red; font-size: 20px; text-decoration: underline; text-align: center">显示段落</p>
2、内嵌样式：常用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>行内字样</title>
<style>
p {
color: red;
font-size: 20px;
text-decoration: underline;
text-align: center;
font-style:italic;
}
</style>
</head>
<body>
<p>显示段落</p>
</body>
</html>
font-weight:bolder:加粗
3、链接样式
Practice.css
@charset "UTF-8";
h1{text-align:center;}
p{font-size:29px;text-align:center;font-style:italic}
**************************************************************
Practice.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>链接样式</title>
<link rel="stylesheet" type="text/css" href="Practice.css">
</head>
<body>
<h1>CSS学习</h1>
<p>此段落使用链接样式修饰</p>
</body>
</html>
4、导入样式：可同时导入多个CSS文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>链接样式</title>
<style>
@import "Practice.css"
</style>
</head>
<body>
<h1>CSS学习</h1>
<p>此段落使用链接样式修饰</p>
</body>
</html>
优先级：行内样式>内嵌样式>链接样式>导入样式
CSS3选择器
1、标记选择器
P,td{font-size:20px;}
2、类选择器
.rd{color:red;} rd为自己命名的类的名称
使用:<p class=”rd”></p>
3、ID选择器:不能用于多个标记
#fontstyle{
color:red;
font-weight:bold;
Font-size:large;
}
使用：<p id=”fontstyle”></p>
4、全局选择器:应用于一个页面的所有标记
*{
color:red;
Font-size:20px;
}
5、组合选择器
p.firstpar{
color:red;
}
使用：<p class=”firstpar”></p>
6、继承选择器
h1{color:red;text-decoration:underline;}
h1 strong{color:#004400;font-size:40px;}
使用：<h1>测试CSS的<strong>继承</strong>效果</h1>
7、伪类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>链接样式</title>
<style>
a:link{color:red} //未访问的链接
a:visited{color:green} //已访问的链接
a:hover{color:blue} //鼠标移到链接上
a:active{color:orange} //选定的链接
</style>
</head>
<body>
<a href="">链接到本页</a>
<a href="http://www.baidu.com">连接到百度</a>
</body>
</html>
8、属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>链接样式</title>
<style>
[align]{color:red;}
[align="left"]{font-size:20px;font-weight:bolder;}
[lang^="en"]{color:blue;text-decoration:underline;}
[src$="gif"]{border-width:5px;boder-color:#ff9900;}
</style>
</head>
<body>
<p align=center>这里使用属性定义样式</p>
<p align=left>这里使用属性定义样式</p>
<p lang="en-us">此处使用属性值前缀定义样式</p>
<img src="cswz.gif" border="1">
</body>
</html>
9、结构伪类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>链接样式</title>
<style>
tr:nth-child(even){background-color:#f5fafe;}
tr:last-child{font-size:20px;}
</style>
</head>
<body>
<table border=1 width=80%>
<th>姓名</th><th>编号</th><th>性别</th>
<tr><td>张三</td><td>001</td><td>男</td></tr>
<tr><td>张三</td><td>001</td><td>男</td></tr>
<tr><td>张三</td><td>001</td><td>男</td></tr>
<tr><td>张三</td><td>001</td><td>男</td></tr>
<tr><td>张三</td><td>001</td><td>男</td></tr>
<tr><td>张三</td><td>001</td><td>男</td></tr>
</table>
</body>
</html>
10、UI元素状态伪类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>链接样式</title>
<style>
input:enabled{border:1px dotted #666;background:blue;}
input:disabled{border:1px dotted #999;background:green;}
</style>
</head>
<body>
<center>
<h3 align=center>用户登陆</h3>
<form method="post" action="">
用户名：<input type="text" name="name"><br>
密 码:<input type="password" name="pass" disabled="disabled"><br> //密码框无法输入
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
</center>
</body>
</html>
字体属性
字体Font-family:华文彩云，黑体，宋体，“times new roman”；//黑体、宋体为备选字体，当当前浏览器无法显示花文彩云时依次向后选择字体。
字号Font-size:数值|small|large|50%...
字体风格Font-style:normal|italic|oblique...
加粗字体font-weight：100-900(100至900)|bold...
小写字母转化为大写字母font-variant:...
字体复合属性font:...
字体颜色color
阴影文本text-shadow:length length opacity color
依次表示阴影的水平位移，垂直位移，阴影半径，阴影颜色。
<body>
<p align="center" style="text-shadow:10px 2px 6px blue">我是一行字</p>
</body>
溢出文本text-overflow
控制换行word-wrap
保持字体尺寸不变font-size-adjust
段落属性
单词间隔：用于设置词与词之间的间距word-spacing:normal|length(正值或负值)
<body>
<p style="word-spacing:30px">这里是一行字</p>
<p style="word-spacing:30px">这 里 是 一 行 字</p>
<p style="word-spacing:30px">times is going</p>
<p style="word-spacing:normal">times is going</p>
<p style="word-spacing:normal">timesisgoing</p>
</body>
字符间距letter-spacing:normal|length(允许为负值)
<body>
<p style="letter-spacing:30px">这里是一行字</p>
<p style="letter-spacing:normal">这里是一行字</p>
<p style="letter-spacing:30px">times is going</p>
<p style="letter-spacing:normal">times is going</p>
</body>
文字修饰Text-decoration
垂直对齐方式vertial-align
文本转换text-transform
水平对齐方式text-align
文本缩进text-indent
文本行高（行间距）line-height
文本反排unicode-bidi和direction
表格基本样式
表格边框样式border-collapse:seprate(默认值，分开)|collapse（不分开）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>链接样式</title>
<style>
.tablelist{
color:green;
border:2px solid blue;
border-collapse:collapse;
}
.tablelist td{
color:red;
border:1px solid red;
border-collapse:collapse;
}
.tablelist caption{
color:blue;
border:3px solid yellow;
border-collapse:collapse;
}
</style>
</head>
<body>
<table class="tablelist">
<caption calss="tablelist">2019-10-1标题</caption>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
</table>
</body>
</html>
表格边框宽度border-width:6px;
边框颜色：border:1px solid green
背景颜色：background-color:green
