第一篇博客-小白的HTML知识点汇总（一）-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_47193031/article/details/106644390

本文详细介绍了HTML的基础知识，包括HTML5的新特性，如canvas和多媒体支持。文章阐述了HTML的结构，如<!DOCTYPE>声明、html、head和body标签，强调了meta和title标签的重要性。此外，还讲解了文本格式化、超链接、图像、列表、表格、表单元素和多媒体元素的使用，是初学者掌握HTML5的宝贵资料。

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

这里写目录标题

一、什么是HTML？

用来描述网页的一种语言
超文本标记语言（Hyper Text Markup Language），是一种用于创建网页的标准标记语言
html不是编程语言，是一种标记语言
包括了HTML标签及文本内容
使用标记标签来描述网页
HTML文档也叫web页面

二、HTML5的新特性：

用于绘画的canvas标签
用于媒介回放的video和audio元素
对本地储存的更好支持
新的特殊内容元素：article、footer、header、nav、section
新的表单控件：calenar、date、time、emil、url、search
浏览器的支持：Sacrifice、Chrome、Firefox、Opera、IE9

三、主流web浏览器及其内核

浏览器	内核
IE	trident
Google Chrome	Gecko
Safari	Webkit ; blink
Opera	Webkit
Firefox	presto

web浏览器是用于读取HTML文件，并将其作为网页显示，浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页的内容给用户

四、学好html5进阶路

HTML --> XHTML --> Css --> Css3 --> JavaScript–> JQuery --> HTML5（忘记哪里copy来的了）

五、★<!DOCTYPE>声明

有助于浏览器中正确的显示网页
不区分大小写，如<!doctype html>

<!Doctype Html>
<!DOCTYPE html>是HTML5的通用声明

六、★html基础标签:

HTML标记标签通常被称为HTML标签（HTML tag）
HTML标签是由尖括号包围的关键词，如
HTML标签通常是成对出现的，如<b>内容</b>,

其中<b>为开始标签（也称开放标签），</b>为结束标签（也称闭合标签）
开始标签-内容-结束标签—>组成HTML元素

1.根标签html

<html>.....</html>

是html页面的根元素

2.头部标签head(用户看不到的)

<head>.....</head>

head标签用于定义文本文档的头部，它是所有头部元素的容器

用法：head内部的元素可以引用脚本、样式表、提供元信息

head标签内可填入：

1.★meta标签

<meta charset="utf-8">

提供有关的页面信息

对于中文网页需使用utf-8声明编码，否则会乱码

360浏览器gbk为默认编码，需设置值为gbk

2.★title标题标签

<title>php中文网</title>

定义文档的标题，head部分中唯一必需的元素

3.引入外部样式

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

定义文档与外部资源的关系最常见的用途是链接样式表
rel:规定当前文档与被链接文档之间的关系
type:定义被连接文档的类型
引入头部logo

4.引入内部样式

<link rel="icon" type="image/x-icon" href="2.png">

5.引入样式表

<style type="text/css">//样式表</style>

6.直接嵌入脚本文件

<script type="text/javascript">// 脚本</script>

7.引入外部脚本文件

<script type="text/javascript" src="demo.js"></script>

3.★body标签（用户看得到的）

1.定义1-6级标题

<h1>...</h1>....<h6>...</h6>

独成一段，更改字体大小，加粗

2.定义段落

<p>...</p>

把html文档分成若干段落

浏览器会自动在段落前后添加空行

注意结束标签别忘写

3.水平线分割

<hr>

展示为一条长分隔符

4.空元素

<br>

实现换行，独成一行

七、HTML文本格式化

1.定义粗体文本

<b>...</b> 粗体文本
<strong>...</strong> 加重语气

2.定义着重，斜体文字

<em>...</em> 着重文字
<i>...</i> 斜体文字

3.定义小号字体

<small>...</small>如：小号字体

4.定义大号字体

<big>...</big> 加大号字体

5.定义加重语气

<strong>...</strong> 加重语气

6.定义插入字

<ins>...</ins> 插入字

7.定义删除字

<del>...</del> ~~删除字~~

8.定义缩写

<abbr>...</abbr>

<p><abbr title="HyperText Markup Language">html</abbr>(超文本标记语言)</p>

在这里插入图片描述

9.定义文字方向rtl和ltr

<bdo dir="rtl">定义文字方向</bdo> 向方的字文义定
<bdo dir="ltr">定义文字方向</bdo> 定义文字方向

10.定义引用语

定义短的引用语

