HTML/HTML5基础笔记

最新推荐文章于 2024-05-09 09:09:46 发布

qq_43645678

最新推荐文章于 2024-05-09 09:09:46 发布

阅读量1.9k

点赞数 3

分类专栏： # 前端基础文章标签： html基础笔记

本文链接：https://blog.csdn.net/qq_43645678/article/details/88807566

版权

前端基础专栏收录该内容

7 篇文章 3 订阅

订阅专栏

HTML/HTML5笔记

1. HTML 基本概念

在这里插入图片描述

1. 浏览器概念

概念：
- 浏览器是安装在电脑里面的一个软件，能够将网页内容呈现给用户查看，并让用户与网页交互的一种软件
- Internet 全球范围内网络的网络
- World Wide Web(万维网) Internet 的一部分，图形信息系统由包含各种信息的文档组成
主流浏览器：
浏览器内核：
- 不同的浏览器有不同的浏览器内核，浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容，从而导致了浏览器兼容性问题出现

浏览器	内核
IE	Trident
Google	WebKit / Blink
FireFox	Gecko
Safari	WebKit
Opera	Presto

2. 服务器概念

概念：
- 服务器是比我们的电脑配置更高的电脑，并且24小时不断电，不关机的计算机
- 服务器是专门用于存储数据电脑，访问者可以访问服务器获得服务器上存储的资源
- 服务器一旦关机，访问者就无法访问

3. 访问网页原理

3.1 浏览器请求数据的原理

访问网站时是有真实的、物理的文件传输的
网站是一个资源的集合，包含各类网页文件和资源文件
我们之所以平常感觉第二次访问比第一次访问快的原因就是，第一次访问时已经将所有文件缓存到了本地

3.2 浏览器请求数据的过程

浏览器根据输入的URL地址发送请求报文
服务器接收到请求报文，会对请求报文进行处理
服务器将处理完的结果通过响应报文返回给浏览器
浏览器解析服务器返回的结果，将结果显示出来

3.3 网页类型

	静态网页	动态网页
内容	网页内容固定	网页内容动态生成
后缀名	.htm, .html	.asp, .jsp, php等
优点	无需系统实时生成，网页风格灵活多样	日常维护简单, 更改结构方便，交互性强，自动更新，因时因人因地而异
缺点	交互性能较差，日常维护繁琐	需要大量的系统资源合成网页
数据库	不支持	支持

4. URL 概念

概念：
- 在浏览器的地址栏中输入的地址其实就是URL
- URL全称Uniform Resource Locator(统一资源定位符)，互联网上的每一个资源都有一个唯一的URL地址
- URL的基本构成
  - 协议名
  - 服务器名
  - 文件名
  - 参数

4.1 URL 格式

127.0.0.1/index.html （浏览器会自动补全http:和：80）
http://127.0.0.1/index.html （浏览器会自动补全：80）
http://127.0.0.1:80/index.html （完整格式）
协议类型://ip地址:端口号/资源路径/资源名称

4.2 URL 拆分

网络协议类型 http://
服务器IP地址 127.0.0.1
服务器端口号 :80
资源路径 网页在服务器上的路径
资源名称 index.html

5. HTTP 协议

概念：
- HTTP是Hypertext Transfer Protocol的缩写, 超文本传输协议
- HTTP协议就相当于我们让两个人都说中文或者都说英文一样, 就是提前规范两个人之间如何沟通, 也就是规范/约束浏览器和服务器之间如何沟通

2. 初识 HTML

1. HTML 发展历史

在这里插入图片描述

2. HTML 作用

HTML 专门用来描述文本的语义的

用于描述其它文本语义的文本, 我们称之为标签
用于描述文本语义的标签将来在浏览器中是不会被显示出来的
所以我们称这些文本为"超文本", 而这些文本又叫做标签, 所以HTML被称之为"超文本标记语言"

3. 第一个 HTML 网页

3.1 HTML标准结构

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

4. HTML 字符集问题

乱码问题
- 因为我们在编写网页的时候没有指定字符集
解决乱码现象
- 在head标签中添加<meta charset="UTF-8" />, 指定字符集
什么是字符集
- 字符集就是字符的集合
- 在网页中我们常见的字符集有两个GBK/UTF-8
GBK(GB2312)和UTF-8区别
- GBK(GB2312)里面存储的字符比较少, 仅仅存储了汉字和一些常用外文
  - 体积比较小
