admin管理员组文章数量:1655710
HTML∣HTML5基础总结
- 一、互联网基本原理
- 1、在本地开发,在服务器共享
- 2、关于 HTTP 协议
- 3、前后端请求交互基本流程
- 二、HTML基础及延伸
- 1、HTML解析
- 1.1、什么是HTML
- 1.2、HTML 标签
- 1.3、HTML文档
- 2、常用浏览器
- 3、浏览器内核
- 4、页面编码
- 4.1、Unicode标准
- 4.2、字符集
- 5、W3C组织
- 6、网页组成
- 7、SEO网页代码优化
- 7.1、网页三要素优化规范
- 7.2、搜索引擎的索引方式
- 7.3、搜索引擎注意事项
- 8、HTML5模板代码解析
- 10、HTML5 特性
- 10.1、空白折叠现象
- 10.2、常用转义符
- 10.3、HTML注释
- 10.4、新增与移除的元素
- 三、HTML常用标签
- 1、标题标签
- 2、段落标签
- 3、div标签
- 4、列表标签
- 4.1、无序列表
- 4.2、有序列表
- 4.3、定义列表
- 5、多媒体标签
- 5.1、图片标签
- 5.2、图片格式(网页上支持的)
- 5.3、相对路径和绝对路径
- 5.4、超级链接 - a标签
- 5.5、音视频标签
- 5.5.1、音频标签
- 5.5.2、音/视频的子标签
- 6、语义化标签
- 6.1、文本格式化标签
- 6.1.1、span 标签
- 6.1.2、文本格式化标签
- 6.2、区块标签
- 7、表单元素
- 7.1、HTML 表单基本用法
- 7.2、单行文本框
- 7.3、密码框
- 7.4、单选按钮
- 7.5、label标签
- 7.6、复选框
- 7.7、下拉菜单
- 7.8、多行文本框
- 7.9、按钮
- 7.10、总结
- 8、表格
- 8.1、HTML表格标签
- 8.2、表格标签属性
- 8.3、表格标签跨行跨列
- 8.4、thead,tbody,tfoot标签
2023/3/28:微改了一些样式和排版…
一、互联网基本原理
1、在本地开发,在服务器共享
程序员 → 在本地开发(html,css,js)→ 上传到服务器(共享)→ 所有用户都能访问
2、关于 HTTP 协议
HTTP 协议 (HyperText Transfer Protocol)超文本传输协议,是互联网数据传输的常见协议
一次 HTTP 事物由 “HTTP 请求” 和 “HTTP 响应” 构成
网址前的http://
就表示用http
协议请求页面,https://
表示用https
加密协议请求页面,比http://更安全
HTTP请求: 用户通过输入网址对服务器发起访问请求的形式,叫做HTTP请求
HTTP响应: 服务器接收HTTP请求,处理后响应给用户的流程,叫做HTTP响应
3、前后端请求交互基本流程
① 用户发送 HTTP 请求
② 在服务器上:后端语言程序运行时执行数据库“增删查改” 等业务
③ 服务器返回 HTTP 响应
④ 在浏览器中,前端语言程序将运行, 执行页面结构渲染、美化、交互效果等业务
二、HTML基础及延伸
1、HTML解析
1.1、什么是HTML
HTML 是用来描述网页的一种语言:
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言,而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag),HTML 使用标记标签来描述网页
超文本有两层含义:
- 它可以加入图片、声音、动画、多媒体等内容(超越了文本限制)
- 它还可以从一个文件跳转到另一个文件,与世界各地主机的文件连接(超级链接文本)
1.2、HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)
- HTML 标签是由尖括号包围的关键词,通常成对出现
- 标签对中的第一个标签是开始(开放)标签,第二个标签是结束(闭合)标签
- 单标签:
- 有的标签不是成对出现的,而是只有起始标签,称之为单标签
- 在 HTML4 代中,单标签必须写一个结尾的反斜杠,HTML5 就不用写
1.3、HTML文档
HTML 文档被称为网页,用来
描述网页
,包含HTML 标签和纯文本
Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。 浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容
2、常用浏览器
浏览器是网页显示、运行的平台:
常用浏览器有 IE(已关闭)、火狐(Firefox)、谷歌(Google)、Safari(苹果官方)、Opera 、Edge(微软)等
全球浏览器市场份额:https://gs.statcounter/browser-market-share
3、浏览器内核
浏览器内核(渲染引擎):
负责读取网页内容,整理信息,计算网页的显示方式并显示页面
浏览器内核检测工具:https://ie.icoa/
浏览器 | 内核 | 说明 |
---|---|---|
IE | Trident | IE 浏览器内核 |
Edge | WebKit | 微软 Microsoft Edge(简称 ME 浏览器) |
Chrome/Opera | Blink | 由 Google 和 Opera Software 共同研发,Blink 其实是 WebKit 的分支,以前 Google 是 WebKit 内核、现在是 Blink |
Firefox | Gecko | 火狐浏览器内核 |
Safari | WebKit | 苹果浏览器内核 |
360、猎豹、2345 浏览器 | Trident+Blink | 双内核 |
UC、搜狗、遨游、QQ 浏览器 | Trident+Webkit | 双内核 |
百度(已关闭)、世界之窗浏览器 | Trident | IE 浏览器内核 |
4、页面编码
4.1、Unicode标准
因为 ISO-8859 中字符集大小是有限的,且在多语言环境中不兼容,所以 Unicode 联盟开发了 Unicode 标准。
Unicode 标准覆盖了(几乎)所有的字符、标点符号和符号。
Unicode 使文本的处理、存储和运输,独立于平台和语言。
HTML5 中默认的字符编码是 UTF-8
统一写成标准的
“UTF-8”
,不要写成“utf-8”
或“utf8”
或“UTF8”
。
4.2、字符集
字符集 | 涵盖字符 | 1 个汉字的字节数 | 适用场景 |
---|---|---|---|
UTF-8 | 涵盖全球所有国家、民族的文字和大量图形字符 | 3 | 开发有非汉字文字的网页 |
gb2312(gbk) | 收录所有汉字字符(简体、繁体)和英语、少量韩文、日语和少量图形字符 | 2 | 开发只有汉语和英语的网页,由于 1 个汉字仅占 2 个字节,网页文件尺寸大小明显减少 |
使用VSCode时要注意:
无论使用哪种字符集,一定要在 VSCode 中将文件也设置为相同的字符集,否则会出现乱码;Live Server 插件不支持 gb2312、gbk 字符集,只支持 UTF-8 字符集;
文件编码集与 meta 标签编码不一致网页会出现乱码。
5、W3C组织
- W3C 指万维网联盟(World Wide Web Consortium)是万维网的主要国际标准组织
- W3C 创建于 1994 年 10 月,主要负责制定 WEB 标准
- W3C 由 Tim Berners-Lee(蒂姆·伯纳斯·李) 创建 ,被誉为 “互联网之父”
- W3C 是一个会员组织
- W3C 创建并维护 WWW 标准
- W3C 标准也被称为 W3C 规范,主要是 HTML 和 CSS
- W3C 组织官网:https://www.w3/
- JavaScript 由 Brendan Eich 于 1995 年发明,并于 1997 年成为 ECMA 标准。
6、网页组成
网页由 结构(Structure)、表现(Presentation)和行为(Behavior)三部分组成;结构,表现,行为要相分离。
标准 | 简介 | 描述 |
---|---|---|
结构 | 用于对网页元素进行整理和分类,即 HTML | 网页的骨骼 |
表现 | 表现用户设置网页元素的外观样式,即 CSS | 网页的皮肤 |
行为 | 行为是指网页模型的定义、交互等编写,即 JavaScript | 网页的神经 |
7、SEO网页代码优化
SEO,全称Search Engine Optimization (搜索引擎优化)
利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名,为自己的网站获取免费流量
以用户体验为核心,为目标用户提供高质量的内容
对页面的代码和网页阅读体验,网站性能等进行优化
7.1、网页三要素优化规范
1、页面标题(title),30 字以内:
标题 格式 网站首页 <title>网站首页:品牌词 - 产品中文全称、特色服务、xxxx</title>
列表页(栏目页) <title>产品和主题概述 - 品牌词</title>
内容页(产品详情页、文章页) <title>具体产品或内容主题概述-品牌词</title>
注 :强调重点即可,重要的关键词出现不要超过 2 次,而且要靠前,不同页面的 title 要有所不同;
三要素代码顺序为 页面标题 -> 页面描述 -> 页面关键字。2,页面描述(Description),150字符以内,描述内容要和页面内容相关:
<meta name="description" content="品牌名-专业的综合网上购物商城,为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家,囊括家电、手机、生鲜等丰富品类,满足各种购物需求。" />
3,页面关键字(Keywords),告诉搜索引擎本页的重点、关键词:
<meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜" />
7.2、搜索引擎的索引方式
- robot terms 是一组使用逗号 , 分割的值。
- 通常有如下几种取值:none,noindex,nofollow,all,index 和 follow。确保正确使用 nofollow 和 noindex 属性值。
<meta name="robots" content="index,follow" /> <!-- all:文件将被检索,且页面上的链接可以被查询; none:文件将不被检索,且页面上的链接不可以被查询; index:文件将被检索; follow:页面上的链接可以被查询,告诉蜘蛛可以被追踪,传递权重; noindex:文件将不被检索; nofollow:页面上的链接不可以被查询,告诉蜘蛛无需追踪,不传递权重。一般用于站外链接。 -->
页面重定向和刷新:
<meta http-equiv="refresh" content="0; url=" />
<!--
content 内的数字代表时间(秒),既多少时间后刷新。
如果加 url,则会重定向到指定网页(搜索引擎能够自动检测,也很容易被引擎视作误导而受到惩罚)
-->
7.3、搜索引擎注意事项
注意 | 说明 |
---|---|
重要内容尽量靠前放 | 搜索引擎抓取 HTML 的顺序是从上到下的,而有的搜索引擎对抓取的内容长度有一定的限制。 |
重要内容不要用 JS 输出 | 搜索引擎不会抓取 JS 的生成内容。 |
其他 | 页面结构尽量扁平化,目录结构不宜过深,最好不超过 三级 ,每级都有 面包屑导航 ,成树状结构分布。否则不利于搜索引擎抓取;做 404 页面,不仅提高蜘蛛体验,也提高用户体验。 |
8、HTML5模板代码解析
<!--声明当前文档类型为 html5标准-->
<!DOCTYPE html>
<!--声明当前页面的语言类型-->
<html lang="en">
<head>
<!--网页的编码集-->
<meta charset="UTF-8" />
<!--IE8及以上的版本按照最新的标准去渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--用户移动端适配-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--网页标题-->
<title>宇宙中心</title>
<!--网页描述-->
<meta name="description" content="为每个宇宙人提供高质量的玩乐平台" />
<!--网页关键词-->
<meta name="Keywords" content="宇宙中心,银河系,皮卡丘" />
</head>
<!--网页主体-->
<body></body>
</html>
meta标签的属性如下:
属性 | 值 | 描述 |
---|---|---|
http-equiv | content-type / expire / refresh / set-cookie | 把 content 属性关联到 HTTP 头部。 |
name | author / description / keywords / generator / revised / others | 把 content 属性关联到一个 name。 |
content | some text | 定义与 http-equiv 或 name 属性相关的元信息 |
10、HTML5 特性
10.1、空白折叠现象
- 文字和文字之间的多个空格、换行会被折叠成一个空格;
- 标签
内壁
和 文字之间的空格会被忽略。
10.2、常用转义符
<body>
<h1>HTML常用转义符</h1>
<p>空格: 这是三个空格</p>
<p>大于号:></p>
<p>小于号:<</p>
<p>&符号:&</p>
<p>“双引号:"</p>
<p>版权符号:©</p>
<p>已注册商标:®</p>
<p>在网页中直接显示原标签:</p>
显示p标签 <p></p> <br /><br />
显示div标签:<div></div>
</body>
10.3、HTML注释
作用: 提高代码的可阅读性,方便自己阅读或他人阅读;增强代码的可维护性。
语法:
<!-- 注释的内容,注释在网页中是不显示的,只有自己能看到 -->
10.4、新增与移除的元素
新增的有 | 移除的有 |
---|---|
语义化标签(header、nav、main、section、article、aside、details、figcaption、figure、mark、summary、time、footer 等) | 纯表现的元素:basefont,big,center,font, s,strike,tt,u |
Canvas 画布和 SVG 矢量图 | 对可用性产生负面影响的元素:frame,frameset,noframes |
拖放(Drag and drop) | |
音频、视频(audio、video) | |
地理定位(Geolocation) | |
本地离线存储(localStorage)长期存储数据,关闭浏览器后不丢失。 | |
会话储存(sessionStorage)数据在关闭浏览器后自动删除。 | |
表单控件(calendar、date、time、email、url、search) | |
新技术(Web Worker、Web Socket) | |
新的文档属性(document.visibilityState) |
三、HTML常用标签
1、标题标签
h 系列标签表示的是 “标题” 的含义,h 是
headline(标题)
的意思,用法如下:<h1>我是h1标题标签</h1> <h2>我是h2标题标签</h2> <h3>我是h3标题标签</h3> <h4>我是h4标题标签</h4> <h5>我是h5标题标签</h5> <h6>我是h6标题标签</h6>
注意:
h1
一个页面只可有一个(超过一个会被搜索引擎视为作弊),首页多用于包含 logo,其他页面用于主标题h2
模块标题h3
段落的小节标题h4, h5, h6
基本上不使用
2、段落标签
- p 标签表示段落标签,p 是英语
Paragraph(段落)
的意思;- 任何段落都要放到 p 标签中,因为 HTML 代码中即使代码换行了,页面显示效果也不会换行,必须写在 p 标签中;
- p 标签中不能嵌套 h 标签、其他 p 标签和其他块级元素。
3、div标签
div 标签 是英语
division(分隔)
的缩写;div 标签对是用来将相关内容组合到一起,以和其他内容分隔,使文档结构更清晰;
div 结合 CSS 来实现网页的布局,这种布局形式叫做 DIV+CSS;
div 像一个容器,什么都可以容纳,因此工程师们习惯称呼 div 为 盒子。
4、列表标签
4.1、无序列表
- 无序列表一组无顺序之分的列表;
- 无序列表 ul ,是英文
unordered list(不排序列表)
缩写;- 每个列表项都是 li 标签,是英文单词
list item(列表项目)
缩写;- ul 父标签,li 子标签,不能单独出现,ul 里面只能嵌套 li 子标签。
示例:
<h1>无序列表</h1> <ul> <li>小炒肉</li> <li>小龙虾</li> <li>剁椒鱼头</li> </ul> <!-- type属性:用于定义前导符号的样式,在 HTML5 中已经被废弃,使用 CSS 替代 type的属性值:disc(实心圆)、square(实心正方形)、circle(空心圆) -->
应用场景:
- 导航栏(头部导航栏,侧边导航栏等等)
- 列表页(商品列表,新闻列表)
4.2、有序列表
- 有序列表是一组有顺序之分的列表;
- 有序列表
ol
,是英文ordered list(排序列表)
缩写;ol
的特性与ul,li一样,不同的是前导样式与属性值。
示例:
<h1>编程语言排行榜</h1> <ol> <li>JavaScript</li> <li>Python</li> <li>C/C++</li> </ol> <!-- type属性:用来设置编号的类型 type的属性值:1(数字编号、默认值)、A/a(大写/小写英文字母编号)、I/i(大写/小写罗马数字编号) start属性:start属性值必须是个整数,设置该值后,就会把该值当做初始值 reversed属性:reversed 属性是 HTML5 中的新属性(是个布尔属性);指定列表中的条目设置了 reversed 属性后就会倒序排列;reversed 属性不需要值,只需要写 reversed 单词即可 -->
应用场景:
- 排行榜,热搜榜等等
4.3、定义列表
定义列表是一组需要逐条给出定义描述的列表;
dl 是英文
definition list(定义列表)
的缩写;dt 是英文单词
data term(数据项)
的缩写;dd 是英文单词
data definition (数据定义)
的缩写;dd 内容是对 dt 的解释说明。
示例:
<h1>定义列表</h1> <dl> <dt>服务支持</dt> <dd>售后政策</dd> <dd>关注我们</dd> </dl>
应用场景:
- 网页底部导航(小米官网底部导航既是如此)
5、多媒体标签
5.1、图片标签
img 标签 是
image(图片)
的缩写;img 标签用来在网页中插入图片,基础格式如下;
图片必须存放在项目文件夹中;
图片只是引入到网页中,本质上没有被插入到网页中。
示例:
<img src="images/logo.png" alt="logo" width="66" height="66" /> <!-- src:source(来源)的缩写, "" 中填写图片的路径。 alt:alternate(代替者)的缩写,对图像的文本描述,不强制; 如果图片无法显示,浏览器就会显示alt属性的值; 对于搜索引擎优化友好,告诉搜索引擎图片的含义,利于搜索引擎爬虫抓取; 为视障用户使用网页朗读器提供便利,它会朗读 alt 中的文本。 width & height:width & height 属性设置图片宽度和高度,单位是 PX(像素),可不写;如果省略其中一个属性,则表示按原始比例缩放图片 -->
图片标签规范:
- PC 端 img 图片必须填写 src、width、height、alt 属性,统称图片标签的四要素;
- 移动端必须填写 alt 属性;
- alt 应为有意义字符,需要能表现出图片的含义。
应用场景:
- 商品介绍图,logo图等等
5.2、图片格式(网页上支持的)
支持格式 | 描述 |
---|---|
.bmp | Windows 画图软件默认保存的格式,位图 |
.jpeg(.jpg) | 有损压缩图片,通常用于照片显示 |
.png | 便携式网络图像,用于 logo,背景图形等。支持透明和半透明 |
.gif | 动画 ,如:表情包 |
.svg | 矢量图片 |
.webp | 最新的压缩算法,非常优秀的图片格式 |
5.3、相对路径和绝对路径
相对路径:
<!-- 从当前文件出发,要找到图片的路径就叫相对路径 ../ 表示回退上一级目录,./ 表示当前目录 . 表示文件夹,通过 cmd 命名行 dir 命令可查 --> <img src="images/logo.png" /> <img src="../images/logo.png" /> <img src="../../images/logo.png" /> .....
绝对路径:
<!--描述文件或文件夹的精准完整地址--> <img src="D:\web\icoding-web\images\logo.png" /> <img src="https://www.icodingedu/files/system/10086.png"/>
5.4、超级链接 - a标签
- a 标签是英语
anchor (锚)
的首字母,也叫超链接或超级链接,用于网页与网页之间链接跳转,发送请求到后端等。
语法:
<a href="https://www.baidu">百度一下,你就知道</a> <!-- href属性:是 hypertext reference (超文本引用)的缩写,设置跳转的路径,支持相对路径和绝对路径 title属性:设置鼠标悬停时浮现的文本 target属性:规定在何处打开链接文档 target属性值: _blank / blank:在新窗口中打开网页 _self:默认,当前页面跳转 _parent:在父窗口打开链接 _top:在当前窗口打开链接,并替换当前的整个窗体(框架页) -->
超链接规范:
- 给 a 标签加上 title 属性
- a 标签的 href 属性必须写上链接地址,暂无的加上
javascript:alert('敬请期待!')
- 非本页面间跳转,采用打开新窗口模式:
target="_blank"
优化方式:
- 内部链接,要加
title
属性加以说明- 外部链接,要加
rel="nofollow"
属性,告诉蜘蛛无需追踪,传递权重
页面锚点:
给标签添加
id属性
,就能将它变成页面的 “锚点”;当点击锚点链接时,浏览器地址栏就会出现
#id属性名称
,页面就会自动滚动到锚点处;从其他页面点击带 # 号的链接,就可以直接定位到锚点位置;
在 HTML5 中 直接使用
#top
即可回到顶部,不用定义id="top"
。
特殊链接:
下载链接:
<!--指向 exe、zip、rar、word、excel 等文件格式的链接,将自动成为下载链接--> <a href="doc/1.zip">Java学习资料zip下载地址</a>
邮件链接:
<!-- mailto:前缀的链接 即 邮件链接,系统将自动打开 email 相关软件,即可发送邮件 --> <a href="mailto:wxr@nonono">给外星人发邮件</a>
电话链接:
<!-- tel:前缀的链接 即 电话链接,系统将自动打开手机拨号键 --> <a href="tel:18966666666">给皮卡丘打电话</a>
5.5、音视频标签
5.5.1、音频标签
audio
标签可直接在网页中插入音频,并自动生成默认 的编辑器- 浏览器中常用的音频格式:mp3 和 ogg 格式
<audio controls src="mp3/不错哟.mp3" autoplay loop> 亲爱的,您的浏览器不支持audio标签,请升级您的浏览器> 哟 ^_^ </audio> <!-- controls:显示播放空间 src:音频路径 autoplay:音频自动播放,不会等待整个音频文件下载完成 loop:循环播放音频 如果不兼容 audio 标签的浏览器将会显示标签对的文字 -->
注: 视频
video
标签与音频audio
标签写法差不多,只不过属性不大相同。
5.5.2、音/视频的子标签
source
标签为媒体元素定义媒体资源,该标签允许定义多个格式的音视频文件,供浏览器选择自己支持的媒体类型进行播放。
<!--注:浏览器需要选择它支持格式的源文件进行播放,如果都支持则任选个(默认选择第一个)-->
<h2>audio 子标签 source</h2>
<audio controls>
<source src="audio/不错哟.mp3" type="audio/mpeg" />
<source src="audio/不错哟.ogg" type="audio/ogg" />
<source src="audio/不错哟.wav" type="audio/wav" />
亲爱的,您的浏览器不支持audio标签,请升级您的浏览器> 哟 ^_^
</audio>
<h2>video 子标签 source</h2>
<video controls width="500">
<source src="video/1.mp4" type="video/mp4" />
<source src="video/1.webm" type="video/webm" />
<source src="video/1.ogv" type="video/ogv" />
<source src="video/1.avi" type="video/avi" />
亲爱的,您的浏览器不支持video标签,请升级您的浏览器哟 ^_^
</video>
常用音频格式有如下三种:
格式 | 类型 | 描述 |
---|---|---|
MP3 | audio/mpeg | 一种音频压缩技术,用来大幅度的降低音频数据量 |
Ogg | audio/ogg | 一种新的音频压缩格式,是完全免费、开发和没有专利限制的 |
Wav | audio/wav | 微软公司开发的一种声音文件格式,声音文件质量和 CD 相差无几 |
常用视频格式有如下三种:
格式 | 类型 | 描述 |
---|---|---|
mp4 | video/mp4 | MP4 = MPEG 4 文件使用 H264 视频编解码器和 AAC 音频编解码器 |
webm | video/webm | WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器 |
avi | video/avi | avi 文件支持 256 色和 RLE 压缩,他对视频文件采用了一种有损压缩方式 |
ogv | video/ogv | Ogg 文件使用 Theora 视频编解码器和 Vorbis 音频编解码器 |
6、语义化标签
什么是语义化标签?
- 有英文语义的标签。
为什么要用语义化标签?
- 使代码结构清晰,方便阅读,有利于团队合作开发;
- 有利于SEO优化:有助于爬虫抓取更多的有效信息,爬虫依赖于标签来确定上下文和各个关键字的权重;
- 可访问性:利于无障碍阅读;
- 国际化:遵循 W3C 标准通用的语义化标签可以让各国开发者更容易弄懂你网页的结构;
- 可维护性:语义化更具可读性,减少网页间的差异性,方便后期开发和维护。
6.1、文本格式化标签
6.1.1、span 标签
span
标签是文本中的区块标签,没有任何显示的效果,可以结合 css 来定义区块的样式;需要被特殊标记的元素也会使用 span 标签。
6.1.2、文本格式化标签
标签 | 描述 |
---|---|
<b> | 定义粗体文本 (已被 CSS 替代) |
<em> | 定义着重文字,显示为斜体 (被强调的文本) |
<i> | 定义斜体字(已被 CSS 替代) |
<u> | 定义文字的下划线(已被 CSS 替代) |
<strong> | 定义加重语气,显示为粗体,表示特别重要的文字; strong 和 em 都表示强调, strong 的强调程度要比 em 更高 |
<sub> | 定义下标字 |
<sup> | 定义上标字 |
<del> | 定义删除字 |
<pre> | 定义预格式文本。被包围在 pre 标签 元素中的文本通常会保留空格 |
<mark> | 一段需要被高亮的文本(HTML5 新标签) |
<figure> | figure 标签规定独立的流内容(图像、图表、照片、代码等等)。与 figcaption 标签配合使用。 |
<figcaption> | 一个独立的引用单元,标签为 <figure> 元素定义标题 |
6.2、区块标签
标签 | 描述 |
---|---|
<section> | 文档的区域,语义比 div 大 通常由标题以及内容组成,不推荐没有标题的内容使用section标签 |
<article> | 文档的核心文章内容,会被搜索引擎主要抓取 它比 section 具有更明确的语义,可以包含一个或多个section |
<aside> | 文档的非必要相关内容 独立于内容的一部分,且可以被单独的拆分出来而不会使整体受影响 |
<nav> | 导航栏 |
<header> | 页头 |
<main> | 网页核心部分 用来呈现文档或应用的主体部分,一个页面只能有一个 main 标签 |
<footer> | 页脚 |
注意: article、section、aside、nav 标签都可以拥有自己的 header 和 footer 标签
如何增强语义性: 当现有的 HTML 标签不能充分表达语义的时候,可以借助role
属性来说明
7、表单元素
HTML 表单用于收集不同类型的用户输入;
如:登录、注册、发布、提交、编辑信息 等等。
7.1、HTML 表单基本用法
- 所有的 HTML 表单都是以
<form>
元素包裹:<h1>HTML的form表单</h1> <form action="/user/login" method="get">......</form> action属性:提交表单时向何处发送表单数据 method属性:规定用于发送表单数据的 HTTP 方法
7.2、单行文本框
用户名: <input type="text" />
真实姓名:<input type="text" placeholder="请输入您的真实姓名 ..." />
所在城市:<input type="text" value="北京市海淀区" disabled />
<!--
type="text":单行文本框,单标签
value="":文本框的值
placeholder="":提示文本,以浅灰色显示在文本框中,并不是文本框中的值
disabled:表示用户不能与元素交互,即:禁用
-->
7.3、密码框
<!--与单行文本框类似,type属性值为password 显示内容为 隐藏-->
请输入密码:<input type="password" />
7.4、单选按钮
性别: <input type="radio" name="sex" /> 男
<input type="radio" name="sex" /> 女
<input type="radio" name="sex" checked /> 保密
<!--
注:以上代码,点击文字时,不能选中按钮,需要使用 label标签
type="radio":单选按钮
name="":设置互斥 ,需将多个 name 属性为相同的值
value="":向服务器提交的值
checked:表示默认被选中
-->
7.5、label标签
用来将文字和单选按钮进行绑定,实现点击文字等同于点击单选按钮。
在 HTML5 中直接使用 label 标签包裹单选按钮和文字即可:
性别:<label> <input type="radio" name="sex" /> 男 </label>
- 在 HTML4 中label 标签是通过 for 属性和单选按钮的 id 属性进行绑定的:
所在城市: <input type="radio" name="city" id="beijing" /> <label for="beijing">北京市</label>
7.6、复选框
<label>
<input type="checkbox" name="hobby" value="乒乓球" /> 乒乓球
</label>
<label>
<input type="checkbox" name="hobby" value="书法" checked /> 书法
</label>
<!--
type="checkbox":复选框
name="":同组复选框应该设置 name 为相同值
value="":向服务器提交的值
checked:表示默认被选中
-->
7.7、下拉菜单
请选择 省:
<select>
<option value="湖北省">湖北省</option>
<option value="湖南省">湖南省</option>
<option value="安徽省">安徽省</option>
</select>
<!--
<select>标签就是下拉菜单
<option>是内部选项
-->
7.8、多行文本框
用户评论: <textarea cols="100" rows="10"></textarea>
<!--
<textarea>表示多行文本框
rows和cols属性,用于定义多行文本框的行数和列数
-->
7.9、按钮
<button>我是一个button标签,是一个普通按钮</button>
<input type="button" value="我是一个普通按钮" /> <!--可简写为<button></button>-->
<input type="submit" value="提交表单信息" />
<input type="reset" value="重 置" />
7.10、总结
1、常用表单控件
type 属性 | 描述 |
---|---|
text | 单行文本框 |
radio | 单选按钮 |
checkbox | 复选框 |
password | 密码框 |
button | 普通按钮,也可以简写为 <button></button> |
submit | 提交按钮 |
reset | 重置按钮 |
2、HTML5新增的表单控件
type 属性 | 描述 |
---|---|
color | 颜色选择控件 |
date、time | 日期、时间选择控件 |
电子邮件输入控件(提交自动效验) | |
file | 文件选择控件 |
number | 数字输入控件 属性(min:最小值,max:最大值) |
range | 拖拽条控件 |
search | 搜索框(多一个清空按钮) |
url | 网址输入控件 |
8、表格
8.1、HTML表格标签
标签 | 描述 |
---|---|
<table> | 定义表格 |
<th> | 定义表格的表头 |
<tr> | 定义表格的行 |
<td> | 定义表格单元 |
<caption> | 定义表格标题(作为 table 的第一个子元素出现) |
<thead> | 定义表格的页眉 |
<tbody> | 定义表格的主体 |
<tfoot> | 定义表格的页脚 |
8.2、表格标签属性
属性 | 描述 |
---|---|
border | 表格的边框 |
width | 表格的宽度(HTML5 不支持) |
cellpadding | 单元边沿与其内容之间的空白(HTML5 不支持) |
cellspacing | 单元格之间的空白(HTML5 不支持) |
8.3、表格标签跨行跨列
td & th 标签的属性:colspan(规定单元格可横跨的列数)、rowspan(设置单元格可纵跨的行数)。
<table border="1" width="800">
<caption>
同学通讯录
</caption>
<tr>
<th>专业</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<th>计算机</th>
<td>arry</td>
<td rowspan="2">男</td>
<td>18</td>
</tr>
<tr>
<th>外语</th>
<td>豆豆</td>
<td>21</td>
</tr>
<tr>
<th>备注</th>
<td colspan="4"></td>
</tr>
</table>
效果图:
8.4、thead,tbody,tfoot标签
<table border="1" width="500">
<caption>
同学通讯录
</caption>
<thead>
<tr>
<th>专业</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<th>计算机</th>
<td>布丁</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<th>外语</th>
<td>豆豆</td>
<td>女</td>
<td>21</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>备注</th>
<td colspan="4"></td>
</tr>
</tfoot>
</table>
效果图:
上一篇文章 | 下一篇文章 |
---|---|
无 | CSS基础认知(一) |
版权声明:本文标题:HTML超详细基础知识总结 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1729706587a1210794.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论