第一章 HTML5基础

最新推荐文章于 2023-04-27 08:03:11 发布

斑马有点困

最新推荐文章于 2023-04-27 08:03:11 发布

阅读量884

点赞数 2

分类专栏： # web前端笔记文章标签： html5 前端 html

本文链接：https://blog.csdn.net/qq_36827283/article/details/125046070

版权

笔记同时被 2 个专栏收录

56 篇文章 1 订阅

订阅专栏

web前端

14 篇文章 0 订阅

订阅专栏

第一章 HTML5基础

什么是前端开发？

以一个网站为例包括网站设计、前端开发、程序开发
等。网站设计就是网站的外观，平面的东西。程序开发也
好理解就是功能实现。而前端开发，简单来说，就是把
平面效果图转换成网页，把静态转换成动态。它的工作包
括了:切图、写样式、做鼠标效果和图片切换效果等。而
优秀的前端开发可以保障实现这些效果的同时，即不能影
响网站的打开速度、浏览器兼容性还有搜索引擎的收录，
还可以让用户体验更加舒适，使网站在访问中显得更精细、
更用心。访客使用起来更简便。另外，现在前端工作还不
仅仅只是网页的制作，还有微网站、APP的制作，游戏制
作，例如可以将你开发的Web页面直接打包成手机使用的
APP应用，游戏的互动界面更是以前端开发技术为主。

什么是HTML

Hyper Text Markup Language（超文本标记语言）
HTML,即超文本标记语言,所谓标记，标记语言是一套标记标签,网页中的所有元素都是需要标记在网页中展示给用户的效果。不需要编译,直接由浏览器执行.不同于C语言，java语言等

什么是HTML5

万维网联盟的核心语言(W3C<world,wide,web,Consortium >)、超文本标记语言（HTML）的第五次重大修改。HTML5 已经于2014年10月正式定稿。然而，大部分现代浏览器已经具备了某些HTML5支持。HTML5是web时代最前沿的技术。

在这里插入图片描述

W3C
World Wide Web Consortium（万维网联盟）
成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构
http://www.w3.org/
http://www.chinaw3c.org/
W3C标准包括
结构化标准语言（XHTML 、XML）
表现标准语言（CSS）
行为标准（DOM、ECMAScript ）

HTML5的优势

世界知名浏览器厂商对HTML5的支持
微软
Google
苹果
Opera
Mozilla
市场的需求
跨平台
在这里插入图片描述

标签的语法

1、用一对英文< >括起来.
2、<>内部是英文符号，不同符号代表不同含义
3、标签不区分大小写
4、标签分类
A)、成对标签。比如

B)、空标签。比如

C)、带属性标签。比如

HTML基本结构

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		
	</body>
</html>

< body>、等成对的标签，分别叫开放标签和闭合标签
单独呈现的标签（空元素），如

；意为用 / 来关闭空元素

页面背景色或背景图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第一个页面</title>
	</head>
	<body bgcolor="yellowgreen" background="img/AAXAh9Z.jpg">
		
	</body>
</html>

网页的基本标签

标题标签

<h1>…</h1>
<h2>…</h2>
<h3>…</h3>
<h4>…</h4>
<h5>…</h5>
<h6>…</h6>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>标题标签</title>
	</head>
	<body>
		<h1>星期一</h1>
		<h2>星期二</h2>
		<h3>星期三</h3>
		<h4>星期四</h4>
		<h5>星期五</h5>
		<h6>星期六</h6>
	</body>
</html>

换行标签

<br/>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>p标签又叫段落标签,用来包含一段文字,内容会自动换行</p>
		<p>标签上下都会换行</p>
		奥术大师大所多
		<p>近日，欧美多国猴痘疫情成为全球关注焦点。<br/>
		截至目前，英国、美国、西班牙、葡萄牙、瑞典、意大利、加拿大等均出现猴痘病例。<br/>
		5月20日，世界卫生组织报告：全球共有11个既往非流行的国家出现了猴痘病例，<br/>
		其中大约有80例确诊病例、50例待确诊的疑似病例。</p>
	</body>
</html>

水平线标签

