HTML5和CSS3笔记

sunhuachao123

已于 2022-06-17 10:09:49 修改

阅读量520

点赞数

分类专栏： HTML5 CSS3 文章标签： html5 css3

于 2022-06-17 10:03:30 首次发布

本文链接：https://blog.csdn.net/sunhuachao123/article/details/125328256

版权

网页概况

W3C 万维网联盟制定网页开发标准

现在一般使用W3C标准

网页结构，表现，行为

网页结构，表现，行为

结构

HTML用于描述页面结构

表现

CSS用于控制页面中元素的样式

行为

JavaScript用于相应用户操作

HTML

HTML(Hypertext Markup Language) 超文本标记语言

负责结构
使用标签 <>
超文本指超链接

<!-- 文档声明-->
<!doctype html>
<!-- html的根标签（根元素）-->
<html>
	<!--网页的头部，用户看不见，给浏览器看解析网页-->
	<head>
	<!-- meat用来设置网页的元数据，这里通过meta标签设置网页字符集，避免乱码问题-->
			<meta charset="utf-8">
			<title>网页的基本结构</title>
	</head>
	<body>
	<h1>静夜思</h1>
	李白<br>
	<p>举头望明月，</p><!--段落-->
	低头思故乡。
	</body><!--网页主体-->
	</body>
</html>

自结束标签

例如等属于自结束标签，两种写法

标签属性

<html>
	<head>
			<title></title>
	</head>
	<body>
		<!--属性  在标签中（开始标签或自结束标签）还可以设置属性
			属性是一个名值对（x=y）
			属性是对标签的修饰
			
			属性和标签名和其他属性空格隔开
			
			属性不能瞎写，应当按规定来写
				有些属性有属性名，有些没有.属性值用引号引起来，单引号双引号都可以
			-->
		<h1>这是<font color="red" size="1">第二个</font>网页</h1>
		
		
		<!-- 自结束标签 -->
		<!--  <img><img />
		
		<input><input />
		-->
	</body>
</html>

文档声明

<!doctype html>
<html>
	<head>
			<title>网页的基本结构</title>
	</head>
	<body>
	<!-- 
		迭代
			网页版本
			HTML4
			XHTML2.0
			HTML5
			···			
				文档声明（doctype）
				-告诉浏览器当前网页版本
				- html5文档声明
				<!doctype html>
				<!Doctype HTML>
	-->
	
	</body>
</html>

字符编码

编码：将字符转化为二进制的过程

解码：将二进制转化为字符的过程

字符集（charset）：编码和解码所采用的规则

乱码问题：如果编码和解码采用字符集不同会出现乱码

常见字符集：

ASCII 美国

ISO88591欧洲

GBK 中国

UTF-8

<!doctype html>
<html>
	<head>
	<!-- 通过meta标签设置网页字符集，避免乱码问题-->
			<meta charset="utf-8">
			<title>网页的基本结构</title>
	</head>
	<body>
	
	</body>
</html>

实体

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>entity</title>
	</head>
	<body>
		<!-- 
		 在网页中多个空格默认情况下会被解析为一个空格
		 在html中一些情况不能书写一些特殊符号
		 比如多个空格，字母两侧大于小于号:<b>
		 
		 如果要书写需要用到实体（转义字符）
		 实体的语法：
		 &实体的名字;
		 
		 空格 &nbsp;
		 大于号 &gt;
		 小于号 &lt;
		 ···
		 -->
		<p>
			今天&nbsp;&nbsp;天气不错
		</p>
		
		<p>
			a&lt;b&gt;c
		</p>
	</body>
</html>

meat标签

<!DOCTYPE html>
<html>
	<head>
		<!-- meta标签主要用于设置网页的一些元数据 
		charset 指定网页的字符集
		name 指定数据的名称
		content 指定数据的内容
		-->
		<meta charset="utf-8">
		<!-- keywords表示网站的关键字，可以同时使用多个关键字
		descrip网站描述 在搜索页面显示
		···
		title标签的内容可以作为搜索结果的超链接显示-->
		<meta name="keywords" content="HTML5,前端,css3"/>
		<meta name="description" content="这是一个不错的网站"/>
		<!-- 将页面重定向另一个网站 -->
		<meta http-equiv="refresh" content="3,url=https://www.baidu.com/"/>
		<title>entity</title>
	</head>
	<body>
	
	</body>
</html>