- UTF-8里面存储的世界上所有的文字
  - 体积比较大
注意点：
- 在HTML文件中指定的字符集必须和保存这个文件的字符集一致, 否则还是会出现乱码
- 仅仅指定字符集不一定能解决乱码问题, 还需要保存文件的时候, 文件的保存格式必须和指定的字符集一致才能保证没有乱码问题

5. DTD 文档声明

概念：
- 由于HTML有很多个版本的规范, 每个版本的规范之间又有一定的差异
- 为了让浏览器能够正确的编译/解析/渲染我们的网页, 需要在HTML文件的第一行告诉浏览器, 当前这个网页是用哪一个版本的HTML规范来编写的
- 浏览器知道了用哪一个版本的规范来编写之后, 它就能够正确的编译/解析/渲染网页
DTD文档声明格式:

<!DOCTYPE html>

注意点：
- <!DOCTYPE> 必须是 HTML 文档的第一行，位于 <html> 标签之前
- <!DOCTYPE> 不是 HTML 标签；它指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令
- 请始终向 HTML 文档添加<!DOCTYPE> 声明，这样浏览器才能获知文档类型
- <!DOCTYPE> 没有结束标签,对大小写不敏感
- 若声明错误或未声明会导致文档以兼容模式/混杂模式呈现
HTML的DTD文档声明和XHTML的DTD文档声明有何区别?
- XHTML本身规定比如标签必须小写、必须严格闭合、必须使用引号引起属性等等
- 而HTML会更加松散没有这么严格

6. HTML和XHTML、HTML5区别

HTML语法非常宽松容错性强
XHTML更为严格,它要求标签必须小写、必须严格闭合、标签中的属性必须使用引号引起等等;
HTML5是HTML的下一个版本所以除了非常宽松容错性强以外,还增加许多新的特性

7. .htm 和 .html扩展名区别

DOS操作系统（win95或win98）下只能支持长度为3的后缀名，所以是htm
但在windows后缀长度可以大于3位，所以windows下无所谓htm与html，html是为长文件的格式命名的
所以htm是为了兼容过去的DOS命名格式存在的

3.HTML基础标签

1. html标签

<html lang="en" dir="ltr"></html>

注意点

html 标签是HTML页面的根元素，其中的lang属性可用于标记网页或部分网页的语言
en定义语言为英语,zh-CN定义语言为中文
lang这个属性不仅仅可以用在html标签上

作用：

根据根据lang属性来设定不同语言的css样式，或者字体。
告诉搜索引擎做精确的识别
让语法检查程序做语言识别
帮助翻译工具做识别
帮助网页阅读程序做识别
当搜索引擎或者浏览器拿到语言标签后，有可能做一些针对指定语言的辅助操作等等

注意点

dir是国际化属性中的一员，dir属性定义了文字在浏览器中的排列方向
如果定义整个HTML文档的排列方向应该在html标签中定义dir属性, 其它HTML标签也可以定义dir属性
默认值：ltr – 代表左到右的排列方式 rtl – 代表右到左的排列方式

2. head标签

<head></head>

定义和用法

head 标签用于定义文档的头部，它是所有头部元素的容器
head 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等
文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等
绝大多数文档头部包含的数据都不会真正作为内容显示给读者
下面这些标签可用在 head 部分：base, link , meta , script , style , 以及 title
title 定义文档的标题，它是 head 部分中唯一必需的元素

提示和注释

应该把 <head>标签放在文档的开始处，紧跟在<html>后面, 并处于 <body>标签或<frameset>标签之前
请记住始终为文档规定标题！

3. 常用的meta标签

作用