<p><q>HyperText Markup Language</q>超文本标记语言</p>

在这里插入图片描述

定义长的引用语

<blockquote>...</blockquote>

八、HTML的超链接

HTML使用标签 <a>来设置超文本链接（超链接可以是一个字，一个词，或者一组词，也可以是一幅图像）
作用：HTML使用超级链接与网络上的另一个文档相连，点击链接可以跳转到新的文档或者当前文档中的某个部分；
使用范围：几乎可以在所有的网页中找到链接
作为超链接，锚点（置顶），打电话，发邮件

<a href="链接地址" target="_blank">文字or词or图片or网址 </a>

href 属性描述了链接的目标

使用 target 属性以定义被链接的文档在何处显示默认本页面 _blank:在新窗口打开文档

例如：

<a href="http://www.php.cn/" target="_blank" >php中文网</a>

<a href="https://www.baidu.com/"><img src="images/1.jpg"></a>

九、HTML的图像

<img src="url" alt="" title="这是图片"

url ：指填入图像的位置（可以是本地地址，也可以是网络上地址）

alt属性用来为定义图像添加备注信息（如果图像丢失不显示，就会显示alt内内容）

title作为图片提示符

十、HTML的列表

1.★无序列表

<ul>
		<li>苹果</li>
		<li>苹果</li>
</ul>

苹果
苹果

2.有序列表

<ol type="Ⅰ/i/1/a/A" start="">
		<li>梨子</li>
		<li>梨子</li>
</ol>

type 定义类型罗马数字Ⅰ/i，A/a，1

罗马数字Ⅰ目前无法显示!!!

start表示从几开始，用1234表示即可

<ol type="i" start=3>
		<li>梨子</li>
		<li>梨子</li>
</ol>

3.自定义列表

<dl>
		<dt>梨子</dt>
		<dd>生津止渴</dd>
		<dt>苹果</dt>
		<dd>好吃</dd>
</dl>

梨子

生津止渴

苹果

好吃

十一、HTML的表格

表格由<table>标签来定义
表格内的行由<tr>标签来定义
表格内的列由<td>标签来定义
表格表头由<th>标签来定义
表格标题由<caption>标签来定义

  <table border="1">
  		<tr>
  			<td>这是一个一行一列的表格</td>
  		</tr>
  	</table>

这是一个一行一列的表格

其中 border 来定义边框

 <table border="1">
		<tr>
			<td>这是一个二行一列的表格</td>
		</tr>
		<tr>
			<td>这是一个二行一列的表格</td>
		</tr>
</table>

这是一个二行一列的表格

<table border="1">
		<tr>
			<td>这是一个一行多列的表格</td>
			<td>这是一个一行多列的表格</td>
			<td>这是一个一行多列的表格</td>
			<td>这是一个一行多列的表格</td>
		</tr>
	</table>

这是一个一行多列的表格

<table border="1">
		<caption>表格的标题</caption>
		<tr>
			<th>这是表头</th>
			<th>这是表头</th>
			<th>这是表头</th>
			<th>这是表头</th>
		</tr>
		<tr>
			<td>这是一个一行多列的表格</td>
			<td>这是一个一行多列的表格</td>
			<td>这是一个一行多列的表格</td>
			<td>这是一个一行多列的表格</td>
		</tr>
	</table>

表格的标题
这是表头	这是表头	这是表头	这是表头
这是一个一行多列的表格	这是一个一行多列的表格	这是一个一行多列的表格	这是一个一行多列的表格

caption 用来定义表格标题

th来定义表格表头

十二、HTML文档区块（div/span）

（div和span）作为容器，使分块明确，结构化，绑定操作
大多数 HTML 元素被定义为块级元素或内联元素
1. 块级元素在浏览器显示时，通常会以新行来开始和结束（div），每个<div>标签独占一行
2. 内联元素在显示时通常不会以新行开始(span)，<span>标签不会独占一行
div:定义了文档的区域，块级元素
span:用来组合文档中的行内元素
div和span标签可以组合使用

html中文网 html中文网 html中文网

十三、HTML文档中的表单（form）

作用：表单用于收集不同类型的用户输入
<form></form>表单是一个包含表单元素的区域
<input>元素: 最重要的表单元素,该元素根据不同的 type 属性，可以变化为多种形态

text–>定义常规文本输入（常用：搜索框/用户名及密码）

password–>定义密码字段输入

submit–>定义提交按钮（提交表单,有刷新效果）

radio–>定义单选

checkbox–>定义多选

