HTML

最新推荐文章于 2025-03-24 09:49:29 发布

@十二点五

最新推荐文章于 2025-03-24 09:49:29 发布

阅读量1.2k

点赞数

分类专栏： web前端复习文章标签： html

本文链接：https://blog.youkuaiyun.com/weixin_44511358/article/details/108253909

版权

web前端复习专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了HTML的基本概念，包括浏览器内核、web标准、HTML的基本骨架结构、标签、字符集、语义化、常用标签和属性，以及HTML5的新特性。讨论了如何使用HTML进行网页布局，如表格、表单和多媒体的处理，并强调了HTML标签语义化的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.浏览器内核

（1）Trident（IE内核）
	代表：IE、傲游、世界之窗浏览器、Avant、腾讯TT、猎豹安全浏览器、360极速浏览器、百度浏览器等
	Window10 发布后，IE 将其内置浏览器命名为 Edge，Edge 最显著的特点就是新内核 EdgeHTML
（2）Gecko(firefox火狐)
	Gecko(Firefox 内核)： Mozilla FireFox(火狐浏览器) 采用该内核，Gecko 的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。 可惜这几年已经没落了， 比如 打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。
（3）webkit(Safari)
	Safari 是苹果公司开发的浏览器，所用浏览器内核的名称是大名鼎鼎的 WebKit。
	 代表浏览器：傲游浏览器3、 Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器.
(4)Chromium/Bink(chrome)
	在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。 
    大部分国产浏览器最新版都采用Blink内核。
(5)Presto(Opera)

移动端浏览器内核：主要说的是系统内置浏览器的内核
目前移动设备浏览器上常用的内核有 Webkit，Blink，Trident，Gecko 等，其中 iPhone 和 iPad 等苹果 iOS 平台主要是 WebKit，Android 4.4 之前的 Android 系统浏览器内核是 WebKit，Android4.4 系统浏览器切换到了Chromium，内核是 Webkit 的分支 Blink，Windows Phone 8 系统浏览器内核是 Trident。
在这里插入图片描述
参考链接：https://blog.youkuaiyun.com/u010194271/article/details/80826809

2.web标准

web标准是由W3C和其他标准化组织制定的一系列标准的集合。主要包括结构、表现、行为三个方面。

（1）结构标准：结构用于对网页元素进行整理和分类，主要包括xml和XHTML两个部分
（2）样式标准：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是css
（3）行为标准：行为是指网页模型的定义及交互的编写，主要包括DOM和ECMAScript两个部分

3.HTML基本骨架结构

<HTML>
	<head>
		<title></title>
	</head>
	<body>
	</body>
</HTML>

HTML标签:作用所有HTML中标签的一个根节点
head标签:用于存放title、meta、base、style、script、link
注意：在head中必须设置的标签是title
title标签:页面的标题
body标签:页面的主题部分，用于存放所有的HTML标签

4.HTML标签

在HTML页面中，带有“< >”符号的元素被称为HTML标签。
（1）标签的分类：
双标签：

<标签名>内容</标签名>

例如：<head></head>
单标签：

<标签名/>

例如：<br/>
(2)HTML标签的关系
a.嵌套关系

<head>
	<title></title>
</head>

b.并列关系

<head></head>
<body></body>

5.常用开发工具

sublime
Dreamweaver
webstorm
HBuilder
vscode

6.文档类型<!DOCTYPE>

document
- html
- xhtml
- html5

<!DOCTYPE html>

该标签位于文档的最前面，用于说明当前文档使用哪种HTML或者XHTML标准规范，必须在开头处使用标签为所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能按指定的文档类型进行解析

7.字符集

<meta http-equiv="charset" content="utf-8">：HTML与XHTML中建议这样去写
<meta charset="UTF-8">  html5中建议这样写

utf-8是最常用的字符集编码方式，常用的还有gbk和gb2312
gb2312:简单中文，包括6763个汉字
BIG5:繁体中文，港澳台使用
GBK：包含全部中文字符，是GB2312的扩展，加入对繁体字的支持，兼容GB2312
UTF-8：包含全世界所有国家需要用到的字符

8.HTML标签语义化

HTML标签语义化：指标签的含义
好处：
（1）方便代码的阅读和维护
（2）让浏览器或是网络爬虫可以更好的解析，从而更好分析其中的内容
（3）具有更好的搜索引擎优化
当去掉css之后，网页结构依然组织有序。并且具有良好的可读性

