收藏
批改状态：合格
老师批语：
实例
<!DOCTYPE html> <!-- xml xhtml 网页的声明 注释的快捷键是ctrl+/ -->
<head><!-- 定义网页的头部信息 -->
<title>php中文网</title><!-- 网页的名称 -->
<meta charset="utf-8"><!-- 设置字符集编码 -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- 链接外部css样式表 外部样式的用途是为了多个html可以共享同一个资源 -->
<link rel="shortcut icon" type="image/x-icon" href="images/footlogo.png">
<!-- 在标题内放入图片 -->
<style type="text/css"> /*内部样式，只针对当前的页面有效*/
/*tag标签名，id名（名字前边加#）class名（前边加.） 属性选择器*/
body{}/*标记选择器*/
#box{width: 100px;height: 100px;background: black;}/*id选择器*/
.select{width: 100px;height: 100px;background: pink;}/*class选择器 又叫类选择器*/
a{color: blue}/*属性选择器*/
a[href="https://www.baidu.com"]{color: pink;}
a[href="http://www.php.cn"]{color: green;}
/*派生选择器 根据文档上下关系来定义样式*/
div a{color: red;}/*选择div中的a标签颜色*/
#box a{color: white;}
</style>
</head>
<body style="align-content: center;"><!-- <body style="background: blue;">属于内联样式 -->
<img src=""><br>
<a style="text-decoration: none" href="https://www.baidu.com">百度一下</a><!-- 超链接到百度网址 -->
<a style="text-decoration: none" href="http://www.php.cn">php中文网</a>
<!-- 超链接到中文网网址 -->
<a style="text-decoration: none" href="demo2.html">例二</a>
<!-- 链接到外部文件夹的一些文件 -->
<a style="text-decoration: none"href="#">#</a>
<!-- 链接到外部文件 -->
<div id="box">
<a style="text-decoration: none" href="">php</a>
</div>
<div class="select"></div>
</body>点击 "运行实例" 按钮查看在线实例
点评：此代码主要对前面多学习的html的标签，属性和css的样式及选择器进行了代码实践，运行结果如上图所示。
手抄代码：
说明：通过手抄代码，进一步的加深了对代码的印象，一些细节也能进一步的巩固，加强记忆。
总结：
（1）html是一种网页的语言又称为超文本标记语言，最基本主要包括标签、元素和属性，其中最重要的是各种属性的使用，通过大量的敲代码才能做到熟能生巧。
（2）css的加入使得html页面更加的生动形象，今天的学习算是初始html+css，对css的样式种类以及优先级有了简单的了解其中优先级：内联样式>内部样式>外部样式，而内联样式只作用于当前的标签内，内部样式作用于当前的整个页面，外部样式可以同时作用于多个html页面。
（3）css选择器我们这里只学习了集中常用的，包括标记选择器、id名选择器、类名选择器，属性选择器等，不同的选择器的用法稍微不同，但是他们的作用却是相同的，多个div标签中快速定位到对应的div标签。
（4）超链接标签的使用也是非常的简单的，后边需要做的就是去掌握它的各种属性，比如如何去掉默认的下划线，a标签不仅能链接到网上的网址它还可以链接到外部的文件，只需要知道该文件的路径就轻松搞定。
（5）第一天的收获还是蛮多的，学习是个持久活，坚持下去，相信自己！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