搜索引擎优化(seo)
定义页面使用语言
自动刷新并指向新的页面
实现网页转换时的动态效果
控制页面缓冲
网页定级评价
控制网页显示的窗口等

	<!-- 声明文档使用的字符编码 -->
	<meta charset='utf-8'>
	
	<!-- http-equiv属性 -->
	<meta http-equiv="参数" content="参数变量值">
	
	<!--Expires(期限)--设定网页到期时间，一旦网页过期，必须到服务器上重新传输--必须使用GMT的时间格式。-->
	<meta http-equiv="expires" content="Fri,12Jan200118:18:18GMT">

	<!-- Pragma(cache模式)--禁止浏览器从本地计算机的缓存中访问页面内容--这样设定，访问者将无法脱机浏览-->
    <meta http-equiv="Pragma" content="no-cache">

	<!-- Refresh(刷新)--自动刷新并指向新页面--其中的2是指停留2秒钟后自动刷新到URL网址-->
    <meta http-equiv="Refresh" content="2; URL=http://www.baidu.com"> //(注意后面的引号，分别在秒数的前面和网址的后面)

	<!-- Set-Cookie(cookie设定)--如果网页过期，那么存盘的cookie将被删除--必须使用GMT的时间格式-->
    <meta http-equiv="Set-Cookie" content="cookie value=xxx; expires=Friday,12-Jan-200118:18:18GMT；path=/">

	<!-- Window-target(显示窗口的设定)--强制页面在当前窗口以独立页面显示--用来防止别人在框架里调用自己的页面-->
	<meta http-equiv="Window-target" content="_top">	

	 <!-- content-Type(显示字符集的设定)--设定页面使用的字符集--meta标签的charset的信息参数如GB2312时，代表说明网站是采用的编码是简体中文；meta标签的charset的信息参数如UTF-8时，代表世界通用的语言编码；-->
    <meta http-equiv="content-Type" content="text/html;charset=gb2312">

	<!-- content-Language（显示语言的设定）-->
	<meta http-equiv="Content-Language" content="zh-cn"/>

	<!-- imagetoolbar--指定是否显示图片工具栏，当为false代表不显示，当为true代表显示-->
	<meta http-equiv="imagetoolbar" content="false"/>

	<!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

	<!-- 优先使用 IE 最新版本和 Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

	<!--name属性-->
	<meta name="参数" content="具体的参数值">
	
	<!-- 页面搜索关键词 -->
    <meta name="keywords" content=""/>

	<!-- 页面描述 -->
    <meta name="description" content="不超过150个字符"/>
    
    <!-- robots(机器人向导)--robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引--content的参数有all,none,index,noindex,follow,nofollow。默认是all -->
    <!--all：文件将被检索，且页面上的链接可以被查询-->
    <!--none：文件将不被检索，且页面上的链接不可以被查询-->
    <!--index：文件将被检索-->
    <!--follow：页面上的链接可以被查询-->
    <!--noindex：文件将不被检索，但页面上的链接可以被查询-->
    <!--nofollow：文件将被检索，但页面上的链接不可以被查询-->
    <meta name="robots" content="all">
    
    <!-- 网页作者 -->
    <meta name="author" content="name, email@gmail.com"/>
    
    <!-- generator的信息参数，代表说明网站的采用的什么软件制作 -->
	<meta name="generator" content="信息参数"/>
    
    <!-- copyright的信息参数，代表说明网站版权信息 -->
	<meta name="copyright" content="信息参数">

	<!-- revisit-after代表网站重访,7days代表7天，依此类推 -->
	<meta name="revisit-after" content="7days">

	<!-- viewport标记，用于指定用户是否可以缩放Web页面，并对相关的选项进行设定 -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

4. link标签

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

定义和用法

link 标签定义文档与外部资源的关系
link 标签最常见的用途是链接样式表

注意：link 元素是空元素，它仅包含属性
注意：此元素只能存在于 <head> 部分，不过它可出现任何次数

属性

属性	值	描述
charset	char_encoding	HTML5 中不支持。
href	URL	规定被链接文档的位置。
hreflang	language_code	规定被链接文档中文本的语言
media	media_query	规定被链接文档将被显示在什么设备上。
rel	alternate / author / help / icon / licence / next / pingback / prefetch / prev / search / sidebar / stylesheet / tag	规定当前文档与被链接文档之间的关系。
rev	reversed relationship	HTML5 中不支持。
sizes	heightxwidth/any	规定被链接资源的尺寸。仅适用于 rel=“icon”。
target	_blank /_self /_top / _parent /frame_name	HTML5 中不支持。
type	MIME_type	规定被链接文档的 MIME 类型。

5. title标签

<title>文档标题</title>

定义和用法

<title>元素可定义文档的标题
浏览器会以特殊方式来使用标题，并通常把它放置在浏览器窗口的标题栏或状态栏上
文档加入用户的链接列表或收藏夹或书签列表时，标题将成为该文档链接的默认名称

