<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html_test</title>
</head>
<body>
<p><em>斜体</em></p>
<p><h2><strong>加粗</strong></h2></p>
<style>
span{color:blue}
</style>
<span>蓝色</span>
<p><q>短文本引用，如引用一句别人的话</q><p>
<blockquote>长文本引用，如在文章中引用大段文字</blockquote>
<p>换行<br />显示<br />的示例</p>
<p>空 格 操  作</p>
<hr /><center>水平横线</center><hr />
<address>地址标签:<a href="www.baidu.com">百度</a></address>为网页加入地址信息
<br /><code>(显示一行代码)var i = i++;</code>
<br /><pre><strong>加入大段代码</strong>
String name ="小明";
int i = 0;
for(i = 0;i<10;i++){
System.out.println("name");
}
</pre>
<div><span>div把一些独立的逻辑部分划分出来</span></div>
<div id="hotList">
<ul>
<li>信息列表1</li>
<li>信息列表2</li>
<li>信息列表3</li>
</ul>
</div>
<div>
<ol>
<div id="learninglnstructed">
<li>信息列表1</li></div>
<li>信息列表2</li>
<li>信息列表3</li>
</ol>
</div>
<style type="text/css">
.list{
font-weight:bold;
background:#69f;
color:#ffffff;
border:1px solid #ffffff;
white-space:nowrap;
height:26px;
line-height:26px;
vertical-align:middle;
}
td{
font-family:宋体;
font-size:12px;
border:1px solid #333333;
background:#f0f0f0;
padding:8px;
line-height:120%;
}
</style>
<table summary="摘要内容，不会在浏览器中显示出来，增加表格的可读性">
<caption>标题</caption>
<th>表头</th><th>表头</th><th>表头</th><th>表头</th>
<tr class="list"><td>11</td><td>11</td><td>11</td><td>11</td></tr>
<tr class="list"><td>11</td><td>11</td><td>11</td></tr>
<tr class="list"><td>11</td><td>11</td></tr>
<tr class="list"><td>11</td><td>11</td><td>11</td><td>11</td></tr>
</table>
<br />
<style type="text/css">a{color:red}</style>
<a href="www.baidu.com" title="鼠标滑过显示的文本">click here</a><br />
<a href="www.baidu.com" target="_blank">click here(在新的浏览器窗口中打开)</a><br />
<a href="mailto:yy@imooc.com?cc=xiaoming@imooc.com&subject=主题&body=邮件内容">发送(链接email地址)</a>
<br /><br />
<img src="G:壁纸1.jpg"alt="图片加载失败"title="这是一张图片" />
<br /><br /><br />
<form method="post" action="save.jsp">
<label for="username">username:</label>
<input type="text" name="username" id="username" value="输入名字" />
<label for="password">password:</label>
<input type="password" name="password" id="password" value="输入密码" />
<input type="submit" value="确定" name="submit"/>
<input type="reset" value="重置" name="reset">
</form>
<form method="post" action="">
<label>connect us</label>
<textarea cols="10" rows="5">entery the content in there... cols(列数)rows（行数）</textarea>
</form>
<br /><br />
<form name="inform" method="post" action="xxx.do">
<input type="radio" name="ra" value="va1" checked="checked">单选框0（默认选中）
<input type="radio" name="ra" value="va2" checked="">单选框1
<input type="radio" name="ra" value="va3" >单选框2
<br />
<input type="checkbox" name="ra" value="va1" checked="checked">复选框0（默认选中）
<input type="checkbox" name="ra" value="va2" checked="">复选框1
<input type="checkbox" name="ra" value="va3" >复选框2
<br /><br />
<label>下拉列表：</label>
<select>
<option value="read">read</option>
<option value="sport">sport</option>
<option value="music">music</option>
<option value="shopping" selected="selected">shopping</option>
</select>
<label>下拉列表进行多选：</label>
<select multiple="multiple">
<option value="read">read</option>
<option value="sport">sport</option>
<option value="music">music</option>
<option value="shopping" selected="selected">shopping</option>
</select><label>Ctrl+单击</label>
<br />
<label for="id1">标签1(id名必须相同)</label><input id="id1" type="radio" value="va" name="na"></input> 
<label for="id2">标签2(id名必须相同)</label><input id="id2" type="radio" value="va"name="na"></input> 
<label for="id3">标签3(id名必须相同)</label><input id="id3" type="radio" value="va"name="na"></input> 
<br />
<input type="submit" value="提交" name="button">
<input type="reset" value="重置" name="reset">
</form>
<br />
<p>********<span>css</span>样式（嵌入式）********</p>
<style type="text/css">
p{ color:red;
font-size:20px;/*字号*/
font-weight:bold;/*加粗*/
}
span{color:#00f0ff;}
</style>
<p style="color:#00f000;font-size=15px">内联css样式，直接写在现有的html标签中</p>
外部式css样式，写在单独的文件中。
<!--这个css样式文件以".css"为扩展名，
<link href="xx.css" rel="stylesheet" type="text/css" />
<link>标签一般写在<head>标签之内
-->
三种样式的优先级：内联式 > 嵌入式 > 外部式
<br /><br />
<style type="text/css">
.str{font-weight:bold;color:red;}
</style>
<span class="str">类选择器</span>
<br /><br />
<style type="text/css">
#setGreen{color:green;}
</style>
<span id="setGreen">ID选择器</span>
<br />
<!--
类选择器和ID选择器的区别
1.ID选择器只能在文档中使用一次，类选择器可以使用多次
2.可以使用类选择器词列表方法为一个元素同时设置多个样式，ID不可以
-->
<style type="text/css">
.a{color:red;}
.b{font-size:20px}
</style>
<span class="a b">类选择器和ID选择器的区别</span>
<br /><br />
<style type="text/css">
.first>span{border:1px solid red; color:green}
</style>
<p class="first"><span>子选择器</span>的使用方法示例</p>
<br /><br />
<style type="text/css">
.first>span{border:1px solid red; color:green}
.food>li{color:#023143}
</style>
<p class="first">
<span>后代（包含）选择器</span>的使用<span>方法</span>示例
</p>
<ul class="food">
<li>实例1---
<ul>
<li>实例---</li><li>实例---</li><li>实例---</li>
</ul>
</li>
<li>实例2---
<ul>
<li>实例---</li><li>实例---</li><li>实例---</li>
</ul>
</li>
</ul>
<!--后代选择器与子选择器的区别：
子选择器仅是指它的直接后代，或者可以理解为作用于子元素的第一个后代。
后代选择器是作用于所有子后代元素
后代通过空格进行选择；子通过">"进行选择
-->
<br />
<em><span title="使用（*）号指定，使所有的标签都实现这个样式">通用选择器的使用</span></em>
<style type="text/css">
/*使用（*）号指定，使所有的标签都实现这个样式
*{color:yellow;}
*/
</style>
<br />
<br />
<style type="text/css">
a:hover{color:yellow;}
</style>
<a href="xxxx">伪类选择符（鼠标滑过显示黄色）</a>
<br />
<span>分组选择符</span>
<style type="text/css">
/*
h1,span{color:red;}
相当于
h1{color:red;}
span{color:red;}
*/
</style>
<br />
标签的权值为1，类选择器的权值为10，ID选择符的权值最高为100
浏览器是根据权值来判断使用那种css样式，哪个权值高的就使用哪个
<br />
层叠<br />
<style type="text/css">
p{color:red;}
p{color:green;}/*最后会出现green样式，把前面的样式覆盖了*/
</style>
内联样式表（标签内部） > 嵌入样式表（当前文件中） > 外部样式表（外部文件中）
<br />
<span type="color:red">重要性（给某些样式设置最高权值）</span>
<style text="text/css">
/*这样最终样式为red
p{color:red!important;}
p{color:green;}
*/
</style>
<br />
<h3><strong>文字排版</strong></h3>
<style type="text/css">
/*
body{
font-family:"宋体";/*Microsoft Yahei*/
font-size:12px;12像素
color:#666
}
p span{
font-weight:hold;/*粗体*/
font-style:italic;/*斜体*/
text-decoration:underline;/*下划线*/
text-decoration:line-through;/*删除线*/
text-indent:2em;/*文字缩进（前面空两个文字的位置）；2em的意思是文字的2倍大小*/
line-height:2em;/*行高*/
letter-spacing:50px/*字母与字母之间的间距*/
}
div{
text-align:right;/*center,left实现文本居中、右对齐。。*/
}
*/
</style>
<span title="常用的块状元素：<div>,<p>,<h1>...<h6>,<ol>,<ul>,<dl>,<table>,<address>,<blockquote>,<form>
常用的内联元素：<a>,<span>,<br>,<i>,<em>,<strong>,<label>,<q>,<var>,<cite>,<code>
常用的内联块状元素：<img>,<input>">html中的标签大体被分为三种不同的类型：块状元素、内联元素（行元素）、内联块状元素
</span>
<!--
常用的块状元素：<div>,<p>,<h1>...<h6>,<ol>,<ul>,<dl>,<table>,<address>,<blockquote>,<form>
常用的内联元素：<a>,<span>,<br>,<i>,<em>,<strong>,<label>,<q>,<var>,<cite>,<code>
常用的内联块状元素：<img>,<input>
-->
<h3>块级元素</h3>
<h3>特点：</h3>
<h4>1.每个块级元素都从新的一行开始，并且其后的元素也另起一行（一个块级元素独占一行）</h4>
<h5>2.元素的高度、宽度、行高以及底边距都可以设置</h5>
<h6>3.元素宽度在不同设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。</h6>
<!--
<style type="text/css">
a{display:block;}将内联元素a转换为块状元素，从而使a元素具有块状元素特点
</style>
-->
<label>内联元素</label>
<span>特点：</span>
<em>1.和其他元素都在一行上</em>
<em>2.元素的高度、宽度、及顶部和底部边距不可设置</em>
<em>3.元素的宽度就是它包含的文字或图片的宽度，不可改变</em>
<!--
<style type="text/css">
div{display:inline;}将块状元素div转换为内联元素，从而使div元素具有内联元素特点
</style>
-->
内联块状元素
:就是同时具备内联元素和块状元素的特点
特点：1.和其他元素都在一行上；2.元素的高度、宽度、行高以及底边距都可以设置
<!--
<style type="text/css">
div{display:inline-block;}将块状元素div转换为内联元素，从而使div元素具有内联元素特点
</style>
-->
</body>
</html>