9.HTML常用标签

	h1-h6：标题标签
	<h1>标题内容</h1>
	p:段落标签（默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行）
	<p>文本内容</p>
	<hr/>：水平线标签
	<br/>:换行标签
	<div></div>
	<span></span>

文本格式化标签：
在这里插入图片描述

10.标签属性

<标签名 属性1=“属性值1” 属性2="属性值2" ……>内容</标签名>

（1）标签可以有多个属性，必须写在开始标签中，位于标签名之后
（2）属性之间不分先后顺序

11.图像标签

<img src="图像url" alt="" title="">

属性：
- src:指定图像的URL地址
- alt:图像不能显示时的替换文字
- title:鼠标悬停时显示的内容
- width:设置图像的宽度
- height:设置图像的高度
- border:设置图像的边框

12.链接标签

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

属性：
- href:用于指定链接目标的URL地址
- target:用于指定链接页面的打开方式
取值：
-self：默认值，在原窗口打开
-blank:在新窗口打开
注意：
(1)外部链接需要加 http://
(2)内部链接直接链接内部链接明后才能即可
(3)href值为"#",表示空链接

13.锚点定位

作用：快速定位到目标内容
创建步骤：

1.使用<a href="#id">链接文本</a>  创建链接文本
2.使用相应的id名标注跳转目标的位置

14.base标签

base可以设置整体链接的打开状态
注意:base标签要写到head标签中

<head>
	<title></title>
	<base target="_blank">
</head>

15.特殊字符标签

在这里插入图片描述

16.注释标签

<!-- 注释语句 -->

html注释的快捷键：
单行注释:ctrl+/
多行注释：ctrl+shift+/

17.路径

包括相对路径和绝对路径
相对路径：
（1）图像文件和HTML文件位于同一文件夹，只需输入图像文件的名称即可。<img src="login.gif">
(2)图像位于HTML文件的下一级文件夹，输入文件夹名和文件名，之间用“/”隔开。<img src="imgages/logo.gif">
(3)图像文件位于HTML文件的上一级文件夹，在文件夹之前加入“…/”，如果是两层，加"…/…/",以此类推。
绝对路径：
（1）直接使用文件的具体位置，一般以盘符开始
（2）网络地址

18.列表

（1）无序列表:各个列表项之间没有顺序级别之分，是并列的

<ul>
	<li></li>
	<li></li>
</ul>

（2）有序列表

<ol>
	<li></li>
	<li></li>
</ol>

(3)自定义列表：常用于对术语或者名词进行解释和描述，定义列表的列表项之前没有任何项目符号

<dl>
	<dt>名词</dt>
	<dd>名词解释1</dd>
	<dd>名词解释2</dd>
</dl>

19.表格

（1）创建表格

<table>
  <tr> 
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>

说明：
- table:用于定义一个表格
- tr :用于定义表格的一行，必须嵌套在table标签中
- td :用于定义表格中的单元格，必须嵌套在tr标签中
（2）表格的属性：

属性名	含义	常用属性值
border	设置表格的边框(默认border=“0”，无边框)	像素值
cellspacing	设置单元格和单元格之间的空白间距	默认为2px
cellpadding	设置单元格内容和单元格边框之间的空白间距	默认为1px
width	设置表格的宽度	像素值
height	设置表格的高度	像素值
align	设置表格在网页中的水平对齐方式	left、center、right

（3）表头标签：一般位于表格的第一行或者第一列，其文本加粗居中

<table>
	<tr>
		<th></th>
		<th></th>
	</tr>
</table>

(4)表格结构
在使用表格进行布局时，可以将表格划分为头部、主体和页脚

<table>
	<thead>
		<!--用于定义表格的头部-->
	</thead>
	<tbody>
		<!--用于定义表格的主体-->
	</tbody>
	<tfooter></tfooter>
</table>

（5）表格标题标签

<caption>表格标题</caption>

（6）合并单元格
跨行合并：rowspa
跨列合并：colspan
（7）总结
a.表格由行中的单元格组成
b.表格中没有列元素，列的个数取决于单元格的个数

20.表单和表单控件

在HTML 中一个完整的表单通常由表单控件（表单元素）、提示信息和表单域3部分组成
（1）表单控件：包含具体的表单功能项
（2）提示信息：说明性文字，提示用户进行填写和操作
（3）表单域：相当于一个容器，用来容纳所有的表单控件和提示信息

input控件：

