html网页是我们平时浏览电脑网页时经常会碰到的,打开网页源码查看器,会看到各式各样的html标签,a标签,格式的div,以及该网页采用的是何种类型的编码格式,本篇博文就一些常用和基础的html元素进行的总结
实例
实例
html基础css样式选择器的应用(a标签,div之间的层级关系)--2018年08月13日12时20分
html网页是我们平时浏览电脑网页时经常会碰到的,打开网页源码查看器,会看到各式各样的html标签,a标签,格式的div,以及该网页采用的是何种类型的编码格式,本篇博文就一些常用和基础的html元素进行的总结
<!DOCTYPE html> <!-- 文档类型 -->
<html> <!-- html描述 -->
<head> <!-- 定义网页头部 -->
<title>php中文网-视频课程</title> <!-- 网页标题 -->
<meta charset="UTF-8"> <!-- 定义网站的字符集编码格式 -->
<link rel="stylesheet" type="text/css" href="static/style.css"> <!-- 引用static目录下的sytle.css文件作为样式文件 外部样式 为了共享-->
<link rel="shortcut icon" type="image/x-icon" href="images/footlogo.png"> <!-- 引用images目录下的footlogo.png文件作为网站的icon -->
<style type="text/css"> /*内部样式:只针对当前页面*/
/*tag标签名,id名(名字前面加#)class名 属性选择器*/
body {} /*标记选择器*/
#box{width:100px;height: 100px;background: pink;} /*id选择器 设置了宽度和高度大小,px为像素,背景颜色为粉色*/
.main{width:100px;height: 100px;background: green;} /*class选择器 类*/
a{color:red;} /*设置所有a标签都是红色*/
a[href="http://www.php.cn/"]{color:blue;} /*设置超链接 www.php.cn 颜色为蓝色*/
a[href="demo2.html"]{color:pink;} /*设置超链接 demo2.html 颜色为粉色*/
div a{color:#000;} /*设置div下面a的选择器的颜色*/
#box a{} /*引用box id标签*/
</style> <!-- style 结束标签 -->
</head> <!-- head 结束标签 -->
<body><!-- 内联样式 style="background:blue"; -->
<img src=""> <!-- 引用图片标签 -->
<a href="http://www.baidu.com">百度</a> <!-- 超本文连接,显示为:百度,链接到http://www.baidu.com -->
<a href="http://www.php.cn">php中文网</a> <!-- 超本文连接,显示为:php中文网,链接到http://www.php.cn -->
<a href="demo2.html">demo2</a> <!-- 超本文连接,显示为:demo2,链接到网站根目录下/demo.html文件 -->
<a href="#">#</a> <!-- 显示当前页面 -->
<div id="box"> <!-- div引用标签id为box的标签名 -->
<a href="">php</a>
</div>
<div class="main"></div> <!-- 引用类名为main的标签 -->
<div></div>
<div></div>
</body>
</html>
1.#box{width:100px;height: 100px;background: pink;} //id选择器 设置了宽度和高度大小,px为像素,背景颜色为粉色
2.a[href="http://www.php.cn/"]{color:blue;} //设置超链接 www.php.cn 颜色为蓝色
3.<link rel="stylesheet" type="text/css" href="static/style.css"> //引用static目录下的sytle.css文件作为样式文件 外部样式 为了共享
4.<link rel="shortcut icon" type="image/x-icon" href="images/footlogo.png"> //引用images目录下的footlogo.png文件作为网站的icon
学习了一些html常用标签和html一个标准的结构样式是通过哪几个部位或者部分组合而成的
运行实例 »
点击 "运行实例" 按钮查看在线实例运行实例 »
点击 "运行实例" 按钮查看在线实例
下面是手抄代码照片
上述代码片段的注释和总结:
1.#box{width:100px;height: 100px;background: pink;} /*id选择器 设置了宽度和高度大小,px为像素,背景颜色为粉色*/
2.a[href="http://www.php.cn/"]{color:blue;} /*设置超链接 www.php.cn 颜色为蓝色*/
3.<link rel="stylesheet" type="text/css" href="static/style.css"> <!-- 引用static目录下的sytle.css文件作为样式文件 外部样式 为了共享-->
4.<link rel="shortcut icon" type="image/x-icon" href="images/footlogo.png"> <!-- 引用images目录下的footlogo.png文件作为网站的icon -->
学习了一些html常用标签和html一个标准的结构样式是通过哪几个部位或者部分组合而成的
