收藏
<!DOCTYPE html> <!-- 第一行为声明，告诉网页你是什么文档类型 -->
<html>
<head><!-- 头部标签可以引入外部资源文件，如：css,js等； -->
<title>我的第一次作业</title><!-- 在网页头显示信息 -->
<meta charset="utf-8"><!-- 声明字符集避免乱码 -->
<link rel="stylesheet" type="text/css" href="static/style.css"><!-- 外部样式 -->
<!-- link:引入标签；rel:定义本文档与引入文档的联系；type：引入的文档类型； href:要引入的文件地址。 -->
<link rel="icon" type="image/x-icon" href="image/1.jpg"><!-- 不同文件的引入，rel、type属性都不同。该引入是为了在title上显示图标-->
<style type="text/css">/*设置内部样式，只针对当前页面*/
body{}/*background-color: blue;*/
#one{width: 200px; height: 200px; background:yellow;}/*id选择器：#+名字*/
.two{width: 200px; height: 250px; background: green;}/*class选择器：.+名字*/
/*属性选择器*/
a{color: red}
a[href="https://www.baidu.com/"]{color:blue}
/*派生选择器 根据文档上下文关系来定义样式*/
div a{color: black}
/*#one a{color:pink}*/
div {color:yellow}
</style>
</head>
<body>
<div id="one"><a href="https://www.baidu.com/" target="new">百度</a></div>
<div class="two"><a href="http://www.php.cn">php中文网</a></div>
<div id="there"></div>
<!-- 使用内联样式，只针对本行，一般按照style："属性值" --><!-- 优先级：内联样式>内部样式>外部样式 -->
<div><p style="color: purple">十年磨一剑，霜刃未曾试，今日把示君，谁有不平事。</p></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
运行实例：![4DK0%]YC%FEI7CRI{P7BY$K.png](https://img.php.cn//upload/image/885/624/498/1533977934873519.png "1533977934873519.png")
总结：
首先呢？以前有学过HTML+css,不过学的比较粗糙，也很久没用了差不多忘得七七八八了，通过这节课，以前的学过的知识也慢慢的想起来一些。
其次、在这节课上也学到了一些以前没学到的知识，比如：
1，HTML的文档各个的作用DOCTYPE的声明作用，link标签各个属性的具体作用，，以前只知道这么用，却不知道为什么要这么用，，说不出个所以然来。
2，样式的优先级上：内联样式（行内style="属性:属性值;"）>内部样式（写在head内部 针对当前页面 <style type="text/css"></style>属性选择器，id，class等选择器的声明）>外部样式（css文件）。
3，知道了title上的图标的由来以及怎么写上去。eg:
rel属性定义文档与被链接文档之间的关系
type属性定义被连接文档的类型
href属性定义被连接文档的url地址
<link rel="shortcut icon" type="image/x-icon"href="">设置标题内部的图片.
最后，很感谢老师的讲解，也希望老师能指出我这次作业的不足之处，也很期待自己同大家每天一起进步。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