6. body标签

<body>文档内容</body>

定义和用法

body 元素定义文档的主体
body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）

7. style标签

<html>
	<head>
		<style type="text/css">
			h1 {color:red}
			p {color:blue}
		</style>
	</head>
	<body>
		<h1>Header 1</h1>
		<p>A paragraph.</p>
	</body>
</html>

定义和用法

<style>标签用于为HTML文档定义样式信息
在 style 中，您可以规定在浏览器中如何呈现 HTML 文档
type 属性是必需的，定义 style 元素的内容。唯一可能的值是 “text/css”
如需链接外部样式表，请使用<link>标签
style 标签支持 HTML 中的全局属性和事件属性

4. HTML 语法要求

4.1 HTML 标签问题

标签和换行、空格、Tab的关系
- 标签的显示不受换行、Tab影响
- 标签中的空格会出现折叠现象
标签必须正确闭合和嵌套

4.2 注释问题

注释

<!--这是注释的内容-->

4.3 HTML 文件路径

文件路径描述了网站文件夹结构中某个文件的位置

4.3.1 绝对路径

绝对文件路径是指向一个因特网文件的完整 URL
- 例如：https://www.w3school.com.cn/images/picture.jpg

4.3.2 相对路径

相对路径指文件的相对位置

路径	描述
picture.jpg	位于与当前网页相同的文件夹
images/picture.jpg	位于当前文件夹的 images 文件夹中
/images/picture.jpg	当前站点根目录的 images 文件夹中
…/picture.jpg	位于当前文件夹的上一级文件夹中

5. HTML 标签基本类型

1. 文本类标签

1.1 标题标签

<body>
	<h1>一级标题</h1>
	<h2>二级标题</h2>
	<h3>三级标题</h3>
	<h4>四级标题</h4>
	<h5>五级标题</h5>
	<h6>六级标题</h6>
</body>

运行结果
定义和用法

h1 - h6 标签可定义标题级别。 h1 定义级别最大的标题。 h6 定义级别最小的标题
由于 h 元素拥有确切的语义，因此慎重地选择恰当的标签层级来构建文档的结构
因此，不能利用标题标签来改变同一行中的字体大小
相反，应当使用层叠样式表定义来达到漂亮的显示效果

1.2 HTML 段落标签

<body>
	<p>这是一个段落。</p>
	<p>这是一个段落。</p>
	<p>这是一个段落。</p>
</body>

在这里插入图片描述

定义和用法

p 标签定义段落
p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，也可以在样式表中规定

1.3 HTML 文本标签

<body>
	//文本换行
	<br />
	
	//文本加粗
	<b>加粗内容</b>
	<strong>加粗内容</strong>
	
	//文本倾斜
	<em></em>  <i></i>
	
	//水平线
   	<hr />空标记
	
	//删除线样式
	<s>内容</s>
</body>

1.4 HTML 特殊符号标签

显示结果	描述	实体名称	实体编号
	空格	&nbsp ;	&#160 ;
<	小于号	&lt ;	&#60 ;
>	大于号	&gt ;	&#62 ;
&	和号	&amp ;	&#38 ;
"	引号	&quot ;	&#34 ;
’	撇号	&apos ; (IE不支持)	&#39 ;
￠	分（cent）	&cent ;	&#162 ;
£	镑（pound）	&pound ;	&#163 ;
¥	元（yen）	&yen ;	&#165 ;
€	欧元（euro）	&euro ;	&#8364 ;
§	小节	&sect ;	&#167 ;
©	版权（copyright）	&copy ;	&#169 ;
®	注册商标	&reg ;	&#174 ;
™	商标	&trade ;	&#8482 ;
×	乘号	&times ;	&#215 ;
÷	除号	&divide ;	&#247 ;

2. 图片标签

2.1 常见的图像格式

JPG
GIF
PNG
base64
webp
…

2.2 HTML 图片标签

<body>
	<img src="path" alt="text" title="text" width="x" height="y" />
</body>

定义和用法

从技术上讲，img 标签并不会在网页中插入图像，而是从网页上链接图像
img 标签创建的是被引用图像的占位空间
img 标签有两个必需的属性：src 属性 和 alt 属性
img 标签支持 HTML 中的全局属性和事件属性

