html5及CSS的学习1

最新推荐文章于 2022-03-27 22:50:44 发布

旧梦时节

最新推荐文章于 2022-03-27 22:50:44 发布

阅读量110

点赞数

文章标签： html css javascript html5

本文链接：https://blog.csdn.net/lqb_zxs/article/details/112487860

版权

文章目录

HTML学习标准的网页结构

1.1 文档声明，用于声明网页的类型

<!DOCTYPE html>

1.2 网页根节点

<html></html>

head标签 :网页信息,比如：标题、图标、编码

1.2.1 网页编码

utf-8、gb2312/gbk (简体中文) big5 (繁体) iso-8859-1
属性 attribute，标签属性用来描述标签特性。格式：属性名=“属性值”
多个属性间用空格隔开

<meta charset="utf-8" />

1.2.2 网页标题

<title>标题</title>

1.2.3 网页图标

在线制作网址：https://tool.lu/favicon/

<link rel="shortcut icon" href="img/favicon.ico" />

1.2.4 引入外部样式

<link href="#" type="text/css"/>

1.2.5 内部样式

<style type="text/css">

</style>

1.2.6 引入外部js

<script src="#"></script>

1.2.7 内部 js

<script type="text/javascript">

</script>

1.3 SEO

1.3.1 网页作者

<meta name="author" content="云创动力"/>

1.3.2 关键字

<meta name="keywords" content="" />

1.3.3 网页描述

<meta name="description" content="" />

1.4 网页中显示的内容

网页标签：使用<>括起来有特殊意义关键字,通常成对出现的
- 成对出现的标签 
- 有开始标记(标签) 
- 有结束标记(标签) 
- 自结束/自封闭标签<meta /> <hr />
 注意：网页的标签不区分大小写，但是通常建议使用小写
元素：标签以及标签中的内容
- 例如： 这是一个段落
- 元素间的关系： dom 树

<html>
	<head>
		<meta charset="utf-8" />
		<title>标题</title>
	</head>
	...
</html>

title 元素是 head元素的直接子元素
head 元素是 title 元素的直接父元素
title 和 meta元素有共同的直接父元素，
title 和 meta 就是兄弟关系（同级元素）
head 是 html 元素的直接子元素
那么 title以及 meta 和 html 的关系是什么？
- 后代元素, 只要是当前元素内的标签都是它的后代元素
元素根据特点分为两大类：内联（行）元素块元素
- 内联(行)元素: span a input strong em button img u i s b
  - 默认情况下，不能独立占父元素一行空间的元素
- 块元素： p div ul ol dl hn form table hr
  - 默认情况下，能够独立占父元素一行空间的元素

	<hr />
	<p>你就站在这不要动，我去给你买橘子</p>
	<nav></nav>
	<div></div>
	<aside></aside>
	<section></section>

1.5 跨页面锚点

<a href="03.html#bottom">03.html#bottom</a>

锚点,可以使用 name 或者 id属性定义其名称

	<a name="top"></a>
	<a href="https://www.baidu.com">百度一下，你啥都不知道</a>
	<a href="01.html">01.html</a>
	<div style="height: 1000px;"></div>
		底部
	<a name="bottom"></a>
	<a href="#top">回到顶部</a>

target:
_blank 新窗口打开链接
_parent 父页面打开链接
_self 本页面打开链接(默认)
_top 最外层页面打开
download 下载,值是下载文件的名称

<a href="https://www.baidu.com" target="_blank">新窗口</a>
<a href="https://www.baidu.com" target="_self">本页面</a>
<a href="https://www.baidu.com" target="_parent">父页面</a>
<a href="https://www.baidu.com" target="_top">最外层页面</a>
<a href="others/zhuiguangzhe.mp3" download="1.mp3">追光者</a>

1.6 iframe

<iframe src="03.html"></iframe>

1.7 音/视频

1.7.1 audio 音频标签

controls 控制按钮
autoplay 自动播放 chrome 在65之后禁止音/视频自动播放
muted 静音
preload 加载
auto 自动默认
none 不预加载
metadata 预加载
loop 循环播放

<button onclick="play()" id="btn">播放</button>
<audio id="audio"  controls autoplay muted preload="none" loop>
	<source src="others/zhuiguangzhe.mp3"></source>
	<source src="others/chuanqi.mp3"></source>
	不支持 audio 标签
</audio>

1.7.2 video 视频控件

controls 控制按钮
poster 视频封面（其他 audio 标签属性也生效）

<video id="video" src="others/tb.mp4" controls poster="img/kedaya.jpeg">
	不支持 video 标签
</video>

1.7.3 滚动字幕

<marquee>冲冲冲</marquee>

