HTML5基础入门

马大胡子

已于 2023-08-13 03:38:15 修改

阅读量870

点赞数

文章标签： html5 前端 html

于 2023-08-13 00:22:19 首次发布

本文链接：https://blog.csdn.net/hhwzy_mqh/article/details/132255521

版权

文章目录

HTML5基础

HTML5基础

HTML5指的是html这种广泛应用于web网站前端开发的标记语言的第五版本，也是目前html语言的最新，最规范的一个版本。

写到这不得不说html5语法简单，容易上手，但里边的标识有很多，对于大多数同志来说，如果不是专业的web前端开发人员，其实没必要过度的深入，只需简要的了解就能满足日常需求。

而本文则是精简后再精简的html入门介绍，目的在于让完全没接触过的同志能快速的了解html。通过学习最基本的html中的知识，即可以看懂大多数网站源代码中html的内容，也可以自己编写简单的静态web网站。

一、html基础语法

html中文名称为超文本标记语言，是一种利用标记来定义的文本，不区分大小写的，一般由键盘输入的多个空格和空行在显示时都会被忽略，所以不像某些编程语言一样必须缩进，但为了方便读写嵌套和结构，一般还是会根据不同的层级进行缩进。

1.1 标记

标记的类型大致分为两类：

封闭类标记，主要是由成对的使用<>括起来的标签组成：

例如：标题标记 <h1></h1>
<h1>称为开始标记，</h1>称为结束标记，结束标记中有一个“/”符号。
非封闭类型标记，是单个的使用<>的标签，也被称为空标记：

例如：换行标记 <br />

1.2 元素

即标记，每一对尖括号包围的部分（含标记），用于标识网页文档的不同部分

可以包含文本内容和其他元素
也可以是空的
可以相互嵌套
例如：<body>内容<body>整个叫做body元素

1.3 属性

不管哪一类标记里都可以在标记<>内添加对应的属性，

基本语法是：属性 = “属性值”

例如：align属性有三个值可以使用，分别是：left/center/right，代表水平左对齐\水平居中\水平右对齐：

<h1 align="center">标题内容</h1>

属性的作用是用来修饰元素
- 属性的声明必须位于开始标记里
- 多个属性之间用空格隔开
- 多个属性间不区分先后顺序
每个属性都有值
- 属性和属性的值之间用等号连接
- 属性值包含在引号中

1.3.1 全局属性

对于所有HTML元素都可以使用的属性
- id属性：规定文档内元素的唯一的id，用于唯一标识页面内的任何元素。
- title属性：规定关于元素的额外信息，这些信息通常会在鼠标移动到元素上时显示一段工具提示文本
- class属性：规定元素的类名，常用于只想样式表中的类
- style属性：规定元素的内联样式
- hidden属性：用于表示某元素时无关的（会被隐藏起来不显示）

1.3.2 元素自己所特有的属性

不通用，实现特定的效果或功能
一些和样式相关的属性，建议使用CSS替代
- bgcolor=“silver”
- font color=“red”
- text=“blue”

二、文档结构

每一个html文件的文档结构基本上都是一样的，就是一个固定框架，如下：

<DOCTYPE HTML>
<html>
	<head>
        <titile>html的页面标题</title>
        <meta charset="utf-8" />        
	</head>
	<body>
	这里是文档的主体内容
	</body>
</html>

2.1 文档类型声明

<DOCTYPE HTML>声明此文档是一个html5的文档

2.2 文档起始标识

<html></heml>定义文档的开始位置和结束位置

2.3 文档头

