Correction status:qualified
Teacher's comments:
实例
<!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)第一天的收获还是蛮多的,学习是个持久活,坚持下去,相信自己!