必需属性

属性	值	描述
alt	text	规定图像的`替代文本`
src	URL	规定显示`图像的 URL`

可选属性

属性	值	描述
title	text	鼠标悬停提示文字
width	px / %	设置图像的宽度
height	px / %	定义图像的高度
crossorigin	anonymous/use-credentials	设置图像的跨域属性
ismap	URL	将图像定义为服务器端图像映射
usemap	URL	将图像定义为客户器端图像映射

3. HTML 超链接标签

<body>
	<a href="path" target="目标窗口位置">这是一个链接使用了 href 属性</a>
</body>

在这里插入图片描述

定义和用法

a 标签定义超链接，用于从一张页面链接到另一张页面
a 元素最重要的属性是 href 属性，它指示链接的目标
所有浏览器中，链接默认外观：下划线蓝色(未访问)--下划线紫色(已被访问)--下划线红色(活动链接)
可以使用CSS 伪类向文本超链接添加复杂而多样的样式

提示和注释

如果不使用 href 属性，则不可以使用如下属性：download, hreflang, media, rel, target 以及 type 属性
被链接页面通常显示在当前浏览器窗口中，除非规定了另一个目标（target 属性）
请使用 CSS 来设置链接的样式

属性

属性	值	描述
download	filename	指定下载链接
href	URL	规定链接的目标 URL
hreflang	language_code	规定目标 URL 的基准语言。仅在 href 属性存在时使用
media	media_query	规定目标 URL 的媒介类型。默认值：all。仅在 href 属性存在时使用
rel	prev/search/tag…	规定当前文档与目标 URL 之间的关系。仅在 href 属性存在时使用
target	_blank / _parent / _self / _top / framename	规定在何处打开目标 URL。仅在 href 属性存在时使用
type	MIME type	规定目标 URL 的 MIME 类型。仅在 href 属性存在时使用

注：MIME = Multipurpose Internet Mail Extensions

3.1 链接类型

页面间链接
- 从一个页面链接到另外一个页面
锚链接
- 页面内部或页面间跳转到指定位置

3.2 锚链接

通过创建锚点链接，用户能够快速定位到目标内容

<body>
	1. 创建跳转标记，利用name或者id属性
		<a href="#id名">
		<a href="#name名">
		
	2. 使用相应的id名标注跳转目标的位置
		<h1 id="id名"></h1>
		
	3. 注意：如果要使用name名，只能用a标签
		<a name="name名"></a>

	4. 页面间的锚链接
		<a href="index.html#id名">甲</a>
		<h1 id="id名">乙</h1>

		<a href="index.html#name名">甲</a>
		<a name="name名">乙</a>
</body>

3.3 超链接功能性作用

功能性链接
- 电子邮件
- MSN

<a href="mailto:bdqnWebmaster@bdqn.cn">联系我们</a>

4. 框架标签

通过使用框架，可以在同一个浏览器窗口中显示不止一个页面

4.1 内联框架（iframe）

iframe 用于在网页内显示网页

<iframe src="URL" name="mainFrame" frameborder="0" scrolling="yes/no" width="x" height="y" ></iframe>

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）
可以把需要的文本放置在 <iframe> 和 </iframe> 之间，这样就可以应对无法理解 iframe 的浏览器
frame 可用作链接的目标（target）
frameborder 属性规定是否显示 iframe 周围的边框。设置属性值为 "0" 就可以移除边框

5. 容器标签

5.1 div 标签

网页布局的容器

<div id="header">网页内容...</div>

5.2 span 标签

局部文字的容器标签

<p>享受<span>“预见式”</span>教育服务</p>

6. 钩子标签

没有语义的标签，已经被废弃，但仍可以被用于当作CSS钩子
- b 标签
- i 标签
- u 标签
- s 标签

6. HTML 组合标签

1. HTML列表标签

<body>
	标签		描述
	<ul>		定义无序列表
	<ol>		定义有序列表
	<li>		定义列表的项目
	<dir>		定义目录列表。不赞成使用
	<dl>		定义定义列表
	<dt>		定义定义列表中的项目
	<dd>		定义定义列表中项目的描述
	<menu>		定义命令的菜单/列表
	<menuitem>	定义用户可以从弹出菜单调用的命令/菜单项目
	<command>	定义命令按钮
