选择器的优先级依次是: 内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器
标签选择器:
标签名{
}
ID选择器:
#ID名{
}
类选择器:
.类名{
}
子选择器:
.类选择器>标签选择器{
}
后代选择器:
.类选择器 标签选择器{
}
通用选择器:
*{
}
伪类选择器:
a:hover{
}
分组选择器:
标签名,标签名{
}
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>学习表格标签</title> </head> <body> <table border=1> <caption>前段三剑客</caption> <tr> <td>知识点</td> <td>重要程度</td> <td>难度</td> <td>学习周期</td> </tr> <tr> <td>html</td> <td>5星</td> <td>3星</td> <td>7天</td> </tr> <tr> <td>css</td> <td>5星</td> <td>4星</td> <td>10天</td> </tr> <tr> <td>js</td> <td>5星</td> <td>5星</td> <td>20天</td> </tr> </table> </body> </html>
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
无序列表
<ul> <li> Java </li> <li> JavaScript </li> </ul>
有序列表
<ol> <li> Java </li> <li> JavaScript </li> </ol>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用thead、tbody、tfoot标签</title>
</head>
<body>
<table border="1">
<thead >
<thead><strong>成绩表</strong></thead>
<hr/>
<tr>
<th>科目</th>
<th>分数</th>
</tr>
<tr>
<td>语文</td>
<td>99</td>
</tr>
<tr>
<td>数学</td>
<td>60</td>
</tr>
<tr>
<td>总分</td>
<td>159</td>
</tr>
</thead>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学习表格标签</title>
</head>
<body>
<table border="1">
<caption><strong>前端三剑客</strong></caption>
<tr>
<th>知识点</th>
<th>重要程度</th>
<th>难度</th>
<th>学习周期</th>
</tr>
<tr>
<td>html</td>
<td>5星</td>
<td>3星</td>
<td>7天</td>
</tr>
<tr>
<td>css</td>
<td>5星</td>
<td>4星</td>
<td>10天</td>
</tr>
<tr>
<td>js</td>
<td>5星</td>
<td>5星</td>
<td>20天</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>a标签</title>
<style>
a{color:#980}
</style>
</head>
<body>
<ul>
<li><a href="#" title="前端开发面试心法">前端开发面试心法</a> </li>
<li><a href="#" title="零基础学习html">零基础学习html</a></li>
<li><a href="#" title="JavaScript全攻略">JavaScript全攻略</a></li>
</ul>
<p>1922年的春天,一个想要成名名叫尼克•卡拉威(<a href="http://www.m1905.com/mdb/star/3316/" title="点击查看视频介绍" target="_blank">托比•马奎尔Tobey Maguire</a> 饰)的作家,离开了美国中西部,来到了纽约。那是一个道德感渐失,爵士乐流行,走私为王,股票飞涨的时代。为了追寻他的美国梦,他搬入纽约附近一海湾居住。</p>
<p>菲茨杰拉德,二十世纪美国文学巨擘之一,兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌,其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ol列表</title>
</head>
<body>
<ol>
<li>我的第一个列表信息</li>
<li>我的第二个列表信息</li>
</ol>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ul列表</title>
</head>
<body>
<ul>
<li>我的第一个列表信息</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hr标签使用</title>
</head>
<body>
<p>火车飞驰过暗夜里的村庄,月光,总是太容易让思念寂寞,太容易让人觉得孤独。</p>
<hr/>
<h1>我是标题二</h1>
<p>每一枚被风吹起的蒲公英,都载满了一双眼睛的深情告别与一个目光的依依不舍。那天,我拿着行李,带上一个背影的祝福与惆怅,挥手告别了这片土地。我不知道,我何时会回来。</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>空格讲解</title>
</head>
<body>
<h1>感悟梦想</h1>
来源:作文网 作者:为梦想而飞
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>br标签的使用</title>
</head>
<body>
<h2>《咏桂》</h2>
<p>
暗淡轻黄体性柔,<br />
情疏迹远只香留。<br />
何须浅碧深红色,<br />
自是花中第一流。
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>aside</title>
<style>
aside{
width: 100px;
height: 700px;
border: 2px red solid;
position:fixed;
left:0;
top:10px;
}
</style>
</head>
<body>
<aside>我是侧边栏,而且是浮窗型,旁边的东西动,我固定不动<br><br><br><br>你看我像不像广告弹窗?</aside>
<div>
<pre>
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
</pre>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>section</title>
<style>
section{
background:skyblue;/*天蓝色*/
height:100px;/*高度*/
width:100%;/*宽度*/
margin:10px;/*外边界*/
padding:10px;/*内边界*/
border:1px solid red;/*边框:1px,填充红色*/
}
</style>
</head>
<body>
<header>我是头部标签</header>
<section>我是一个区域</section><!--我是块标签哦-->
<footer>我是底部标签</footer>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>footer</title>
</head>
<body>
<header>我是头部标签</header>
<footer>我是底部标签</footer>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>header</title>
<style>
header{
color:blue
}
</style>
</head>
<body>
<header>我是头部标签</header>
<div>
<h1>我是标题</h1>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>h1-h6标题标签</title>
</head>
<body>
<h1>了不起的盖茨比</h1>
<p>《了不起的盖茨比》为那个奢靡年代的缩影。盖茨比怀揣着对"美国梦"的期翼,投身到那个年代的灯红酒绿之中,却在名利场中看尽世态炎凉,以及浮华背后一切终将逝去的空虚怅惘。1925年《了不起的盖茨比》问世。 </p>
<p>菲茨杰拉德,二十世纪美国文学巨擘之一,兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌,其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>了不起的盖茨比</title>
<style>
h1{
color:blue
}
span {
color:blue
}
</style>
</head>
<body>
<h1>了不起的盖茨比</h1>
<p>1922年的春天,一个想要成名名叫尼克•卡拉威(托比•马奎尔Tobey Maguire 饰)的作家,离开了美国中西部,来到了纽约。那是一个道德感渐失,爵士乐流行,走私为王,股票飞涨的时代。为了追寻他的<span>美国梦</span>,他搬入纽约附近一海湾居住。</p>
<p>菲茨杰拉德,二十世纪美国文学巨擘之一,兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌,其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>p标签</title>
</head>
<body>
<p>我的第一个段落。</p>
<p>我的第二个段落。</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>认识head标签</title>
</head>
<body>
<h1>欢迎来到慕课网</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>认识html文件基本结构</title>
</head>
<body>
<h1>在本小节中,你将学会认识html文件基本结构</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标签的语法</title>
</head>
<body>
<div>
<h1>在本教程中,你将学习如何使用 HTML 来创建站点</h1>
<p>当特殊的样式需要应用到个别元素时,就可以使用内联样式。</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Html和CSS的关系</title>
<style type="text/css">
h1{
font-size:12px;
color:#930;
text-align:center;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>制作我的第一个网页</title>
</head>
<h1>Hello World</h1>
<body>
</body>
</html>
<div>优先<p>优先<span>
<h>?
<head>里面可以设置</title>,<link /><meta />,<style>,<script>但浏览器除了会在标题栏显示<title>元素的内容外,不会向用户显示head元素内的其他任何内容
1.<form> :<form>标签是成对出现的,以<form>开始,以</form>结束。
2.action :浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
3.method : 数据传送的方式(get/post)。
注意:
1、所有表单控件(文本框、文本域、按钮、单选框、复选框等)都必须放在 <form></form> 标签之间(否则用户输入的信息可提交不到服务器上哦!)。
2、method : post/get 的区别这一部分内容属于后端程序员考虑的问题。感兴趣的小伙伴可以查看本小节的 wiki,里面有详细介绍。
段落用<p>标签
<hx>标签来制作文章的标题。
标题标签一共有6个,h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。
<hx>标题文本</hx> (x为1-6)
<head> 定义关于文档的信息。
<title> 定义文档标题。
<base> 定义页面上所有链接的默认地址或默认目标。
<link> 定义文档与外部资源之间的关系。
<meta> 定义关于 HTML 文档的元数据。
<script> 定义客户端脚本。
<style> 定义文档的样式信息。
html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。
常用的块状元素有:
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有:
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有:
<img>、<input>