博客列表 >html基础结构和css基础知识--2018年8月10日

html基础结构和css基础知识--2018年8月10日

鱼越龙门的博客
鱼越龙门的博客原创
2018年08月14日 09:28:20637浏览

这段代码介绍了html的基础结构以及css的属性和几种选择器


实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>php中文网---视频教程</title>
	<link rel="stylesheet" type="text/css" href="static/style.css"><!-- 外部样式:为了共享 -->
	<link rel="shortcut icon" type="image/x-icon" href="images/1.jpg">
	<style type="text/css">/*内部样式,只针对当前页面*/
	/*tag标签名、id名(名字前面加#) class名 属性选择器*/
	body{}/*标记选择器*/
	#box{width:100px;height: 100px;background: pink;} /*id选择器*/
	.main{width: 100px;height: 100px;background: black;} /*class选择器*/
	a{color:red;}
	a[href="http://www.php.cn/"]{color:blue;}
	a[href="demo2.html"]{color:pink;}
	div a{color:red;}
	#box a{color:yellow;}
	</style>

</head>
<body><!-- 内样式联  style="background:blue;" -->
	<img src="">
	<a href="https://www.baidu.com">百度</a>
	<a href="http://www.php.cn/">php中文网</a>
	<a href="demo2.html">demo2</a>
	<a href="#">#</a>

	<div id="box">
		<a href="">php</a>
	</div>
	<div class="main"></div>
</body>
</html>

运行实例 »

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

 1.png

 

 QQ图片20180812101115.jpgQQ图片20180812101102.jpg

 

 

上述代码的知识点总结:

1:<!DOCTYPE html>作为html的声明位于html第一行,

2:对于中文网页需要使用 <meta charset="utf-8"> 声明编码,否则会出现乱码,

3:<html> 元素是 HTML 页面的根元素,<title> 元素描述了文档的标题,<body> 元素包含了可见的页面内容

4:link 是引用标签可以引用样式和图标,style是内部样式的引用,

5:body{}是tag标签选择器,#box 是id选择器,.main 是类选择器,a[href="demo2.html"]代表着属性选择器,div a是子类选择器

6:<div></div><a></a>这样的都是标签,

7:第一次写技术博客感觉写的不好,希望以后能改进

 

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议