</body>

1. 有序列表的类型

有序列表可以嵌套
- 在列表项 li 内部嵌套其他的标签
type取值

取值	说明
disc	项目符号显示为实体圆心，默认值
square	项目符号显示为实体方心
circle	项目符号显示为空心圆

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

在这里插入图片描述

2. 无序列表的类型

无序列表可以嵌套
- 在列表项 li 内部嵌套其他的标签

属性	值	描述
reversed	reversed	指定列表倒序(9,8,7…)
type	A/a	规定列表的类型。不赞成使用。请使用样式代替

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

在这里插入图片描述

3. 定义列表

作用
- 术语表
- 图文混排
注意
- dt和dd是并列，不是嵌套关系

<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

在这里插入图片描述

2. HTML表格标签

<body>
	标签		描述
	<table>		定义表格
	<caption>	定义表格标题。
	<th>		定义表格中的表头单元格。
	<tr>		定义表格中的行。
	<td>		定义表格中的单元。
	<thead>		定义表格中的表头内容。
	<tbody>		定义表格中的主体内容。
	<tfoot>		定义表格中的表注内容（脚注）。
	<col>		定义表格中一个或多个列的属性值。
	<colgroup>	定义表格中供格式化的列组。
</body>

表格的优点
- 简单通用
- 结构稳定
基本结构
- 单元格
- 行
- 列

2.1 语法结构

<table>
	<tr>
		<td>第一个单元格</td>
		<td>第二个单元格</td>
		...
	</tr>
	<tr>
		<td>第一个单元格</td>
		<td>第二个单元格</td>
		...
	</tr>
</table>

2.2 对齐属性

属性	值	说明
align	left/center/right	左/居中/右对齐
valign	top/middle/bottom	顶端/居中/底端对齐

2.3 表格合并

列合并

<td colspan="n">单元格内容</td>

行合并

<td rowspan="n">单元格内容</td>

2.4 表格标签属性

<body>
	      属性	                                           作用
	      
	<th colspan="2"></th>          						横跨2列的单元格
	 
	<th rowspan="2"></th>       						横跨2行的单元格

	<table cellpadding="10">    						单元格边距

	<table cellspacing="10">    						单元格间距

	<th align="left/right"></th>  						排列单元格内容
	
	<table frame="box/above/below/hsides/vsides/">    	控制围绕表格的边框
</body>

3.HTML表单标签

<body>
	标签			描述
	<form>		定义供用户输入的 HTML 表单。
	<input>		定义输入控件。
	<input type="text"> --- 文本输入
	<input type="radio"> --- 定义单选按钮
	<input type="submit"> --- 提交按钮
	<textarea>	定义多行的文本输入控件。
	<button>	定义按钮。
	<select>	定义选择列表（下拉列表）。
	<optgroup>	定义选择列表中相关选项的组合。
	<option>	定义选择列表中的选项。
	<label>		定义 input 元素的标注。
	<fieldset>	定义围绕表单中元素的边框。
	<legend>	定义 fieldset 元素的标题。
	<isindex>	不赞成使用。定义与文档相关的可搜索索引。
	<datalist>	定义下拉列表。
	<keygen>	定义生成密钥。
	<output>	定义输出的一些类型。
</body>

3.1 HTML表单标签属性

<body>
	<form accept-charset="UTF-8"> --- accept-charset 属性 --- 规定在被提交表单中使用的字符集（默认：页面字符集）
	
	<form action="action_page.php"> --- action 属性 --- 定义在提交表单时执行的动作
		注意：如果省略 action 属性，则 action 会被设置为当前页面
	
	<form autocomplete="off"> --- autocomplete 属性 --- 规定浏览器应该自动完成表单（默认：开启）

	<form ectype="application/x-www-form-urlencoded"> --- enctype 属性 --- 规定被提交数据的编码（默认：url-encoded）
	
	<form method="GET/POST"> --- method 属性 --- 规定在提交表单时所用的 HTTP 方法（GET 或 POST）
		1. 使用 GET：表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。
		注意：GET 最适合少量数据的提交。浏览器会设定容量限制。

		2. 使用 POST：表单正在更新数据，或者包含敏感信息（例如密码）。
		注意：POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。
	<form name="firstname"> --- name 属性 --- 规定识别表单的名称（对于 DOM 使用：document.forms.name）

	<form novalidate> --- novalidate 属性 --- 规定浏览器不验证表单

	<form target="_blank"> --- target 属性 --- 	规定 action 属性中地址的目标（默认：_self）
	