<input type="text"/>

label标签：为input元素定义标注
作用：用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点
通过for 属性规定 label 与哪个表单元素绑定。

<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">

textarea文本域控件：

<textarea cols="每行中的字符数" rows="显示的行数">
  文本内容
</textarea>

select下拉菜单：

<select>
  <option >选项1</option>
  <!--设置默认被选中-->
  <option selected="selected">选项2</option>
  <option>选项3</option>
  ...
</select>

form表单域：创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器

<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>

说明：
- action:在表单收集到信息后，需要将信息传递到服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的URL
- method:用于设置数据的提交方式，取值为get和post
- name:用于指定表单的名称，以区分同一个页面中的多个表单

21.HTML5新增标签和属性

（1）常用新标签

header:定义文章的页眉
nav：定义导航链接的部分
footer:定义文档或节的页脚
article:规定独立的自包含内容
section：定义文档的节
aside:定义其所处内容之外的内容 侧边
datalist；定义选项列表 ，与input元素配合使用
fieldset:可将表单内的相关元素分组、打包，搭配legend使用

<input type="text" value="请输入明星" list="star"/>
<datalist id="star">
    <option >易烊千玺</option>
    <option >迪丽热巴</option>
    <option >黄子韬</option>
    <option >黄明昊</option>
</datalist>

<fieldset>
    <legend>用户登录</legend>
     用户名： <input type="text"><br/>
     密码： <input type="passsword">
</fieldset>

（2）新增的input的type属性

email:输入邮箱格式
tel:输入手机号码格式
url:输入url格式
number:输入数字格式
search:搜索框
range：自由拖动滑块
time:小时分钟
date:年月日
datetime:时间
month:月份
week:星期 年

邮箱: <input type="email"><br/>
手机号码： <input type="tel"><br/>
地址： <input type="url"><br/>
数字： <input type="number"><br/>
搜索: <input type="search"><br/>
滑块： <input type="range"><br/>
小时分钟： <input type="time" ><br/>
年月日： <input type="data"><br/>
时间: <input type="datatime"><br/>
月年： <input type="month"><br/>
星期 年： <input type="week"><br/>

（3）常用的新属性

placeholder:占位符停工可描述输入字段预期值的提示信息
autofocus:规定当页面加载时input元素应该自动获得焦点
multiple:多文件上传
autocomplete:规定表单是否应该启用自动完成功能，需要提交
required:必填项
accsesskey:规定激活（使元素获得焦点）元素的快捷键

<!-- autocomplete 自定记录完成，必须有提交按钮，必须有name属性 -->
    <form action="">
        姓名： <input type="text" autocomplete name="username">
        <input type="submit">
    </form>

（4）多媒体标签
embed:标签定义嵌入的内容
audio：播放音频
video：播放视频

A.embed可以用来插入各种多每日，格式可以是Midi、Wav、AIFF、AU、MP3等，url指定音频或者视频文件的路径，可以是相对路径也可以是绝对路径
借助第三方播放器（优酷、爱奇艺、腾讯等，先上传再分享）

<embed src="http://player.youku.com/player.php/sid/XMTI4MzM2MDIwOA==/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>

B.audio：用来播放音频

<audio src="音频文件的路径"></audio>

属性：
- autoplay:自动播放
- controls:是否显示播放控件（默认不显示）
- loop :循环播放（loop=2就是循环2次，loop 或者 loop = “-1” 无限循环）
不同浏览器的支持情况不同
在这里插入图片描述
多浏览器支持方式：

<audio controls>
	<source src=".mp3格式的音频文件">
	<source src=".wav格式的音频文件">
	<source src=".ogg格式的音频文件">
	您的浏览器不支持HTML音频功能
</audio>

C.video：用来播放视频

<video src="视频文件的路径"></video>

属性：
- autoplay:自动播放
- controls:是否显示播放控件（默认不显示）
- loop :循环播放（loop=2就是循环2次，loop 或者 loop = “-1” 无限循环）
- width:设置播放器的窗口宽度
- height:设置播放窗口的高度

不同浏览器的支持情况不同
在这里插入图片描述
多浏览器支持方式：

<video controls>
	<source src=".mp4格式的视频文件">
	<source src=".webM格式的视频文件">
	<source src=".ogg格式的视频文件">
	您的浏览器不支持HTML视频功能
</video>

HTML5总结：https://blog.youkuaiyun.com/weixin_44511358/article/details/108288012