代码说明:
本段代码展示了html文档的基本结构与CSS样式的简单应用。
实例
<!doctype html> <!-- xml xhtml html 文档声明 -->
<html> <!-- html文档根标签 -->
<head> <!-- html文档头部标签 不在页面中显示-->
<meta charwet="utf-8"> <!-- html文档字符集编码类型 -->
<title>PHP中文网--视频教程</title>
<!--<title>标签 文档在浏览器中显示标题 -->
<link rel="stylesheet" type="text/css" href="style/style.css">
<!-- <link>是外部文件引入标签，优点为了共享，集中维护，ref属性是文档和外部文件的关系，
type属性是引入文档的类型，href属性外部文件的url地址
rel的stylesheet属性值表示引入css样式表文件
-->
<link rel="shortcut icon" type="image/x-ico" href="images/title-icon.png">
<!-- rel的shortcut icon 属性值表示引入网页标题图标 -->
<style> /*<style>内部css样式：只针对本文档元素进行渲染*/
/*css选择器：tag标签名，id名(名字前面加#号)，class类名(名字前面加.号)*/
body{/*background:pink;*/} /*tag选择器*/
#box{width:100px;height:100px;background:pink;} /*id选择器*/
.main{width:100px;height:100px;background:green;} /*class类选择器*/
a{color:red;}
a[href="http://www.php.cn"]{color:blue;} /*标签属性选择器*/
a[href="demo.html"]{color:pink;}
div a{color:#000;} /*派生选择方法*/
#box a{}
}
</style>
</head>
<body> <!-- html文档主体内容标签 -->
<img src="http://www.php.cn/static/images/logo.png">
<!--<img>标签 插入一张图片，src属性是图片url地址 -->
<!-- <a>标签 表示链接，在网页中可以点击 -->
<a href="http://www.baidu.com">百度</a>
<a href="http://www.php.cn">php中文网</a>
<a href="demo.html">demo</a> <!-- 跳转到相对路径页面 -->
<a href="#">#</a> <!-- href属性值为#，跳转到本页 -->
<div id="box">
<a href="#">php</a>
</div>
<div class="main"></div>
<div style="background: blue;color:#ddd;"></div> <!-- 内联css写法，优先级最高 -->
<div></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：
了解html的基本结构
了解html文档的字符编码 <meta charset="utf-8">
了解课程里所讲的html标签和用法及作用。
了解CSS样式引入的三种方式：外部引入<link>，内部<style>,以及内联样式 <div style="color:red;">
三种引入CSS方式优先级：内联>内部>外部，外部<link>引入css的优点,复用和维护性比较好。
了解4个css选择器的原理和用法。