<hr/>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>p标签又叫段落标签,用来包含一段文字,内容会自动换行</p>
		<p>标签上下都会换行</p>
		<hr />
		<p>近日，欧美多国猴痘疫情成为全球关注焦点。<br/>
		截至目前，英国、美国、西班牙、葡萄牙、瑞典、意大利、加拿大等均出现猴痘病例。<br/>
		5月20日，世界卫生组织报告：全球共有11个既往非流行的国家出现了猴痘病例，<br/>
		其中大约有80例确诊病例、50例待确诊的疑似病例。</p>

	</body>
</html>

字体样式标签

加粗：<strong>…</strong>
斜体：<em>…</em>
下划线:<u>...</u>

<p>近日，<strong>欧美多国</strong>猴痘疫情成为全球关注焦点。<br/>
		截至目前，<em>英国、美国</em>、西班牙、<b>葡萄牙</b>、<i>瑞典</i>、意大利、加拿大等均出现猴痘病例。<br/>
		5月20日，世界卫生组织报告：全球共有11个既往非流行的国家出现了猴痘病例，<br/>
		其中大约有80例确诊病例、50例待确诊的疑似病例。</p>

注释和特殊符号

在这里插入图片描述

<p>
			世界&nbsp;卫生&lt;&gt; &quot;组织报告：&copy;全球共有11个既往非流行的国家出现了猴痘病例
			
		</p>

图像标签

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nJkwbA8J-1653892290614)(D:\课件\笔记\HTML5基础.assets\image-20220523102423430.png)]$

<img src="img/AAXAh9Z.jpg" alt="没有找到该图片" title="刘德华" height="200px" width="900px">
图片的高度,宽度通常使用 px ,要注意比例,防止失真,可以只写一个

图像与文本的对齐方式

图像与文本居中对齐,还可以取
top, bottom 值

<img align="middle">

<img src="img/AAXAh9Z.jpg" align="middle" alt="没有找到该图片" title="刘德华" height="200px" width="900px">
图片的高度,宽度通常使用 px ,要注意比例,防止失真,可以只写一个

链接标签(超链接)

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-17expcB0-1653892290615)(D:\课件\笔记\HTML5基础.assets\image-20220523104313014.png)]$

<p>
			<a href="index.html" target="_blank">自己的主页</a>
			<a href="https://www.baidu.com">百度</a>
		</p>
		<a href="test01.html">
			<img src="img/AAXAh9Z.jpg" >
		</a>

HTML 链接 - target 属性

使用 Target 属性，你可以定义被链接的文档在何处显示。

在这里插入图片描述

锚链接

<a name="label">锚（显示在页面上的文本）</a>

提示：锚的名称可以是任何你喜欢的名字。

提示：您可以使用 id 属性来替代 name 属性，命名锚同样有效

		<!-- 顶部锚点 -->
		<a href="#bottom" name="top">直达底部</a>
		省略中间代码。。。
		<!-- href中的内容是 #name -->
		<a href="#top" name="bottom">返回顶部</a>

功能性链接

<p>
这是邮件链接：
<a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>
</p>

<p>
<b>注意：</b>应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。
</p>

滚动标签

在这里插入图片描述

<marquee scrolldelay="500" direction="up">
			喆今天又没有好好学习
		</marquee>

列表

什么是列表
列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息
列表的分类
无序列表
有序列表
定义列表

无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

在这里插入图片描述

<ul>
			<li>宋及今天又迟到了</li>
			<li>刘鹏的袜子丢了</li>
			<li>却加以的牙掉了</li>
			<li>张强强的头掉了</li>
			<li>黄元今天忘吃药了</li>
		</ul>

有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。

在这里插入图片描述

<ol>
			<li>宋级为何频频迟到</li>
			<li>刘鹏的袜子为何频频丢失</li>
			<li>却加以的牙为何而掉</li>
			<li>是人性的扭曲还是道德的沦丧</li>
			<li>敬请观看阿远的堕落之路</li>
		</ol>

定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以

标签开始。每个自定义列表项以开始。每个自定义列表项的定义以

开始。

视频和音频

如何实现在网页上播放视频和音频？
第三方自主开发的播放器
Flash
HTML5媒体元素

Web 上的音频

