博主信息
MO_ON的博客
博文
1
粉丝
131
评论
3
访问量
2478
积分:0
P豆:44.03

HTML/CSS基础知识总结(基本标签和类选择器使用示例)-***八期线上班

2019年12月14日 16:18:13阅读数:2493博客 / MO_ON的博客/ HTML/CSS笔记

在设计简单的web页面时,HTML和CSS的布局是必不可少的。其中不同标签和属性的使用方法及作用更是与网站页面紧密关联。本篇博文就HTML/CSS中相关基础标签和属性使用方法进行总结。

这里有一段相对完整的html/css代码示例如下:

<!DOCTYPE html>
<html>
    <head>
	<title>PHP中文网-视频教程</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="static/style.css">
	<link rel="shortcut icon" type="image/x-icon" href="images/footlogo.png">
	<style type="text/css">
		body{} 
		a{color:red;}
		#box{width:100px;height:100px;background: pink;} 
		.main{width:100px;height:100px;background:green;} 
		a[href="//m.sbmmt.com/"]{color: blue;} 
		a[href="demo2.html"]{color: blue;}  
		div a{color:*000;}
	</style>
    </head>
    <body>
	<img src="">
	<a href="https://www.baidu.com/">百度</a>
	<a href="//m.sbmmt.com/">php中文网</a>
	<a href="demo2.html">demo2</a>
	<div id="box">
	    <a href="">php</a>
	</div>
	<div class="main"></div>
	</body>
</html>

运行实例 »

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

注:以上网页代码文件可以保存为“index.html”或“index.php”格式。

01.png

( 露下我的笔记 )

上述代码中涉及知识点注释总结:

一、<DOCTYPE html>  除html类型外,还有xml 、xhtml。(声明文档类型)

二、HTML中选择器区别

  1. body{}  指的是标记选择器 标签选择器

  2. #box{}  #指的是id选择器

  3. .main{} .表示class选择器 类选择器(类名选择器的优先级要低于ID选择器)

  4. a[]{}  表示属性选择器

  5. div a{}  表示派生选择器

三、<head>中常用的标签:

        <title>  定义网页文档标题

        <meta> 定义网页信息,如文档编码:utf-8

        <link>链接外部文件

            1. 链接样式表 <link rel=“stylesheet” type=“text/css” href=“路径”>

            2. 链接缩略图标<link rel = “shotcut-icon” type=“image/x-icon” href =“路径”>

                    rel 定义文档与文件的关系   type  文件类型     href  文件路径     

        <style> 定义内部样式

四、<body>中常用的标签:

  <a>  定义超链接

实例

<a href="//m.sbmmt.com/">php中文网</a>

运行实例 »

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

 <div> 定义区块

实例

<div style="background:pink;width:200px;height:200px;"></div>

运行实例 »

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

 <img> 定义图片

实例

<img src="http://mat1.gtimg.com/www/qq2018/imgs/qq_logo_2018x2.png">

运行实例 »

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

版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
Pat
  • Pat· 2021-08-02 09:47:214楼
  • 我想咨询您一下PHYTON学习的问题 谢谢

  • 回复
  • G服了U
  • G服了U· 2019-08-30 08:25:423楼
  • <head> 中再加个 <script></script>完美。

  • 回复
  • 阿克苏AA
  • 阿克苏AA· 2019-08-28 14:37:082楼
  • 加油

  • 回复
  • Tony.ma
  • Tony.ma· 2018-08-11 17:05:341楼
  • 不错哦同学~

  • 回复