Blogger Information
Blog 35
fans 0
comment 0
visits 32846
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
html文档结构-css基础知识总结—2018年8月11日
THPHP
Original
629 people have browsed it

实例

<!doctype html><!-- 声明这个页面是html页面 -->
<html>
	<head><!-- 网页的头部 -->
    <meta charset="UTF-8"> <!-- 页面的编码格式 -->
    <title>网站标题</title> <!-- 网站的标题 -->
    <!-- rel="当前文档与被链接文档的关系" type="文档的类型" -->
    <link rel="stylesheet" type="text/css" href="css/style.css"><!-- 引入外部css文件 -->
    <link rel="shortcut icon" type="image/x-icon" href="图片的路径"><!-- 引入网站图标 -->
    <style> /* 内部样式,只针对当前的页面 */
        body{background:red;} /* 标签选择器 */
        #box{width:200px;height:200px;background:#6600cc;} /* 选中标签 id为 box名字 */
        .box{width:200px;height:200px;background:#ff33ff;} /* 选中标签 class 为 box名字 */
        a[href="demo1.html"]{color:#ff0000;} /* 属性选择器  */
        .box1 a{color:#330000;} /* 选中标签 class 为 box1名字里面的所有a标签。 */
    </style>
	</head>
	<body style="background:blue;"><!-- 内联样式只针对于当前的标签 -->
 	   <div id="box">id类名</div><!-- class命名可以有多个 -->
       <div class="box">class类名</div><!-- id命名一个页面只能有一个 -->
       <img src="https://img.php.cn/upload/course/000/000/001/5b583eacc384e927.jpg"> <!-- 图片标签-->
       <div class="box1">
          <a href="http://www.php.cn">php中文网</a><!-- 页面跳转--> 
       </div>
       <a href="demo1.html">本地html文件</a><!-- 页面跳转-->
    </body>
</html>

运行实例 »

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

总结:

    1、html页面的编码格式定义为:UTF-8,不然部分的浏览器会出现乱码情况

    2、单标签没有结束标签。双标签成对出现 以 / 为结束,如:双标签<div></div>   单标签:<img src="">

    3、样式优先级:内联样式>内部样式>外部样式

    4、标签优先级:id选择器>class选择器>标签选择器

    5、css属性:width 宽度   height  高度  background  背影色   color  字体颜色


手写代码:

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