<!--一个网页的基本结构写法-->
<!doctype html> <html> <head>//头部 <title>标题</title> </head> <body>主体内容……</body> </html>
<head>……<head/>(头部)<title>……<title>(标题)<body>……</body>(身体)
<h#>标题内容</h#> (#：1~6) <p>字段内容</p> (用于分段) <br>（换行作用） <hr>（水平线） （空格）©（©）
color（颜色）size（厚度）bgColor（背景颜色）background（背景图片）marquee（滑动字幕）
<!--注释内容--> （网页中注释符的写法）
示例：
<!doctype> <html> <head><title>示例</title></head> <body bgcolor="#bbffff"> <h1 align="center">大主宰</h1> <hr size="5px" width="70%" color="bule"> <br> <h2>第一章</h2> <p>这里是第一章……</p> <h2>第二章</h2> <p>这里是第二章……</p> </body> </html>
<ul><li>……</li></ul>（无序列表）<ol><li>……</li></ol>（有序列表）<a href="链接地址">……</a> (导航链接)
片段（把代码复制到body中查看效果）
<nav>
<a href="#">首页</a>
<a href="#">上一页</a>
<a href="#">下一页</a>
</nav>
片段（把代码复制到body中查看效果）
<table border="2"><caption>学员信息</caption>
<tr><th>姓名：</th><th>性别：</th></tr>
<tr><td><i><b>陈扬胜</b></i></td><td><b><i>男</i></b></td></tr>
</table>
<u>……</u>（下划线）<i>……</i>（倾斜）<b>……</b>（加粗） border（边框宽度）width（表格宽度）eight（表格高度）
<table>……</table>（表格）<caption>……</caption>（表格的标题）<th>……</th>（列头单元格）<tr>……</tr>（行）<td>……</td>（列）
<img src="图片文件地址" alt="图片">（alt:图片说明） <audio src="音频文件地址" controls="controls">您的游览器不支持aduio标签</audio>
<video src="视频文件地址" width+"宽" eight="高" controls="controls">您的游览器不支持video标签</video>
（宽、高，替换成数字，controls属性是暂停播放的属性控件）
片段（把代码复制到body中查看效果）
<div> <!--嵌套列表标签的使用例子-->
<ul><li><a href="#">信息</a></li></ul>
<ul><li>姓名：</li><li>性别：</li></ul>
</div>
多行文本代码片段 按钮代码片段
<textarea rows="3" cols="20">……</textarea>（多行文本,3、20参数，根据需求填） <button type="button">点我啊！</button>（按钮）
<select><option value="姓名">陈扬胜</option></select>（创建菜单和选项）
片段（把代码复制到body中查看效果）
<select> <optgroup label="组长"><option value="组长">张健文</option></optgroup> <optgroup label="组员"><option value="组员">陈扬胜</option><option value="组员">肖商富</option><option value="组员">李木炜</option></optgroup> </select>
<form><!--简单表单代码片段--> <label for="txtName">姓名：</label><input type="text" id="txtName"/> </form>
<form><!--组合表单代码片段--> <fieldset><legend>个人信息</legend>姓名：<input type="text" id="txtName"/></fieldset> </form>
选择器 属性 值 属性 值
css基础语法： h1{color:red;font-size:14px;}
<标记名 style="样式规则的集合">网页内容</标记名>
行内样式的定义及应用：
<p style="color:bule;font-size:10pt">css实例</p>
写在<head>里 样式集合（内容由自己定义）
嵌入样式的定义及应用：
<head><style type="text/css">p{color:blue;font-size:20pt;}</style>……</head>
外部样式的应用：
<head><style type="text/css">@import"*.css";</style></head>
（*填样式文件的名字）
外部样式示例：
<!doctype html> <html> <head> <style type="text/css">@import"ys.css"；</style> <title>外部样式示例</title> </head> <body>CSS样式的应用</body></html>
css样式文件的内部结构：
p { text-decoration:blink;<!--文本闪烁--> text-decoration:none;<!--文本去掉下划线--> text-decoration:underline;<!--文本加下划线--> text-decoration:overline;<!文本顶端画下划线> text-decoration:line-through;<!--文本中间加个贯穿线--> text-indent:5em;<!--文本缩进--> background-position:top;<!--图形位置--> word-wrap:break-word;<!--自动换行--> font-family:serif;<!--字体样式--> font-style:italic;<!--字体风格--> font-size:30pt;<!--字体大小--> font-weight:900;<!--字体加粗--> } body { background-image:url(img1.jpg),url(img2.png);;<!--多重背景图片--> }
链接样式属性：
a:link{color:#FF0000;}/*！未被访问时链接的效果*/ a:visited{color:#00FF00;}/*已被访问的链接效果*/ a:hover{color:#FF00FF;}/*！鼠标指针移动到链接上时的效果*/ a:active{color:#0000FF;}/*正在被点击时的链接效果*/ a:link{decoration:none;}/*去掉链接中的下划线*/ <!--当为链接的不同状态设置样式时，请按照以上的次序来写-->
鼠标在字体上滑动停留效果
<marquee onMouseOver="this.stop()" onMouseOut="this.start()"></marquee>
设置链接的背景色
a:link{background-color:#0066FF;}<!--在样式中写-->
设置列表项标志形状
ul{list-style-type:square;}<!--写在样式中-->
设置列表项图像
ul li{list-style-image:url(图像位置)}
表格的宽度和高度
table{100% eight:50px;}<!--两种写法都可以-->
表格文本对齐方式
td{text-align:center;}
表格内边距
td{padding:15px;}
设置链接字体变大效果
a:link{font-size:10px;} a:hover{font-size:15px;}<!--写在样式里-->
折叠边框
table{border-collapse:collapse;}
组选择器
body,h2,p,table,th,td,pre,strong,em{color:gray;}<!--如果你想把多个元素显示为灰色，可以组合选择器，统一写规则-->
包含（后代）选择器
table tr td p{font-size:9pt}
子元素选择器
<!--如果你希望选择只作为h1元素子元素strong元素，可以这样写，这样写的范围缩小了，而且更准确--> h1>strong{color:red;}
后代选择器和子选择器
table td >p
类选择器
相邻兄弟选择器
<style> p+span{ border:1px solid red; background:yelllow; } </style> <div> <p> 我是p </p> <span>我是相邻p标签的span</span> <span>我不是相邻的span</span> </div>
作用范围：选择相邻的两个元素 元素一定要有同一个父级，+后面的元素享受样式。
比如上面只有 ：我是相邻p标签的span享受样式
1、什么是选择器？
2、选择器分文哪三种？
3、什么是标签选择器？
4、标签选择器可派生出哪4中选择器？
5、类和ID选择器分别要用到哪两个符号？
选择符的分类
属性选择符
h1{属性：值；}
组选择符
h1,h2,h3{属性：值；}
包含选择符
p h1{属性：值；}
class类选择符
.div{属性：值；}
<div class="div"></div>
ID选择符
#div{属性：值；}
<div id="div"></div>
伪类选择符
#div:pseudo-class{属性：值；}
a:link{属性：值;}
a:visited{属性：值;}
a:hover{属性：值；}
a:active{属性：值；}
p:first-letter{属性：值}--首字的伪类样式
p:first-line{属性：值}--首行的伪类样式
通配选择符
*{属性：值；}
边框样式（写在样式文件，或内嵌行内样式中）
{border-style:solid;}<!--实线边框-->
{border-style:dotted;}<!--点线边框-->
{border-style:dashed;}<!--虚线边框-->
{border-style:double;}<!--双线边框-->