博主信息
雷神的博客
博文
9
粉丝
0
评论
5
访问量
3033
积分:0
P豆:18

HTML基础结构及CSS选择器8.10作业

2018年08月17日 22:22:33阅读数:1478博客 / 雷神的博客/ HTML

代码 

实例

实例

<!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:m.sbmmt.com"]{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="//m.sbmmt.com">PHP中文网</a>

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

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

<div id="box">
	<a href="//m.sbmmt.com">php</a>
</div>
<div class="main">
        <a href="//m.sbmmt.com/code/27881.html">CSS</a>
        <a href="//m.sbmmt.com/code/27882.html">css</a>
</div>


</body>
</html>

运行实例 »

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

总结

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

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

外部样式 为了共享

内部样式 只对当前页面

内联样式针对当前标签

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


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

批改状态:合格

老师批语:完成的很出色!!!!!

版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
小冯
  • 小冯· 2018-08-13 16:01:325楼
  • 优秀

  • 回复
  • victor
  • victor· 2018-08-13 16:00:214楼
  • 666

  • 回复
  • 花弄
  • 花弄· 2018-08-13 15:01:593楼
  • 刚把爹

  • 回复
  • 灭绝师太
  • 灭绝师太· 2018-08-13 15:01:352楼
  • 完美……不需要太多语言……继续保持

  • 回复
  • ringa_lee
  • ringa_lee· 2018-08-11 13:52:331楼
  • 加油,嘿嘿

  • 回复