</body>

3.2 HTML表单元素

<body>
	<input>元素及输入类型
	<input type="text"> --- 文本输入
	<input type="password"> 定义密码字段
	<input type="radio"> --- 定义单选按钮
	<input type="checkbox"> --- 定义复选框
	<input type="submit"> --- 提交按钮
	<input type="number"> --- 用于应该包含数字值的输入字段
	<input type="date"> --- 用于应该包含日期的输入字段
	<input type="color"> --- 用于应该包含颜色的输入字段
	<input type="range"> --- 用于应该包含一定范围内的值的输入字段
	<input type="month"> --- 允许用户选择月份和年份。
	<input type="week"> --- 允许用户选择周和年。
	<input type="time"> --- 允许用户选择时间（无时区）。
	<input type="datetime"> --- 允许用户选择日期和时间（有时区）。
	<input type="datetime-local"> --- 允许用户选择日期和时间（无时区）。
	<input type="email"> --- 用于应该包含电子邮件地址的输入字段。
	<input type="search"> --- 用于搜索字段（搜索字段的表现类似常规文本字段）。
	<input type="tel"> --- 用于应该包含电话号码的输入字段。
	<input type="url"> --- 用于应该包含 URL 地址的输入字段。
	
	<select> 元素（下拉列表）
	<option> 元素定义待选择的选项
		注意：列表通常会把首个选项显示为被选选项。我们能够通过添加 selected 属性来定义预定义选项
	<textarea> 元素定义多行输入字段（文本域）
	<button> 元素定义可点击的按钮
</body>

3.3 输入属性

属性	描述
autocomplete	规定表单或输入字段是否应该自动完成。
autofocus	规定当页面加载时 input 元素应该自动获得焦点。
disabled	规定输入字段应该被禁用。
formaction	规定当提交表单时处理该输入控件的文件的 URL。
formenctype	规定当把表单数据（form-data）提交至服务器时如何对其进行编码（仅针对 method=“post” 的表单）。
formmethod	定义用以向 action URL 发送表单数据（form-data）的 HTTP 方法。
formnovalidate	规定在提交表单时不对 input 元素进行验证。
formtarget	规定的名称或关键词指示提交表单后在何处显示接收到的响应。
height	规定 input 元素的高度。
list	包含了 input 元素的预定义选项。
max	规定输入字段的最大值。
maxlgth	规定输入字段的最大字符数。
min	规定输入字段的最小值。
multiple	规定允许用户在 input 元素中输入一个以上的值。
novalidate	规定在提交表单时不对表单数据进行验证。
pattern	规定通过其检查输入值的正则表达式。
placeholder	规定用以描述输入字段预期值的提示（样本值或有关格式的简短描述）。
readonly	规定输入字段为只读（无法修改）。
required	规定输入字段是必需的（必需填写）
size	规定输入字段的宽度（以字符计）。
step	规定输入字段的合法数字间隔。
value	规定输入字段的默认值。
width	规定 input 元素的宽度。

3.4 增强功能

增强鼠标的可用性
自动将焦点转移到与该标注相关的表单元素上

<label for="id">标注的文本</label>
<input type="radio" name="gender" id="male" />

3.5 智能表单

HTML5为了方便排版，可以使Form中的表单元素脱离Form的嵌套

<form action="" method="post" id="register" >
</form>
<input  type="text" name="user" form="register" />
<select name="year" form="register" >
	<option value="1999"></option>
</select>
<textarea name="ext" form="register" ></textarea>
<button type="submit" form="register" >提交</button>

配合datalist标签，能实现自动补全的效果

<input type="search" name="move" list="search">
<datalist id="search">
	<option>Javascript的由来</option>
	<option>AI为何钟情于Python</option>
	<option>Node.JS不得不说的故事</option>
</datalist>

7. HTML5 基本概念

7.1 HTML5 概述

7.1.1 HTML5 是什么

