博客列表 >html基础标签+css选择器的应用--2018年8月11日13时49分作业

html基础标签+css选择器的应用--2018年8月11日13时49分作业

百度郝郝的博客
百度郝郝的博客原创
2018年08月11日 15:06:431083浏览

今天是第一天在PHP中文网学习

代码:

注释:在开发的道路上, html是一种网页语言,可以叫做超文本标记语言(但它不是编程语言),css层叠样式,是用来规划html等其他文件样式的计算机语言,可以对网页各元素格式化和样式修饰。

    也是学习编程道路上的第一块敲门砖。

实例

<!DOCTYPE html>  <!-- 声明文档类型 -->

<html>

<head><!-- 网页头部 -->

<title>PHP中文网--视频教程</title><!-- 网页标题 -->

<meta content="text/html;charset=UTF-8"><!-- 当前页面编码 -->

<!--   rel 定义当前文档跟链接文档的关系  --> 

 	<!--  type - 引入样式类型 -->

 	<!--  href - 引入文件地址 -->

<link rel="stylesheet" type="text/css" href="/statics/style.css"><!-- 外部样式 引入 -->

<link rel="shortcut icon" type="image/x-icon" href="/statics/favicon.ico"><!-- 图标引入 -->

<style type="text/css">/*内部样式:只针对当前页面*/

body{}/*标记选择器*/

#box{width: 200px;height: 200px;background: pink;}/*(#)id选择器*/

.box{width: 200px;height: 200px;background: green;}/*(.)class选择器*/

#main{width: 100px;height: 100px;background: #f9ff00;}

.main{background: #000;}

/*同一个命名,不同的选择器,更便于区分*/

</style>

</head>

<body>

<!-- <body style="background: blue;"> 内联样式:只针对当前元素-->

<img src="" alt=""><!-- 单标签  有头无尾-->

<div></div><!-- 双标签,闭合标签:有头有尾 -->

<div id="box"><!-- id选择器 -->

<a href="http://www.php.cn/">php中文网</a>

</div>

<div class="box"><!-- class选择器 -->

<a href="http://www.baidu.com/">百度</a>

</div>

<div id="main" class="main">id是黄色,class是黑色</div>

</body>

</html>

运行实例 »

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

运行预览图:

运行预览图.png

个人点评:通过简单的几行html和css的结合,定义出div块的大小和背景颜色,实现出一些简单的功能。

手抄代码:

微信图片_20180811150035.jpg

说明:老师们让谢手抄是有原因的,从我个人感觉是可以加深记忆,比如 "background" 背景属性这个单词,我自己是单独写不全的,一直都是光写个前缀,靠代码插件提示补全的,现在感觉会背了,(*^__^*) 嘻嘻……


总结:

1、一定要定义当前页面编码 utf-8,否则部分浏览器会不识别汉字,直接乱码。

2、外部层叠样式引入一定要书写规范,按照 “优先顺序:外部<内部<内联 ” 去写。

3、选择器分为:标记选择器、id选择器、class选择器;当前页面只允许一个id命名,不允许出现多个一样的id命名;class类选择器,则不限制。

4、单标签一般用于:图片、样式、文件等引入。

5、双标签:有开头(<div>)有结尾(</div>),闭合标签。

6、通过实例:id--main是黄色,class--main是黑色。当前显示为黄色,证明id是优先于class的

7、个人感觉标签命名:在这节课,同一个命名,不同的选择器,更便于区分、理解。

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