1.7.4 js 脚本

<script type="text/javascript">
	// 获取 视频 元素
	var video = document.querySelector("#video");
	// 获取到 播放 按钮
	var btn = document.querySelector("#btn");
	
	// 定义一个函数
	function play(){
		// 向控制台输出
		// console.log(video);
		// 获取视频是否暂停
		var videoStatus = video.paused;
		
		if(videoStatus){
			// 如果是暂停的,就播放
			video.play();
			// 修改按钮文字
			btn.innerText = '暂停';
			
			// video.muted = true; 静音 video.volume = (0~1) 音量
		}else{
			// 如果是暂停的,就暂停
			video.pause();
			// 修改按钮文字
			btn.innerText = '播放';
		}
	}
	function listen(e){
		var code = e.keyCode;
		// 判断 如果是 空格或者 回车按钮 调用 play()
		if (code == 32 || code == 13) {
			play();
		}
	}
	// 添加监听事件
	window.addEventListener("keydown", listen, false);
	</script>

1.8 图片

图片, 使用 src 属性设置其图片源地址
- 图片格式支持： jpg/jpeg png gif bmp
  - jpg/jpeg 它支持极高的压缩率，因此JPEG图像的下载速度大大加快
  - png 支持背景透明
  - gif 动图
  - bmp 位图几乎不进行压缩
- title 几乎所有的html标签都有此属性，当鼠标悬停在标签上时显示其值
- alt 如果图片不能正常显示时，显示其值

1.8.1 本地图片

<img src="img/kedaya.jpeg" title="这是只可达鸭"/>

1.8.2 在线图片

<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2754047318,4189079953&fm=26&gp=0.jpg" />

1.8.3 加密后的图片， Base64 编码过后的图片

<img src="img/kedaya1.jpeg" title="这是只可达鸭" alt="可达鸭"/>

1.9 class 选择器

内部样式

<style type="text/css">
	/* class 选择器， 区分大小写 */
	.success{
		color: red; /* 文字颜色 */ 
	}
</style>

<div class="success">
    在 div 元素的 class 属性中仅使用单个 className 
</div>
<p class="first success"> 
    在 p 元素的 class 属性中指定两个 className
</p>
<span class="flag success test">
    在 span 元素的 class 属性中指定三个 className
</span>

1.10 属性选择器

<style type="text/css">
	[type]{
		color: red;
	}
	
	[class~=wrapper]{
		color: blue;
	}
	
</style>

<form action="http://www.baidu.com/s">
	<input type="text" name="wd">
	<input type="submit" value="百度一下">
</form>
<div class="wrapper first odd">wrapper first odd</div>
<div class="wrapper second even">wrapper second even</div>
<div class="wrapper">wrapper</div>

一、CSS学习

1.1 定义

层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种样式表语言，用来描述 HTML 或 XML(包括如 SVG、MathML、XHTML 之类的 XML 分支语言)文档的呈现。
CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。
网页三要素:

HTML标签决定页面上元素的基本结构
CSS 用于设置HTML元素的样式
JavaScript 用于控制页面上的行为

1.2 语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

s1elector {declaration1; declaration2; ... declarationN }

选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和值组成。
属性（property）是您希望设置的样式属性（style property）。每个属性有一个值。属性和值被冒号
分开。

s1elector {property: value;}

例如：

h11 {color:red; font-size:14px;}

h1 是选择器，color 和 font-size 是属性，red 和 14px 是值
作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素
在这里插入图片描述
提示：使用花括号 {} 来包围声明

1.3 用法

在 HTML 文档中使用 CSS 有四种不同的用法，这里分别予以简单介绍。

1.3.1 内联样式

直接通过元素的 style 属性（attribute）来指定的样式被称作内联样式 (也有人称作行内样式 )。
比如:

<div style=" border : 1px solid blue ; width : 50% ; height : 100px ; " > 
</div>

说的更直接些，就是在开始标签中通过标签的 style 属性(attribute)来指定元素的样式。
必须注意，这里的 style 属性(attribute)是属于当前元素的 (即当前标签的)。

1.3.2 内部样式

所谓内部样式，就是在 HTML 文档中，通过 style 元素来嵌入CSS样式。

<style type="text/css"> 
</style>

这里需要特别注意， style 是一个 HTML 标签，属于HTML范畴，不属于CSS代码。
而在之间书写的内容才属于 CSS 代码。

通常建议将 style 元素添加到 head 元素内部:

<head>
	... 
	<style type="text/css"> 
	</style> 
</head>

也可以根据实际情况来确定 style 元素的位置。
内部样式使用范围是当前页面(html文件)

1.3.3 外部样式表