HTML5 是一个新的网络标准
目标是取代现有的HTML 4.01和XHTML 1.0 标准
HTML5 希望能够减少互联网富应用（RIA)对Flash、Silverlight、JavaFX等的依赖，并且提供更多能有效增强网络应用的API

7.1.2 HTML5 发展历史

在这里插入图片描述

7.1.3 HTML5 新功能

语义标签
多媒体
离线存储
三维、图形与特效
设备通用
性能与集成
CSS3
其他

8. HTML5 语义标签

在这里插入图片描述

8.1 语义标签的类型

区块标签	article/section/nav/aside/header/footer
内容分组标签	figure/figcaption/main
文本级别标签	time

8.2 语义标签

8.2.1 header 标签

header标记一般放置在页面的顶部，或者页面中某个区块元素的顶部，包含整个页面或区块的标题、简介等信息
- 一篇文档中可以包含多个 header 标记
- 可以为 body、article、section、aside 标记增加 header 标记
- header 标记未必位于页面的顶部

8.2.2 footer 标签

footer标记一般放置在页面的底部，或者页面中某个区块元素的底部

8.2.3 nav 标签

nav标记表示页面的导航，可以通过导航连接到网站的其它页面，或当前页面的其它部分

8.2.4 aside 标签

aside包含的内容不是页面的主要内容，具有独立性，是对页面内容的补充
- 页面的侧边栏
- 文章引语（内容摘要）
- 广告
- 友情链接

8.2.5 article 标签

article标记表示包含于一个文档、页面、或网站中的一段独立的内容。它能够独立的被发布或重新使用
- 一篇博客
- 一个论坛帖子
- 一片新闻报道
- 一个用户论坛

8.2.6 section 标签

section表示一个主题性的内容分组，通常包含一个头部（header），可能还会有一个尾部（footer）
figure表示页面中的插图，通常结合figcaption一起使用

8.2.7 time 标签

time表示一个日期、时间，或日期和时间值。可以被搜索引擎、屏幕阅读器等识别

8.2.8 域标签

fieldset标签配合legend标签，实现语义化表单

9. HTML5 多媒体标签

9.1 video 视频

9.1.1 视频标签

HTML5 通过 video 标签实现视频功能，并提供多个视频操作方法
支持多种视频格式，但视频编码必须符合要求
MP4 ：使用 H264 视频编解码器和AAC音频编解码器
WebM ：使用 VP8 视频编解码器和 Vorbis 音频编解码器
Ogg ：使用 Theora 视频编解码器和 Vorbis音频编解码器

9.1.2 视频标签应用语法

格式一
<video src=""></video>

格式二
<video>
    <source src="" type=""></source>
    <source src="" type=""></source>
</video>

第二种格式存在的意义
- 浏览器兼容
  - 为了让过去的一些不兼容的浏览器也能够通过video标签来播放视频, 可以通过一个JS的框架叫做 html5media 来实现
- 解决浏览器适配问题
  - video 元素支持三种视频格式, 可以把这三种格式都通过source标签指定给video标签
  - 那么以后当浏览器播放视频时它就会从这三种中选择一种自己支持的格式来播放
  - 但是想让所有浏览器都通过video标签播放视频还有一个前提条件, 就是浏览器必须支持HTML5标签, 否则同样无法播放

9.1.3 video 标签的属性和方法

属性方法	描述
width	设置播放器宽度
height	设置播放器高度
controls	设置播放器的控制按钮是否出现
src	设置播放的视频文件 url
autoplay	设置自动播放功能(muted)
poster	设置视频预览图片文件 url
loop	设置循环播放功能
currentTime	当前播放时间位置
play()	开始播放
pause()	停止播放
preload	video 标签预加载视频，如果设置了 autoplay 属性, 那么 preload 属性就会失效
muted	视频静音
volume	设置或返回视频的音量

9.2 audio 音频

9.2.1 audio 音频标签

HTML5 通过 audio 标签实现音频功能，并提供多个音频操作方法
支持多种音频格式
控制方法与视频相同

<audio src="">
</audio>

<audio>
    <source src="" type="">
</audio>

10. 总结

html/html5 一些基本标签和作用，做个笔记总结一下

qq_43645678

关注

3
点赞
踩
29

收藏

觉得还不错? 一键收藏
0
评论
HTML/HTML5基础笔记

HTML 基础笔记
复制链接

扫一扫

专栏目录