audio 元素能够播放声音文件或者音频流。

音频格式

当前，audio 元素支持三种音频格式：

	IE 9	Firefox 3.5	Opera 10.5	Chrome 3.0	Safari 3.0
Ogg Vorbis		√	√	√
MP3	√			√	√
Wav		√	√		√

<audio src="img/我的好兄弟.mp3" controls></audio>

属性

在这里插入图片描述

<audio src="img/我的好兄弟.mp3" loop="loop" controls="controls" autoplay="autoplay" ></audio>

视频格式

当前，video 元素支持三种视频格式：

格式	IE	Firefox	Opera	Chrome	Safari
Ogg	No	3.5+	10.5+	5.0+	No
MPEG 4	9.0+	No	No	5.0+	3.0+
WebM	No	4.0+	10.6+	6.0+	No

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

在这里插入图片描述

预格式标签

<pre>
			<img src="img/AAXAh9Z.jpg" alt="">
			猴痘主要在西非和中非地区流行，非洲大陆之外的首次猴痘疫情于2003年出现在美国。
			2018年以来，
			
			
			以色列、英国、新加坡等国在
			
			来自尼日利亚的旅客中发现猴痘病毒感染者。
		</pre>

表格

在这里插入图片描述

语法

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zb8lOz1q-1653892290618)(D:\课件\笔记\HTML5基础.assets\image-20220524092517622.png)]$

<table border="1px" height="500px" width="400px"><!-- 表格-->
			<tr><!-- 一行 -->
				<td>学号</td><!-- 单元格 -->
				<td>姓名</td>
				<td>成绩</td>
			</tr>
			<tr>
				<td>1</td>
				<td>张三</td>
				<td>20</td>
			</tr>
			<tr>
				<td>2</td>
				<td>李小浩</td>
				<td>59.5</td>
			</tr>
			<tr>
				<td>3</td>
				<td>宋打折</td>
				<td>0.5</td>
			</tr>
		</table>

表格的表头

表格的表头使用标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本：

<table border="1px" height="500px" width="400px"><!-- 表格-->
			<tr><!-- 一行 -->
				<th>学号</th><!-- 单元格 -->
				<th>姓名</th>
				<th>成绩</th>
			</tr>
			<tr>
				<td>1</td>
				<td>张三</td>
				<td>20</td>
			</tr>
			<tr>
				<td>2</td>
				<td>李小浩</td>
				<td>59.5</td>
			</tr>
			<tr>
				<td>3</td>
				<td>宋打折</td>
				<td>0.5</td>
			</tr>
		</table>

合并单元格

colspan实现跨列

rowspan实现跨行

<table border="1px" height="500px" width="400px"><!-- 表格-->
			<tr><!-- 一行 -->
				<th>学号</th><!-- 单元格 -->
				<th>姓名</th>
				<th>成绩</th>
			</tr>
			<tr>
				<td colspan="2">1</td>
				<!-- <td>张三</td> 跨列，需要删除多余单元格 -->
				<td>20</td>
			</tr>
			<tr>
				<td rowspan="2">2</td> <!--跨行 -->
				<td>李小浩</td>
				<td>59.5</td>
			</tr>
			<tr>
				<!-- <td>3</td> 跨行需要删除多余单元格 -->
				<td>宋打折</td>
				<td>0.5</td>
			</tr>
		</table>

尺寸

单位	描述
%	百分比
in	英寸
cm	厘米
mm	毫米
em	1em 等于当前的字体尺寸。2em 等于当前字体尺寸的两倍。例如，如果某元素以 12pt 显示，那么 2em 是24pt。在 CSS 中，em 是非常有用的单位，因为它可以自动适应用户所使用的字体。
ex	一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。)
pt	磅 (1 pt 等于 1/72 英寸)
pc	12 点活字 (1 pc 等于 12 点)
px	像素 (计算机屏幕上的一个点)

颜色

单位	描述
(颜色名)	颜色名称 (比如 red)
rgb(x,x,x)	RGB 值 (比如 rgb(255,0,0))
rgb(x%, x%, x%)	RGB 百分比值 (比如 rgb(100%,0%,0%))
#rrggbb	十六进制数 (比如 #ff0000)