单独的 CSS (后缀是 .css )文件，当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用<link>标签链接到样式表。 <link> 标签在（文档的）头部：

<head> 
	<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：

hr {color: sienna;} 
p {margin-left: 20px;} 
body {background-color: #ccc;}

1.3.4 @import

@import 用于从其他样式表导入样式规则

@import url;

url 表示要引入资源位置

@import 'custom.css'; 
@import url("fineprint.css") print;

1.3.5 样式优先级

内联样式 > 内部样式 > 外部样式
可以在属性值的后面添加 !important 提升样式的优先级

1.4 选择器

选择器是用来决定要改变谁的样式，选择器可以分为四类十七种，我们将其简化。我们接下来要介绍几种，标签选择器、ID选择器、class选择器、子元素选择器、后代选择器、伪类、通配选择器、组合选择器。

1.4.1 标记(标签)选择器: 网页标签名与选择器同名

标记选择器 也称作 标签选择器 ，英文中写作 tag selector ，其基本用法为:

tagName { 
	propertyName : propertyValue ; 
	... 
}

其作用是选择页面上所有匹配于该 tagName 的元素

<html> 
	<head> 
	<style type="text/css"> 
		html {color:black;} 
		h1 {color:blue;} 
		h2 {color:silver;} 
	</style> 
	</head> 
	<body> 
		<h1>这是 heading 1</h1> 
		<h2>这是 heading 2</h2> 
		<p>这是一段普通的段落。</p> 
	</body>
<html>

该选择器不区分大小写

1.4.2 Class选择器:网页哪个标签使用Class选择器,就在标签添加class属性，值就是Class选择器名称

class 选择器也称作 class 选择符，英文中称作 class selector ，其基本用法为:

className {
 
}

其作用是选择页面上元素 class 属性（attribute）中包含指定 className 的元素。
因为在同一个HTML元素的 class 属性中可以包含 0 ~ n 个 className ，比如:

<div class="success"> 
	在 div 元素的 class 属性中仅使用单个 className 
</div> 
<p class="first success"> 
	在 p 元素的 class 属性中指定两个 className 
</p> 
<span class="flag success test"> 
	在 span 元素的 class 属性中指定三个 className 
</span>

因此通过 .success 就可以选择以上代码中的 div 、p、span 元素:

.success { 
	color : red ;
}

另外注意:
将这里的 class selector 翻译成类选择器，将 className 翻译成类名是及其不合适的。

1.4.3 属性选择器

属性选择器也称作属性选择符，英文中称作 attribute selector 。其基本用法为:

[attributeName] {
 
}

其作用是根据 HTML 元素的属性来选择相应的元素。
属性选择器的用法比较多，以下表格中列举了部分属性选择的用法和作用。
在这里插入图片描述
我们仅学习较为常用的三种: [attributeName] 、 [attributeName=value] 、 [attributeName~=value] 。

1.4.3.1 [attributeName]

[attributeName] 形式的属性选择器用于选择拥有 attributeName 属性的 HTML 元素。
比如对于以下HTML元素来说:

<form action="http://www.baidu.com/s"> 
	<input type="text" name="wd"> 
	<input type="submit" value="百度一下"> 
</form>

[type] 可以选择两个 input 元素，因为它们都拥有了 type 属性
[type] 无法选择 form 元素，因为 form 元素不拥有 type 属性
使用 [attributeName] 形式的属性选择器选择元素时需注意:
仅关注元素是否拥有指定 attributeName 对应的属性
与属性的属性值无关 ( 即不考虑该属性的属性值 )

1.4.3.2 [attributeName=value]

[attributeName=value] 形式的属性选择器用于选择拥有指定属性且该属性值仅等于指定值的HTML 元素。
比如对于以下 HTML 元素来说:

<div class="wrapper first odd"></div> 
<div class="wrapper second even"></div> 
<div class="wrapper"></div>

使用 [class=wrapper] 可以选择以上三个 div 元素中的最后一个元素，而不能选择前两个元素。
因为只有最后一个 div 元素的 class 属性取值等于 wrapper ，另外两个 div 元素的 class 属性中只能说是包含 wrapper 。
所以这里要注意:
采用 [attributeName=value] 形式的属性选择器选择HTML元素时，元素的属性值必须是等于指定值。

1.4.3.3 [attributeName~=value]

[attributeName~=value] 形式的属性选择器用于选择拥有指定属性且该属性值包含指定值的HTML 元素。
比如对于以下 HTML 元素来说:

<div class="wrapper first odd"></div> 
<div class="wrapper second even"></div> 
<div class="wrapper"></div>

使用 [class~=wrapper] 选择以上三个 div ，此时的 [class~=wrapper] 作用与 .wrapper 是相同的。