欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-03-03 10:22:05
...

在设计简单的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="http://www.php.cn/"]{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="http://www.php.cn/"></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”格式。

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

( 露下我的笔记 )

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

一、<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="http://www.php.cn/"></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">

运行实例 »

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