<head></head>代表html文档的开头部分，有一些可以放在```head``元素中的标识：

2.3.1 页面定义标识：`<meta/>`

用于定义网页的基本信息
为空标记
常用属性
- content=“html,css”
- http-equiv
- charset=“utf-8”
- name=“keywords” …等

示例：

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">

2.3.2 脚本引用标识：`<script></script>`

主要用来引用一些脚本语言文件，有时也会放在body元素中

常用属性：
- src=“URL”
- type=“module”
- nomodule defer

示例：

 <script src="runtime.ebef67442b2002477048.js" type="module"></script>
 <script src="runtime.ebef67442b2002477048.js" nomodule defer></script>
 <script type="text/javascript" src="draw.js"></script>

2.3.3 页面css样式标识：`<style></style>`

页面内部css样式定义的标识，写在当前的html文档内
具体的用法，可以参考css样式表的相关知识

2.3.4 css样式表引入标识：`<link></link>`

把单独的.css文件引入html文档使用，当然也可以引用其他类型的文件

示例：

<!--引入一个ico图标文件-->
<link rel="icon" id="favicon" type="image/x-icon" href="favicon.ico">
<!--引入样式表文件myStyle.css-->
<link type="text/css" href="myStyle.css" rel="StyleSheet" />

2.3.5 页面标题标识：`<title></title>`

用于为html文档定义标题

标题元素的内容出现在浏览器顶部
没有属性
必须出现在<head>元素中
一个文档只能有一个标题元素

示例：

<title>这是一个html标题</title>

2.4 文档主体：`<body></body>`

文档主题内容部分，可以包含多种元素

2.5 文档的注释

语法：
- 注释内容不会显示在浏览器中
- 注释不可以嵌套在其他注释中
- 注释不可以位于嵌在<>中

2.6 一些特殊字符

使用字符实体（转义字符）显示
- 尖括号<>：< >
- 版权符号©：©

三、网页上的文本标记

3.1 文本的段落标记

常用的有：

段落标记<p></p>
- 常用属性：align，水平对齐left/center/right
- 元素中的文本会用单独的段落显示
- 与前后文本都换行分开
- 添加一段额外的垂直空白距离，作为段落间距

示例：

<h3 align="center">荷塘月色</h3>
<p align="center">近现代·朱自清</p>
<p>这几天心里颇不宁静。</p>
<p>今晚在院子里坐着乘凉，忽然想起日日走过的荷塘，在这满月的光里，总该另有一番样子吧。</p>
<p>月亮渐渐地升高了，墙外马路上孩子们的欢笑，已经听不见了；妻在屋里拍着闰儿，迷迷糊糊地哼眠歌。</p>
<p>我悄悄地披了大衫，带上门出去。</p>

换行标记<br/>
- 在任何地方创建手工换行
- 空标记，没有属性
- 使用后，后面跟随的内容将从下一行开始显示

示例：

月亮渐渐地升高了，<br/>墙外马路上孩子们的欢笑，<br/>已经听不见了；<br/>妻在屋里拍着闰儿，<br/>迷迷糊糊地哼眠歌。

分级标题<hn></hn>
- n=0-6，共有6级标题
- h4与正文大小一致

示例：

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

预格式化<pre></pre>
- 保留源文档中的格式
- 即保留原来的换行和文本中的空白

示例：

<pre>
    今晚在院子里坐着乘凉，忽然想起日日走过的荷塘，在这满月的光里，总该另有一番样子吧。
    
    月亮渐渐地升高了，墙外马路上孩子们的欢笑，已经听不见了；妻在屋里拍着闰儿，迷迷糊糊地哼眠歌。
</pre>

3.2 文本表现元素

常用的有

简单修饰元素
- 加粗<b></b>
- 倾斜<i></i>
- 下划线<u></u>
- 删除线<s></s>
- 上标<sup></sup>
- 下标<sub></sub>
- 高亮显示<mark></mark>
常用属性
- size
- width
- align
- color

<b>加粗</b>
<i>倾斜</i>
<u>下划线</u>
<s>删除线</s>
<sup>上标</sup>
<sub>下标</sub>
<mark>高亮显示</mark>

水平线<hr />
- 在页面上创建一条水平线
- 后面的文本将出现在新段落中

3.3 摘要与细节标识`<details></details>`

将部分信息进行展开或收缩
<summary></summary>用来包含标题，类似于显示摘要
- summary用于<details>元素内
- 里边可用<div></div>块元素

3.4 度量元素`<meter>`

用于显示刻度

常用属性
- min和max：设置范围的边界
- value：确定测量的值
- low、high、optimum：将范围划分为不同的部分和设置最佳位置设定后，颜色会有区别：红、黄、绿

3.5 块级元素和内联元素

3.5.1 块级元素

默认情况，块级元素会独占一行，即元素前后都会自动换行

<div>没有实质意义，用来定义一个块区域
- 把文本分割为独立的、不同的部分
- 把页面分隔为多个区域，对这些区域单独的进行样式设置
- 可以将一些文本分在一个组里，然后对这个组进行样式定义
<p>元素和 <h1>元素也是块元素
- 总是在新行商显示，好比是书中的一个新段落
- 块级元素是网页上比较大的机构，因此常包含其他块级元素、内联元素和文本

3.5.2 行内元素

不会换行，可以和其他行内元素位于同一行

元素<b>、<i>、<u>等使用后不会换行
<span>没有实质意义，用来定义一行内的区域
- 用来分组内联元素
- 句子或段落内的某个部分组要分组定义样式
  - <span style="color:green">...</span>
- 内联元素只能在当前行中显示，就像是段落中的一个单词
- 内联元素一般只能包含其他内联元素和文本

四、列表与结构标记

4.1 列表标记

4.1.1无序列表

<ul>元素表示无序列表，用于列出页面上没有特定次序的一些项目

<ul>元素中只能包含具体的列表项元素<li>
列表中的每项必须包含在<li> </li>之间
属性: type
- disc，实心圆
- circle，空心圆
- square，实心矩形

4.1.2有序列表

<ol>元素可以编写有序列表

<ol>元素中只能包含具体的列表项元素<li>元素
属性: type
- 1，数字
- a，小写字母
- A，大写字母
- i，小写罗马数字
- I，大写罗马数字
start属性
- 指定列表的其实数值
- 属性的值必须是列表项顺序的数值表示
li元素的value属性
- 设置某个具体列表项的编号
- value的值只能是数值表示
列表可以嵌套

4.2 结构标记

HTML5提供了结构标记，专门用于标识常见的结构可以方便的实现页面各个部分的划分

<header>页头</hearder>：定义整个页面或者某部分的标题，常用于定义页眉
<nav>导航</nav>：定义导航链接的部分，常用于表示指向其他页面的一组链接
<section>主信息</section>：表示文档中的节，常用于为页面内容分块
<aside>边栏</aside>：定义文本内容之外的内容，常用于定义文章的侧栏  
<article>：定义独立的内容，常用于表示blog、杂志、文章汇编等中的一篇文章
<footer>页脚</footer>：定义整个页面或者某部分的页脚

示例：如果不做css样式定义，看不到很好的效果，这里只能是从框架上展示以下这类标记的使用，各类元素都是可以相互嵌套使用的。

<DOCTYPE HTML>
<html>
	<head>
        <titile>html的页面标题</title>
        <meta charset=”utf-8" />
	</head>
	<body>
        <!--定义整个页面或者某部分的标题，常用于定义页眉-->
		<header> 
			<div>
				<article>
			</div>
		</hearder>
		<hr />
		<nav>导航</nav>
		<hr />
        <!--这里用div定义了一个块-->
		<div>
			<section>主信息</section>
			<aside>边栏</aside>
		</div>
 		<footer>
 		页脚:版权声明；联系人电话；制作……定义整个页面或者某部分的页脚
 		</footer>
	</body>
</html>

五、超链接和图像

5.1 超链接

超链接就是把某些文本指向某个URL，
通常使用<a></a>标记
语法：<a href="" target="">文本</a>

href属性：链接URL
- href="#"点击回到页面顶端
- href="#name"点击回到定义的name描点位置
- href=“页面URL#name”
- <a href="javascript:...">JS功能</a>
- <a href="mailto:邮件地址">联系我们</a>
- <a href="文件名”>下载</a>
target属性：目标，可取值为_blank、_self等
- target=“view_windows”
- target=“_blank”
name属性：描点名称

5.2 图像

在文本中插图图片，一般的图片格式有.jpeg、.png、.gif……等。
语法：<img scr="图像" />

可以添加链接：<a href="URL“><img scr="" /></a>
常用属性
- width 指定图片的宽
- heigth 指定图片的高
- 指定高与宽时注意原图片的比例，不然会显示不完整或者变形

六、表格

绘制表格，大致上与word中的表格差不多，只是实现方式不大一样。表格的用途是比较多的，除了表格本身表现外，也可以用来限制文本格式，早期web页面的框架布局就是利用表格来划分的。

6.1 绘制表格

通常的表格有行、有列、有单元格，在html文本里绘制一个表格通常：

先使用
标识定义表格
在table元素内创建表行，使用标识
最后在逐行创建单元格，使用标识

表格各个标记使用时的相互关系，如下：

<!--先定义表格-->
<table>
	<!--然后根据需要创建表行-->
	<tr>
		<!--再逐行添加单元格-->
		<td></td>
	</tr>
</table>

定义表格：<table></table>
创建表行：<tr></tr>
- 常用属性
  - align，水平对齐left/center/right
  - valign，垂直对齐top/middle/bottom
创建单元格：<td></td>
常用属性
- width，宽度
- height，高度
- border，设置表格边框宽度
- cellpadding，设置内边距（单元格边框与内容之间的距离）
- cellspacing，设置外边距（单元格之间的距离）
- bgcolo，设置表格背景色

6.2 表格的一些操作

6.2.1 设置表格标题

表格的标题可以放置在表格的顶部，也可以在底部
使用<caption>标签

表格标题<caption></caption>
- 默认在表格上方居中显示
- <caption>标签必须紧随<table>标签之后，且只能对每个表格定义一个标题

6.2.2 结构操作

行分组

表格可以划分为3个部分：表头、表主体和表尾，与前边提到的文本的结构标记用法类似，不一样的地方是：只能用在table元素内。
使用行分组，便于统一设置样式
- 表头分组：<thead></thead>
- 表主体分组：<tbody></tbody>
- 表尾行分组：<tfoot></tfoot>

列分组

<colgroup>标签用于对表格中的列进行组合
- 只能在<table>元素中使用
- 必须紧接在<table>标签之后，如果有标题，则紧跟在<caption>标签后

示例：此示例，定义了表格前两列的宽度和剩下列的背景色

<table>
<colgroup span="2" width="20%"></colgroup>
<colgroup style="background-color.#ccc;"></colgroup>
..........

单元格td元素的两个常用属性

单元格的跨行和跨列，相当于合并单元格的效果，就是某一个单元格占有多行或者是多列显示。

colspan，设置单元格跨列
rowspan，设置单元格跨行

6.3 一张完整的表格示例

<table border="1" width="90%">
<caption style="color:red">表格标题</caption>
<colgroup span="2" width="20%"></colgroup>
<colgroup style="background-color:#E00;"></colgroup>
<!--表格被结构标记分开了，要在相同区域中使用colspan和rowspan，不能跨区域合并单元格-->
<!--表头-->
<thead>
	<tr>
		<td>A</td><td>B</td><td>C</td>
	</tr>
</thead>
<!--表主体-->
<tbody style="background-color:#EEE;">
	<tr>
		<td colspan="2" style="background-color:#EE0;">D跨行</td><td rowspan="2">E跨列</td>
	</tr>
	<tr>
		<td>F</td><td>G</td>
	</tr>
</tbody>
<!--表脚-->
<tfoot>
	<tr>
		<td>H</td><td>I</td><td>J</td>
	</tr>

七、多媒体音视频的播放

在html5中新增加了多媒体音视频的元素，从而减少了浏览器对插件的依赖。
如果需要在web里播放音视频只需要使用对于的标识即可，基本于img元素的用法相同，都是使用scr=“”引用对应的音视频文件的。

使用video元素实现在html页面中嵌入视频内容：<video></video>
使用audio元素实现在html页面中嵌入音频内容：<audio></audio>
主要属性
- src属性：用于读取媒体文件
- autoplay属性：设置媒体是否自动播放
- width和height属性：设置视频的宽度和高度，音频用不到
- controls属性：该属性是video元素特有属性，用于显示浏览器所提供的视频控件按钮
- preload属性：设置加载时的播放行为
- none：不缓存视频
- metadata：播放前只加载视频的高度、宽度及其他此类信息
- auto：默认值，要求浏览器尽可能快地下载视频
- loop：设置整个属性，浏览器会反复播放该视频
source元素用来为媒介元素定义媒介资源
- 用于<video></video>和<audio></audio>间
- 可以使用多个<source>元素指定多个不同格式的播放文件和编码方式
- 浏览器按顺序从中选择一种其支持的格式进行播放
- 重要属性
  - src属性：读取媒体文件
  - type属性：指定编码方式
    示例：引用不同类型的视频文件

<video width="320" height="240" controls="controls">
	<source src="movie.ogg" type="video/ogg">
	<source src="movie.mp4" type="video/mp4">
你的浏览器不支持所给格式！
</video>

八、表单

表单在web应用中非常重要，提供的最基本的人机交互，承担着前端向后端服务器提交数据的重要功能。

8.1 基础表单

用于显示、收集信息，并向后端server提交信息，表单的元素可归属为界面元素

8.1.1 定义表单

一般使用from元素创建表单，然后在from元素中添加其他元素，form元素中可以包含之前介绍的多种元素：文本元素、列表元素、图片元素……
标识：<form></form>
主要属性：

action：定义表单被提交时发生的动作，通常包含服务方脚本的URL
method：指出表单数据提交的方式
get
post
enctype：表单数据进行编码的方式
name：表单名称
form的新属性
- novalidate属性，用于规定当提交表单时不对其进行验证
  - 默认情况下，提交表单会引发验证
  - 如果使用该属性，或者novalidate="novalidate"时，则不验证输入
- autocomplete属性，用于规定是否启用表单的自动完成功能
  - 可取值on或者off
  - 默认：on

8.1.2 表单元素

8.1.2.1 input元素

标识：<input/>是一个空元素，提供表单中文本、邮件、URL等数据类型的输入和提交
主要属性：

type：根据不同的type属性值，可以创建各种类型的输入字段
value：空间的数据
name：控件的名称
disabled：禁用控件
type类型种类很多： URL类型、数字类型numbe、范围类型range、颜色类型color、日期相关类型date\ month\ week、时间类型 time\ datetime、搜索类型search
常用的类型：
文本框：<input type="text" />
- name：名称
- value：由访问者自由输入的任何文本
- maxlength：限制输入的字符数
- readonly：设置文本控件只读
密码：<input type="password" />
单选框：<input type="checkbox" />
- value：文本，当提交from时，如果选中此按钮，则value就被发送到服务器
- name：设置名称，用于分组，一组单选框或者复选框的名称必须相同
- checked：设置默认被选中
复选框：<input type="radio" />
标准按钮：<input type="button" />
- name：名称
- value：按钮的标题文本
- onclick
图像按钮：<input type="image" />
- name：名称
- src：图片
- alt：图片上的文本
提交按钮：<input type="submit" />
重置按钮：<input type="reset" />
隐藏域：<input type="hidden" />
文件选择框：<input type="file" />

8.1.2.2 多行文本输入textarea元素

多行文本输入框：<textarea>文本</textarea>
主要属性：

name
cols：指定文本区域的列数
rows：指定文本区域的行数
readonly：只读

8.1.2.3 选项列表select和option元素

一个select元素至少包含一个option元素
select属性：

name
size：大于1，则为滚动列表
multiple：设置多选
option属性：
value：选项的值
selected：预选中

8.1.2.4 选项列表datalist

必须和input元素配合使用
功能与select元素相同，但文本框里可以手动输入
示例：请选择时间：

<input type="text" list="dl_time" />
<datalist id="dl_time">
	<option>上午</option>
	<option>下午</option>
</datalist>

8.1.2.5 button元素用来定义一个按钮

与input元素定义的按钮比较类似
提供更为强大的功能和更丰富的内容
<button>元素内部，可以放置文本或图像
<button></button>标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容
常用属性
- type
- name
- value
- disabled

8.1.2.6 label元素

用法：<label>文本</label>

可以通过属性for=“控件id”，把文本与控件联系在一起，单击文本，效果等同单机关联的控件
比如与复选框控件关联：

<input type="checkbox" name="chkHid" id="chkHid" />
<label for="chkHid">点我就是点复选框</label>

8.1.2.7 fieldset元素

为form中的控件进行分组:
使用<legend>元素：为分组控件指定一个标题

8.2 HTML5表单控件的新属性

multiple属性：输入多个值，逗号分割
placeholder属性：提供一种提示（hint），描述输入域所期待的值
required属性：提示输入字段的值时必须的(不能为空)，其值为require
pattern属性：
用于验证input域的模式，其值验证用的正则表达式
同时设置title属性提示
form属性：设置控件的此属性值为某表单元素的id
formaction属性：用于重写表单的该属性
formmethod属性：用于重写表单的该属性
formtarget属性：用于设置提交的窗口，可以覆盖元素的target属性
formenctype属性：用于设置控件的提交编码方式，可以覆盖表单的enctype属性
autofocus属性：规定在页面加载时，输入域自动地获得焦点
formnovalidate属性：
规定在提交表单时不验证该input域
与元素的novalidate属性功能相关
可以覆盖中的设置
autocomplete属性
规定控件是否应该启动自动完成功能
与元素的此属性相同，会覆盖元素的设置

8.2 HTML5表单控件的新属性

multiple属性：输入多个值，逗号分割
placeholder属性：提供一种提示（hint），描述输入域所期待的值
required属性：提示输入字段的值时必须的(不能为空)，其值为require
pattern属性：
用于验证input域的模式，其值验证用的正则表达式
同时设置title属性提示
form属性：设置控件的此属性值为某表单元素的id
formaction属性：用于重写表单的该属性
formmethod属性：用于重写表单的该属性
formtarget属性：用于设置提交的窗口，可以覆盖元素的target属性
formenctype属性：用于设置控件的提交编码方式，可以覆盖表单的enctype属性
autofocus属性：规定在页面加载时，输入域自动地获得焦点
formnovalidate属性：
规定在提交表单时不验证该input域
与元素的novalidate属性功能相关
可以覆盖中的设置
autocomplete属性
规定控件是否应该启动自动完成功能
与元素的此属性相同，会覆盖元素的设置

马大胡子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

HTML5基础入门

文章目录

HTML5基础

一、html基础语法

1.1 标记

1.2 元素

1.3 属性

1.3.1 全局属性

1.3.2 元素自己所特有的属性

二、文档结构

2.1 文档类型声明

2.2 文档起始标识

2.3 文档头

2.3.1 页面定义标识：<meta/>

2.3.2 脚本引用标识：<script></script>

2.3.3 页面css样式标识：<style></style>

2.3.4 css样式表引入标识：<link></link>

2.3.5 页面标题标识：<title></title>

2.4 文档主体：<body></body>

2.5 文档的注释

2.6 一些特殊字符

三、网页上的文本标记

3.1 文本的段落标记

3.2 文本表现元素

3.3 摘要与细节标识<details></details>

3.4 度量元素<meter>

3.5 块级元素和内联元素

3.5.1 块级元素

3.5.2 行内元素

四、列表与结构标记

4.1 列表标记

4.1.1无序列表

4.1.2有序列表

4.2 结构标记

五、超链接和图像

5.1 超链接

5.2 图像

六、表格

6.1 绘制表格

6.2 表格的一些操作

6.2.1 设置表格标题

6.2.2 结构操作

6.3 一张完整的表格示例

七、多媒体音视频的播放

八、表单

8.1 基础表单

8.1.1 定义表单

8.1.2 表单元素

8.1.2.1 input元素

8.1.2.2 多行文本输入textarea元素

8.1.2.3 选项列表select和option元素

8.1.2.4 选项列表datalist

8.1.2.5 button元素用来定义一个按钮

8.1.2.6 label元素

8.1.2.7 fieldset元素

8.2 HTML5表单控件的新属性

8.2 HTML5表单控件的新属性

2.3.1 页面定义标识：`<meta/>`

2.3.2 脚本引用标识：`<script></script>`

2.3.3 页面css样式标识：`<style></style>`

2.3.4 css样式表引入标识：`<link></link>`

2.3.5 页面标题标识：`<title></title>`

2.4 文档主体：`<body></body>`

3.3 摘要与细节标识`<details></details>`

3.4 度量元素`<meter>`