语义化标签（块，内联元素）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>entity</title>
	</head>
	<body>
		
		<!--块元素（block element）在页面中独占一行的元素
				-主要对页面进行布局
			内联元素（行内元素）（inline element）不会独占一行-->
				-主要用来包裹文字
		<!-- 
		在使用html标签时，应该关注标签的语义，而不是他的样式 
		
		标题标签 h1~h6
		重要性递减，h1最重要，在网页重要性仅次于title，一般一个页面只有一个h1
		
		 -->
		 
		 <h1>一级标题</h1>
		 <h2>二级标题</h2>
		 
		 <!-- p标签表示一个段落 
				-p元素内不能放任何块元素！！！！
				
		      em标签表示语音语调的加重 
			  strong表示强调重要内容
			  ···
			  -->
		 <p><strong>今天天气<em>真</em>不错</strong></p>
		 
		 <!-- hgroup 用来标题分组 将一组相关的标题放在一起-->
		 
		 <!-- 浏览器在解析网页时会自动将不符合规范的内容进行修正
		  比如 在html外写元素
			   p元素中有块元素-->
			   
		
	</body>
</html>

语义化标签（布局标签）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>entity</title>
	</head>
	<body>
		 
		<!-- 布局标签 -->
		 <!-- header 网页头部
		  main 网页主体 一个网页只有一个
		  footer 网页底部
		  nav 表示网页的导航
		  aside 和主体相关的内容(侧边栏)
		  article 表示一个独立的文章
		  section 表示一个独立的区块 上面的标签不能使用时使用section
		  
		  div没有语义,表示一个区块
		  span 行内元素,没有任何语义,一般用于在网页中选中文字
		  -->
		 
	</body>
</html>

列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>practice</title>
	</head>
	<body>
		<!-- 列表list
		 在html中也可以创建列表，有三种列表
		 1，有序列表
		 2，无序列表
		 3，定义列表 
		 
		 列表间可以互相嵌套
		 -->
		 
		 <!-- 有序列表     ol标签创建y序列表
		  使用li表示列表项
		  -->
		 
		 <!-- 无序列表     ul标签创建无序列表
		  使用li表示列表项
		  -->
		  
		  <!-- 定义列表   使用dl创建定义列表
		   dt表示定义的内容
		   dd对内容进行解释说明-->
		  
		  
	</body>
</html>

超链接和相对路径

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>practice</title>
	</head>
	<body>
		<!-- 超链接
		超链接是一个行内元素，a标签内可以嵌套除它以外的任何元素
		使用a标签定义超链接
		href指定跳转目标路径
				-可以是一个外部网址
				-也可以是内部网址
		 -->
			<!-- 跳转内部页面时，一般时用相对路径
			 相对路径一般用./或../表示
			 ./一般不用写。但默认补上
			 -./相当于当前目录
			 -../相当于上一级目录
			 -->
		<a href="https://www.baidu.com/">百度</a>
		<a href="练习.html">练习</a>
		<a href="path/超链接测试.html">测试</a>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>practice</title>
	</head>
	<body>
		<a href="https://www.baidu.com/" target="_blank">百度</a>
		<a href="练习.html">练习</a>
		<a href="path/超链接测试.html">测试</a>
		
		<!-- 可以跳转到任意标签位置
		 使href="#id"就可以了-->
		 
		<a href="#bottom" >直达底部</a>
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		
		<!-- 
		id 唯一不重复，同一个页面不能出现同一个
		每一个标签都可以添加一个id属性
		
	    回到顶部 
		-->
		<a href="#" id="bottom">回到顶部</a>
		
		<!-- 可以使用javascript:;(js:;)属性当href点击声明都不会发生 -->
		<a href="js:;">广告位招租</a>
	</body>
</html>

图片标签和图片类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>practice</title>
	</head>
	<body>
		<!-- 图片标签用于向当前页面引入一个外部图片 -->
		<!-- alt对图片的描述，图片不能显示时会显示alt描述
				搜索引擎会更具alt内容识别图片
				
				width 图片宽度
				height图片高度
				宽度和高度如果只修改一个另一个会等比例缩放
				一般在pc端 不建议修改 放大图片失真，缩小多占内存
				但在移动端，经常将图片缩小-->
		<img width="200" src="../img/1.jpg" alt="清华园" >
		<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" >
		
		<!-- 图片格式
		 jpeg(jpg)
		 支持颜色丰富,不支持透明,不支持动图
		 gif
		 颜色少,支持简单透明,支持动图
		 png
		 颜色丰富,支持复杂透明,不支持动图
		 webp
		 谷歌新推出的专门用来表示网页图片的一种格式
		 具备其他图片格式的所有优点,文件也小
		 缺点:兼容性太低
		 base64
		 使用base64将图片编码,将图片转化为字符,通过字符引入图片
		 跟随网页一起加载,但一般之用在要求较高的地方(如背景等)
		 
		 -->
	</body>
</html>