Blogger Information
Blog 9
fans 0
comment 5
visits 9546
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
HTML基础结构及CSS选择器8.10作业
雷神的博客
Original
5934 people have browsed it

代码 

实例

实例

<!DOCTYPE html><!-- 声明文档类型的作用   -->
<html>
<head><!-- 定义网页头部 -->
	<title>html第一课</title><!-- 定义网页标题 --><!-- 双标签 -->

	<meta charset="utf-8"><!-- charset 定义字符集 --><!-- 不敲上有些浏览器不识别中文 -->

	<link rel="stylesheet" type="text/css" href="static/style.css"><!-- link引入外部文件 --><!-- rel定义当前文档与被链接文档关系 --><!-- type定义外部文档类型 --><!-- href定义外部文档网址或本地地址 -->   <!-- 外部样式 为了共享 -->

	<link rel="shortcut icon" type="image/x-icon" href="images/logo.png">

	<style type="text/css">/*内部样式 只对当前页面*/
         /*tag标签名  ID  class*/  /*属性选择器*/

		body{width: 200px;height: 200px;background: red;}/*内部样式举例 添加背景色*/  /*标记选择器不用加符号*/

		#box{width: 200px;height: 200px;background: pink;}/*ID名字前加#号选中*//*ID名是维一的*/

		.main{width: 200px;height: 200px;background:green;}/*class名字前加. 选中*/

		a{color: green;}/*标记所以a标签颜色*/
		a[href="http:www.php.cn"]{color: pink;}/*属性选择器*/

		div a{color:#000;}
		#box a{color:red;}/*属性选择器*/

	</style>
</head>
<body ><!-- 内联样式针对当前标签   --><!-- 分优先级 外部小于内部小于内联 --><!-- style="background: blue;" -->
<img src="">
<a href="https://baidu.com">百度</a>

<a href="http://www.php.cn">PHP中文网</a>

<a href="https://www.taobao.com">淘宝</a>

<a href="https://mail.qq.com">QQ邮箱</a>

<div id="box">
	<a href="http://www.php.cn">php</a>
</div>
<div class="main">
        <a href="http://www.php.cn/code/27881.html">CSS</a>
        <a href="http://www.php.cn/code/27882.html">css</a>
</div>


</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

总结

HTML是元素标签  有双标签 及 单标签

ID唯一性 命名不能重复  calss 命名无此限制

外部样式 为了共享

内部样式 只对当前页面

内联样式针对当前标签

优先顺序是外部样式小于内部样式小于内联样式


微信图片_1.jpg微信图片_2.jpg

Correction status:qualified

Teacher's comments:完成的很出色!!!!!
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
5 comments
小冯 2018-08-13 16:01:32
优秀
5 floor
victor 2018-08-13 16:00:21
666
4 floor
花弄 2018-08-13 15:01:59
刚把爹
3 floor
灭绝师太 2018-08-13 15:01:35
完美……不需要太多语言……继续保持
2 floor
ringa_lee 2018-08-11 13:52:33
加油,嘿嘿
1 floor
Author's latest blog post