博客列表 >HTML5文档结构与css基础的简要认识-2018年8月11号

HTML5文档结构与css基础的简要认识-2018年8月11号

fighting的博客
fighting的博客原创
2018年08月17日 13:22:31738浏览

实例

<!DOCTYPE html> <!-- 第一行为声明,告诉网页你是什么文档类型 -->
<html>
<head><!-- 头部标签可以引入外部资源文件,如:css,js等; -->
	<title>我的第一次作业</title><!-- 在网页头显示信息 -->
	<meta charset="utf-8"><!-- 声明字符集避免乱码 -->
	<link rel="stylesheet" type="text/css" href="static/style.css"><!-- 外部样式 -->
	<!-- link:引入标签;rel:定义本文档与引入文档的联系;type:引入的文档类型; href:要引入的文件地址。 -->
	<link rel="icon" type="image/x-icon" href="image/1.jpg"><!-- 不同文件的引入,rel、type属性都不同。该引入是为了在title上显示图标-->
    <style type="text/css">/*设置内部样式,只针对当前页面*/
   body{}/*background-color: blue;*/
  #one{width: 200px; height: 200px; background:yellow;}/*id选择器:#+名字*/
  .two{width: 200px; height: 250px; background: green;}/*class选择器:.+名字*/
  /*属性选择器*/
   a{color: red}
   a[href="https://www.baidu.com/"]{color:blue}
/*派生选择器 根据文档上下文关系来定义样式*/
  div a{color: black}
  /*#one a{color:pink}*/
div {color:yellow}
</style>
</head> 
<body>
<div id="one"><a href="https://www.baidu.com/" target="new">百度</a></div>
<div class="two"><a href="http://www.php.cn">php中文网</a></div>
<div id="there"></div>
<!-- 使用内联样式,只针对本行,一般按照style:"属性值" --><!-- 优先级:内联样式>内部样式>外部样式 -->
<div><p style="color: purple">十年磨一剑,霜刃未曾试,今日把示君,谁有不平事。</p></div>
</body>
</html>

运行实例 »

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

运行实例:4DK0%]YC%FEI7CRI{P7BY$K.png

总结:

首先呢?以前有学过HTML+css,不过学的比较粗糙,也很久没用了差不多忘得七七八八了,通过这节课,以前的学过的知识也慢慢的想起来一些。

其次、在这节课上也学到了一些以前没学到的知识,比如:

1,HTML的文档各个的作用DOCTYPE的声明作用,link标签各个属性的具体作用,,以前只知道这么用,却不知道为什么要这么用,,说不出个所以然来。

2,样式的优先级上:内联样式(行内style="属性:属性值;")>内部样式(写在head内部 针对当前页面 <style type="text/css"></style>属性选择器,id,class等选择器的声明)>外部样式(css文件)。

3,知道了title上的图标的由来以及怎么写上去。eg:

rel属性定义文档与被链接文档之间的关系

type属性定义被连接文档的类型

href属性定义被连接文档的url地址

<link rel="shortcut icon" type="image/x-icon"href="">设置标题内部的图片.

最后,很感谢老师的讲解,也希望老师能指出我这次作业的不足之处,也很期待自己同大家每天一起进步。

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