博客列表 >第1天-HTML文档结构+CSS—2018年8月10日

第1天-HTML文档结构+CSS—2018年8月10日

alanphp
alanphp原创
2018年08月13日 18:29:52564浏览

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

代码如下:


实例

<!DOCTYPE html>  <!-- 声明html文档类型 -->
<html> <!--  双标签--文档标识符 -- 标签不带属性 -->
<head>  <!-- 网页头 --> 
	<title>php中文网学习-HTML+CSS1</title>  <!-- 网页标题 -->
	<meta charset="utf-8">  <!-- 指定当前网页使用的字符集,如果使用了中文,没有这句话,部分浏览器会出现乱码 -->
	<link rel="stylesheet" type="text/css" href="static/style.css"> <!-- 外联样式引入,链接网页目录下的static文件夹下面的style.css样式 -->
	<link rel="shortcut icon" type="image/x-icon" href="images/logo.png"><!-- 网页头部logo引入,在网页目录下的images下面的logo.png -->
	<style type="text/css">  /*内联CSS样式定义,仅用于本网页*/
		body{background: pink;} /*标签选择符*/
		#box{width: 100px; height: 100px;background: pink}/*id选择符*/
		.middlebox{width: 200px; height: 200px;background: green}/*class选择符*/
		.bigbox{width: 300px; height: 300px;background: yellow}
	</style>
</head>

<body style="background:white;"> <!-- 网页体部分,双标签,在浏览器窗口的用户区内显示的部分 -->

	<img src="">
	<a href="https://www.baidu.com/">百度</a> 超链接
	<a href="http://www.php.cn">php中文网</a>
	<a href=""></a>

	<div id="box"></div>
	<div class="middlebox">This is middlebox class</div>
	<div class="bigbox">bigbox class</div>
</body>
</html>

运行实例 »

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


手写源码:

微信图片_20180813182925.jpg

总结:

通过学习,对HTMl基本的文档结构有了一定的了解包括<html><head><title><meta><link>明白涵义;对CSS里面的选择器进行掌握,包括标签、id、类选择器的应用。

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