Blogger Information
Blog 33
fans 0
comment 0
visits 20678
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
HTML基本结构、CSS基本样式、元素属性和外部引用等基础知识--2018年8月10日
马聪 15558002279的博客
Original
597 people have browsed it

实例

实例

<!DOCTYP html><!--html声明,表明本页面是html语言的页面-->
<html>
<head><!-- 定义网页头部-->
	<title>PHP中文网</title><!--双标签,定义网页标题内容-->
	<meta charset="UTF-8" /><!--定义字符编码,防止出现中文乱码-->
	<link rel="stylesheet" type="text/css" href="static/css/style.css" /><!--从外部引入css样式文件-->
	<link rel="shortcut icon" type="image/x-icon" href="image/logo.ico" /><!--title标题前的小logo-->
	<style type="text/css">/*内部样式,只在当前页面生效*/
	body{background: pink}/*标记选择器*/
	#box{width:100px;height: 100px;background:pink;}
	.main{width:100px;height: 100px;background: green;}
	a{color:red;}
	a[href="http://www.PHP.cn"]{color:blue;}
	a[href="http://www.baidu.com"]{color:blue;}
	div a{color:#000;}
	#box a{color:#000;}
</style>
</head>
<body><!--内联样式-->
	<img src="./img.png">
	<a href="http://www.PHP.cn">PHP中文网</a>
	<a href="http://www.baidu.com">百度</a>
	<a href="http://www.duowan.com">多玩</a>
	<a href="#">#</a>
	<div id ="box">
		<a href="http://www.PHP.cn">PHP</a>
	</div>
	<div class="main">#</div>
</body>
</html>

运行实例 »

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



运行实例 »

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

结果图:1.jpg

HTML5 是超文本标记语言:

元素标签:  有双标签 单标签;

ID具有唯一性,名称不能重复,class 命名无此限制

外部样式css文件 是为了共享,提高代码重用性

内联样式针对当前标签

内联样式>内部样式>外部样式

 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
0 comments
Author's latest blog post