select>option–>定义下拉列表

textarea–>定义文本域

button–>定义按钮（有刷新效果/无刷新效果）

<form action="url" method="GET/POST"></form>

action:定义在提交表单时执行的动作

method:规定在提交表单时所用的 HTTP 方法（GET 或 POST）
GET : 适合少量数据的提交,并且没有敏感信息
POST: 安全对数据长度没有要求

1.账户密码表单：

<form action="url" method="post">
		 用户：<input type="text" value="goodlzyc">
		 密码：<input type="password" value="">
		 	<input type="submit" name="submit"><!--有刷新效果-->
	</form>

value 属性定义字段的初始值

2.单选：

<form>
	单选：<input type="radio" name="sex" value="male">男
		<input type="radio" name="sex" value="female">女
</form>

3.多选：

<form>
	双选：<input type="checkbox" name="subject" value="math">数学
		<input type="checkbox" name="subject" value="english">英语
	</form>

4.下拉列表：

<select>	
		<option>江苏</option>
  		<option>合肥</option>
  		<option>河北</option>
  		<option>山东</option>
 </select>

5.文本域及提交按钮：

<form>
    <textarea></textarea>
    <button>发布</button><!--有刷新效果-->
    <input type="button" value="发布">
</form>

无刷新效果

6.HTML5新增表单输入类型：

输入购买件数：

   <input type="number" name="">

输入出生日期（年月日）：

   <input type="date" name="">

输入年月：

   <`input type="month" name="">`

输入邮件地址：

   <input type="email" name="">

搜索：

   <input type="search" name="">

滑块条：

   <input type="range" name="">

等等，更多自己去查

7.常用的表单属性：

1.姓名：<input type="text" name="" value="feir">

value 属性规定输入字段的初始值

2.姓名：<input type="text" name="" value="feir" readonly>

readonly 属性规定输入字段为只读（不能修改

3.姓名：<input type="text" name="" value="feir" disabled>

disabled 属性规定输入字段是禁用的

姓名：<input type="text" name="" value="feir" size="45">

size 属性规定输入字段的尺寸以字符计算的长度

5.姓名：<input type="text" name="" value="feir" autofocus>

autofocus当页面加载时元素应该自动获得焦点

6.<input type="text" name="" placeholder="请输入你的姓名">

placeholder 属性规定用以描述输入字段预期值的提示

在这里插入图片描述

<input type="text" name="" placeholder="允许输入的最大长度" maxlength="3">

maxlength 属性规定输入字段允许的最大长度

 <input type="number" name="" placeholder="允许输入的最大值" max="3">
 <input type="number" name="" placeholder="允许输入的最小值" min="3">

min 和 max 属性规定元素的最小值和最大值

<input type="text" name="" required placeholder="请输入用户名"><input type="submit" name="">

required规定在提交表单之前必须填写输入字段,不填入会有警告提示

在这里插入图片描述

十四、HTML5的多媒体

1. 音频

标签定义声音，比如音乐或其他音频流。
标签为媒体元素定义媒体资源
control 属性供添加播放、暂停和音量控件
loop每当音频结束时重新开始播放
不支持audio元素的浏览器会显示”您的浏览器不支持audio元素“文字

  <audio controls loop>
  	<source src="音乐/华晨宇 - 亲爱的小孩 (Live).mp3" type="audio/mp3">
  	您的浏览器不支持 audio 元素	
  </audio>

2. 视频

<video> 标签定义视频，比如电影片段或其他视频流
<source>标签为媒体元素定义媒体资源
control 属性供添加播放、暂停和音量控件
loop每当音频结束时重新开始播放
不支持video标签的浏览器会显示”您的浏览器不支持video标签“文字
width和height设置视频的宽高

 <video controls loop >
      	<source src="音乐/Exo - 3.6.5.mkv" type="video/mp4" width="404" height="720">
      	您的浏览器不支持Video标签
   </video>

???IE浏览器播放video无声音

3.embed标签（chrome不支持embed标签，火狐和IE均支持）

标签定义了一个容器用于嵌入的内容，比如插件;(图片\视频\音频)

   <embed src="学习/QQ截图20200527213019.png" height="350px" width="650px" />

chrom显示图片，IE不显示图片

 <embed src="音乐/Exo - 3.6.5.mkv" type="video.mp4" height="550px" width="650px">

chrom支持插件，IE播放时视频但无声音

   <embed src="音乐/EXO - 初雪.mp3" type="audio/mp3">

chrom，IE浏览器支持音乐播放