博主信息
博文 33
粉丝 0
评论 0
访问量 30340
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
HTML基本标签与CSS选择器-2018年8月10号23:00
EmonXu的博客
原创
755人浏览过

    学习前端开发,必须掌握html及CSS的相关知识,这里介绍一下HTML的基本文档结构与常用标签,以及CSS常见选择器,供大家参考学习。

    下列代码,为示例代码。

实例

<!DOCTYPE html> <!-- 声明,可换成xml/xhtml -->
<html>
<head> <!-- 网页头部 -->
	<title>php学习-0810作业</title>
	<meta charset="utf-8">  <!-- 字符集编码,必需 -->
	<link rel="stylesheet" type="text/css" href="static/style.css">  <!-- link链接外部文件 --> <!-- 外部样式 -->
	<link rel="shortcut icon" type="image/x-icon" href="icon/ball.png"> <!-- 链接外部图片,显示在网页头部 -->

	<style type="text/css"> /*内部样式:只针对当前页面*/
	body{background: red} /*标签/标记选择器*/  /*内部样式优先级大于外部样式*/
    #box{width: 200px;height: 200px;background: pink}  /*id选择器*/
    .main{width: 300px;height: 300px;background: green}  /*class类选择器*/
	a{color: blue}
	a[href="http://www.php.cn"]{color:pink } /*属性选择器*/
	a[href="test2.html"]{color:yellow } /*属性选择器*/
	div a{color: blue} /*派生选择器*/
    #box a{color: red} /*派生选择器*/
	</style>
</head>
<body>
<img src="https://img.php.cn/upload/article/000/000/003/5b596217c2850304.jpg">
<a href="http://www.baidu.cn">百度</a>
<a href="http://www.php.cn">PHP中文网</a>
<a href="test2.html">测试网页</a>
<div id="box">
<a href="">php</a>
</div>
<div class="main">
<a href="" style="color:yellow">php2</a> <!-- 内联样式,内联样式优先级大于内部样式 -->
</div>
</body>
</html>

运行实例 »

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

以下为手抄代码:

手抄代码1-小图.jpg

手抄代码2-小图.jpg

批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学