HTML5知识点梳理

最新推荐文章于 2022-07-11 22:06:11 发布
最新推荐文章于 2022-07-11 22:06:11 发布
阅读量509 收藏 10
点赞数 1
分类专栏： java前端 文章标签： html5 java 前端 网页设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_49381207/article/details/118970052
版权

HTML基本语法

1.HTML概述

超文本标记语言或超文本链接语言–HTML（HyperText Markup Language）

HTML是一种用来制作超文本文档的简单标记语言，它不是一种真正的编程语言，只是一种标记符。通过一些约定的标签符号对文件内容进行标注，指出内容的输出格式。当用户通过浏览器浏览www信息时，浏览器会自动解释这些标签的含义，并按照一定的格式在屏幕上显示这些被标记的信息。

2.HTML的基本结构

2.1标签的介绍

<!-- DOCTYPE的作用是为了告诉浏览器我们使用的什么规范
    没有这个声明也是可以的，因为浏览器默认HTML规范-->
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>这是文章标题</title>
</head>
<body>

</body>
</html>

在上面那段代码中，用<>扩起来的就是标签。标签用来分割和标记网页的元素，以形成网页的布局、格式等

标签分为单标签和双标签。单标签只需要单独使用就能控制页面效果，如<meta>、<hr>等。双标签成对使用，由一个开始的标签和一个结束的标签构成，如<head></head>等

规范：

  1. HTML语言不区分大小写，但一般默认小写，如<hr>和<HR>都是是一样的效果。
  2. 使用HTML标签时，被使用的标签不可以交错，即标签要正确的嵌套，如<body><form></body></form>应该改为<body><form></form></body>。

2.2页面结构标签

首先是<!DOCTYPE html>

<!DOCTYPE> 声明有助于浏览器中正确显示网页 ，作用是为了告诉浏览器我们使用的什么规范，没有这个声明也是可以的，因为浏览器默认HTML规范

通过上面那段代码可以看出，HTML文档分为文档头和文档体两部分。在文档头中，对这个文档进行了一下必要的定义，文档体中才是要显示在网页的各种正文信息。通常有3对标签来构成一个HTML文档的框架。

(1) <html></html>

​ 这个标签告诉浏览器这个文件是HTML文档。 <html>用于HTML文档的最前面，用来标识HTML文档的开始，</html>用于HTML文档的最后面来标识HTML文档的结束。

(2)<head></head>

​ 这个标签中的内容是文档头部信息，说明一些文档的基本情况，如文档的标题，其内容不会显示在页面中。 在此标签中可以使用<title></title>、<meta>、<spript></spript>等

​ <meta>标签用来描述HTML网页文档的属性，如日期和时间、网页描述、关键词、页面刷新等。

​ 例如：

<meta http-equiv="refresh" content="50";>
<!--每50秒刷新当前页面-->
<meta name="keywords" content="HTML, study，XHTML">
<!--为搜索引擎定义关键词-->
<meta name="description" content="html教程,HTML5学习，前端">
<!--为搜索引擎定义相关的描述-->
<meta http－equiv="Content－Type" content="text/html; charset=UTF-8">
<!--作用是指定当前文档所使用的字符编码为UTF-8-->

在这里插入图片描述

上图是CSDN的页面代码图，大家也可以用F12调试窗口打开观看

(3)<body></body>

​ 这个标签中的内容是HTML文档的主体部分，可包含<p></p>、<h1></h1><hr>等标签会在页面中显示；

3.HTML基本标签

3.1页头标签

<title></title>标签用来设定网页的标题，用在文档头<head></head>之间。

3.2标题标签

在HTML文档中，<hn></hn>标签可以定义不同效果的标签，n表示标签的级数，取值范围1~6，n越小标题越大

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

<hn>可以使用属性align，用来设置标题文字的对齐方式（值有：left，right，center）；如无默认靠左

<h1 align = "center">这是居中的效果显示</h1>

3.3格式排班标签

  1. <br>该标签强制文本换行，但不会在行与行之间留下空格。

  2. <hr>在网页中加入一条水平线并可以设置相关的属性

    ​ （1） size ： 线段粗细的设定，默认单位是像素

    ​ （2） width ： 线段宽度的设定，默认单位是像素 WIDTH=50 ，也可以用相对屏幕的百分比表示WIDTH=50%

    ​ （3） noshade：取消水平线的阴影（不加默认有）该属性不用赋值，直接加入即可使用

    ​ （4） align：设置水平线的对齐方式

    ​ （5）color：设置水平线的颜色

3.4文字格式标签

<font></font>标签通过属性来设置文字的字体、大小、样式和颜色等

  • face：设置字体样式
  • size：设置字体大小，值为整数，分为7个级别，默认为3
  • color：设置字体颜色

3.5段落标签

标签<p></p>用来创建一个新的段落（相当于换行，但会留一个空白行的样式，可以用两个<br/>来取代）。可以有多种属性，如align属性控制其内容的对齐方式（left，right，center），clear属性控制图文混排方式。

3.6预定格式标签

标签<pre></pre>能保留在编译工具里已经编排好的字体

3.7注释标签

<!--这是注释语句的格式，内容不会在浏览器显示-->

4.HTML常用标签

4.1列表标签

4.1.1有序列表

有序列表是各个列表按一定的编号顺序显示，用<ol></ol>表示，用<li></li>定义每一个项

<ol>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
    .....
</ol>

在<ol>里可以用type、start属性，其中

type属性取值：
1 ：数字(默认值)，如1.2.3.
a ：小写字母，如a,b,c
A ：大写字母，如A,B,C
i ：小写罗马字符
I ：大写罗马字符
stare属性设置列表标识的起始编号，默认为1。无论type取什么值，stare都只能是1、2、3······

在<li>中可以使用type、value属性，type属性作用和<ol>中一样；value属性设置编号

4.1.2无序列表

无序列表指没有顺序关系的列表项，列表项前面有一个项目符号，用<ul></ul>表示。

<ul>
    <li>列表项</li>
    <li>列表项</li>
	....
</ul>

在<ul><li>中都可以使用type属性，其中<ul>中的type用来设置所有项目符号的类型；<li>可设置当前列表的项目符号类型。

type属性取值：
1、disc,实心圆(默认值)
2、circle,空心圆
3、square,实心矩形
4、none,不显示标识

4.1.3自定义列表

1、自定义列表目的用于要给出一类事物的定义的情形。

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

使用场合 ：一般用于图文混排

4.2多媒体和超链接标签

4.2.1插入图像

使用<img>标签可以为网页添加.gif / .jpg / .png等格式的图像。属性如下有：

  1. src：图像的地址，可以是绝对路径、相对路径、URL
  2. width：定义图像的宽度，单位像素（注意：指定一个宽度，高度会随指定的宽度相应等比放大或缩小）
  3. height：定义图像的高度（注意：指定一个高度，宽度会随指定的高度相应等比放大或缩小），只利用height属性与只利用width属性可以达到一样的效果，也可二者同时用
  4. hspace：指定图像左边和右边的文字与图像之间的间距；
  5. vspace ：则是上面的下面的文字与图像之间的距离的像素数。
  6. border：指定图像的边框厚度
  7. align：当文字与图像并排放置，属性值有top、center、middle、bottom、left、right
  8. alt：图像的文字说明，当图片不能显示会出现该说明，或鼠标移至图片上会显示提示
  9. title：悬停文字
4.2.2插入视频

可以使用<embed>或<video>标签插入视频

<embed src="地址" width="" height=""/>
<video src="" controls autoplay></video>
<!--controls视频控制窗口，autoplay打开自动播放-->
4.2.3插入背景音乐

可以使用<embed>或<video>标签插入

<embed src="地址"/>
<video src="" controls autoplay></video>
<!--controls视频控制窗口，autoplay打开自动播放-->
4.2.4插入超链接

创建超链接是在当前页面和其他页面间建立连接，使用户可以从一个页面直接跳转到另一个页面、图像等

  1. 使用<a></a>，属性有：

    href：指定链接的地址，外部的URL网站，内部的绝对地址或相对地址

    target：指定显示链接目标的窗口

    • target="self"表示：将链接的画面内容，显示在目前的视窗中。(内定值) 。 即：同(自己)窗口打开,别的数据还存在，相当于在一个页面里中又打开一个页面。
    • _target="_parent"表示：将链接的画面内容，当成文件的上一个画面。即：当前窗口打开,但以前当前窗口数据没有。
    • target="top"表示：将框架中链接的画面内容，显示在没有框架的视窗中（即除去了框架)。即：顶端打开窗口。
    • target="_blank"表示：在新的浏览视窗中打开。即：打开新窗口。
<a href="https://www.baidu.com">打开百度，你就知道！</a>

  1. 锚链接

    锚链接是是在原有链接的基础上，添加锚标记点，用于实现调整到当前网页的某一个位置，或者跳转到其他网页的某一个位置。

    <!--同一页面跳转例子-->
<a name="top">这里是顶部</a>
<a href="#top">回到顶部</a>

<!--不同页面跳转例子-->
<a name="other">这是别的页面/a>
<a href="其他页面.html #other">跳转到其他页面</a>

  2. 功能性链接–邮件链接

    <a href = "mailto:xxxxxx@qq.com">联系我的邮箱</a>
生成QQ链接-->搜索QQ推广，登陆后会自动生成

5.内联框架标签

内联标签<iframe>一般用来包含别的页面，例：我们可以在我们自己的网站页面设定一个区域加载别人网站的内容。如B站视频分享转发中的嵌入代码
在这里插入图片描述

<!--嵌入百度-->
<iframe src="https://www.baidu.com" width="1000px" height="800px"></iframe>
        
<!--B站视频分享嵌入代码-->
<iframe src="//player.bilibili.com/player.html?aid=331959279&bvid=BV16A411K7Cn&cid=305165767&page=1" 
scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

<!--结合href使用-->
<iframe src="" name="addr" frameborder="0"
width="1000px" height="800px"></iframe>
<a href="https://www.baidu.com" target="addr">点击跳转</a>

6.网页结构标签

<header></header>			规定文档或节的页眉。
<footer></footer>			定义文档或节的页脚。
<main></main>				规定文档的主内容。
<section></section>			定义文档的节。
<article></article>			定义文档的文章。
<aside></aside>				定义页面内容以外的内容。
····
<nav></nav>					定义导航链接。

网页基本布局

在这里插入图片描述

7.表格标签

​ 表格相对于在编写张Excel表，是由行、列、单元格组成。可以很好的控制页面布局，很多网站都用多重表格来构建网站的总体布局，固定文本和图像的输出，还可以任意设置单元格颜色。

​ 使用<table></table>标签来进行一个完整表单的声明，使用<tr></tr>定义表格的行，<th></th>定义表格列标题（表头）， <td></td>定义表格单元。 <tr></tr>只能放在<table></table>标签中使用，<th></th>和<td></td>只能放在 <tr></tr>才有用。

<table border="1px" cellpadding="0px" cellspacing="0px">
    <tr>
        <th>表头一</th>
        <th>表头二</th>
        <th>表头三</th>
    </tr>
    <tr>
        <td>单元格一</td>
        <td>单元格二</td>
        <td>单元格三</td>
    </tr>
</table>

  1. 标签<table>常用属性

    • border ：设定围绕表格的边框的宽度。实际上border标签属性不仅设置围绕表格边框的宽度，还为每个单元格添加宽度为1px的边框；
    • width ： 设定表格的宽度， 值可以是整数的像素单位，也可以是相对页面宽度的百分值
    • height：设定表格的高度，值与width一样
    • align ： 设置表格相对于水平标签的对齐方式（left，right，center）
    • valign：设置表格相对于垂直标签的对齐方式（top，middle，baseline）
    • cellspacing： 设定单元格之间的间距（单位：px）
    • cellpadding ： 设定单元边沿与单元内容之间的间距（单位：px）
    • bgcolor ： 设置表格背景颜色，值可以是英文、十六进制值的颜色
    • bordercolor：设置边框颜色

  2. 标签<tr>属性

    • align ，valign ， bgcolor 、bordercolor、height用法同上

  3. 标签<td>属性

    • width / height 、 bgcolor 、 align ·····同上
    • colspan ： 设置单元格横跨多少列，默认为1
    • rowspan ： 设置单元格横跨多少行
    • nowrap ： 设定单元格的内容是否换行，若无自动换行
    • background：设置单元格背景图案

8.表单标签

8.1表单标签

HTML 表单用于接收不同类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。 表单用<form></form>标签，属于容器标签

<form action="url" method="post\get" name="value" target="_blank">
<!--表单元素-->
</form>

表单属性：

  1. action ： 设置表单提交的服务器地址

  2. method ： 定义浏览器将表单中的数据提交给服务器处理程序的方式 ，常用的是get和post ；

​ 使用get方式提交表单数据，输入信息会作为查询字符串附加在action指定的地址后（使用“ ？”隔开）传至服务器，若值内有多个域会使用&隔开。例如：https://localhost/xxx/xxx/xxxx?id=&biz_id=102&utm，问号后即是查询字符串，get方法是以明文形式显示在浏览器地址栏后面，信息会不安全

​ 使用post方法会将用户输入数据进行包装，但还是能通过抓包的形式获取；（想要更安全可以使用后台加密技术）

8.2表单域

8.2.1单行输入域

<input>标签可以在表单中定义单行文本框、单选按钮、复选框等表单元素。其基本语法如下：

<input type=" "  name=" ".../>
  1. type：设置输入域的类型
表单控件(Form Contros)说明
单行文本输入框，size尺寸大小，maxlength输入最大字符，readonly操作变只读（只显示value的值）
input type=“submit”将信息提交给action所指向的文件的按钮
input type=“checkbox” checked复选框，checked设置默认状态
单选框，disable变成不可选
input type=“image” src=""用图片替代submit按钮，文件用src指定
input type=“reset”重置按钮
input type=“password”密码输入框(输入的文字用*表示)
定义滑块
input type=“search” name=“search”定义搜索栏
  1. name：定义输入域的名称
  2. value：定义输入域默认的值
  3. align：定义输入域的位置（left，right，middle，top，bottom）
8.2.2多行输入域

标记<textarea>用于定义多行文本域，常用于需要输入大量文字的地方，如留言、自我介绍等。

  1. name：定义输入域的名称
  2. row： 定义输入域的行数
  3. cols：定义输入域的列数
  4. wrap：设置是否自动换行（值为：off不自动换行，hard自动硬回车换行 换行标记传入服务器，soft自动软回车换行 换行标记不传服务器）
8.2.3选择域

标签<select></select>建立一个下拉列表， <option ></option >定义下拉列表选项。 select标记是和option标记配合使用的 。

（1） select标签属性

	- name：定义下拉列表名称
	- size：设置下拉列表中选项的个数，默认为1
	- multiple：设置下拉列表支持多选

（2）option标签属性

  • selected：默认被选中
  • value：设置值
8.2.4文件域/表单按钮

提交文件，还是用input

<input type="file" name="files">
<input type="buttton" value="上传按钮" name="ipload">

8.3增强鼠标可用性

<label for="mark">点我会自动跳转到某有输入框</label>
<input type="text" id="mark">

8.4表单的简单验证

<p>验证输入是否是邮箱：<input type="email" name="email"> </p>
<p>验证输入是否是url：<input type="url" name="url"> </p>
<p>验证输入是否是数字：<input type="number" name="num" max="100" min="0" step="1"> </p>

以上就是HTML5的知识点梳理，喜欢的话就点个赞吧！

葱烧排骨
关注
  • 1
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5知识点总结
m0_59897687的博客
01-07 893
目录 一、网页概述 1.软件的分类 2.客户端的形式 3.网页 二、HTML总结 1.HTML的注释 2.HTML基本语法 (1).HTML结构及常用标签 (2).标签的属性 (3).文档声明 (4).实体 (5).语义化标签 一、网页概述 1.软件的分类 系统软件（Windows、Linux、macOS）、应用软件、游戏软件 通常情况下，软...
HTML5知识梳理
qq_42376361的博客
06-09 306
一、属性篇 1、placeholder 提示信息 <input type="text" placeholder="请输入账号"> <input type="password" placeholder="请输入密码"> 2、input 的新type属性 在form表单下的Calendar类 标有New的是html5新增加 H5新增加的input属性大多数浏览器都不支持（除了Chrome）所以基本不适用，附带一张仅供参考的兼容图。 3、contenteditable （内容可编
使用HTML5代码实现图文混排
m0_66563570的博客
01-22 4109
编写思路： 准备好图片，使用图像标签<img />插入需要的图片； 设置图片的水平边距hspce=”30”以及左对齐align=”left”以及width图片宽度属性； 使用标题标签<h2>突出标题设置相关属性； 使用段落标签<p>来实现三段文字，设置字号size，字体颜色color属性。 源代码： 实现效果 ...
前端HTML5常用基础知识总结
不想学习的打工人的博客
07-11 2179
HTML 全称为 HyperText Markup Language，译为超文本标记语言。在 VS Code 中，新建 html 文件，输入html:5后，按Tab键或回车后，可以快速生成HTML5的骨架： 1.其中，第一行的声明是HTML5标准2.lang指定页面的语言类型，一般常见的有两种：en：定义页面语言为英语 zh-CN：定义页面语言为中文3.head头标签表示的是页面的配置，其内部的常见标签主要有、、等作用：使网页.........
HTML5重点知识总结
weifeng blog
05-19 370
html5 css js java mysql vue/springboot tomcat/maven 网页最重要三要素：结构、表现和行为。 HTML：结构 CSS：表现 Javascript：行为 Ajax可以使网页实现异步更新 SEO：搜索引擎优化 前端技术只能开发静态网页， 而进一步学习了后端技术，你能开发一个用户交互性更好、功能更加强大的网站 学习HTML就是学习各种标签，然后针对你想要的内容来使用相应的标签； HTML标签即“HTML元素”； head标签代表页面的“头”，定义一些特殊内容，这些内
这可能是最全的HTML(5)知识体系总结
ruanhongbiao的专栏
07-08 1415
1.文档声明（Doctype）和<!Doctype html>有何作用? 严格模式与混杂模式如何区分？它们有何意义? 文档声明的作用 文档声明是为了告诉浏览器，我们写的HTML文档当前使用什么版本的HTML来写的，这样浏览器才能按照我们声明的版本来正确的解析。 <!Doctype html>的作用 <!doctype html> 的作用就是让浏览器进入标准模式，使用最新的 HTML5标准来解析渲染页面；如果不写，浏览器就会进入混杂模式，我们需要避免此类情况发生。 严
HTML5知识整理
qq_45493915的博客
04-27 225
HTML5知识点（一）初识HTML5（二）HTML5常用的语义化和结构元素（三）HTML5图形绘画标签canvas（四）HTML5矢量图形SVG（五）HTML5媒体播放常用标签（六）HTML5新增input类型（七）HTML5常用的表单属性（八）Web本地储存 （一）初识HTML5 什么是HTML5 HTML5 是HTML的最新版本，它是W3C与WHATWG合作的结果。HTML5继承了原先HTML...
HTML5知识点思维导图(手工整理）
最新发布
10-16
以下是一些核心的HTML5知识点： 1. **基本结构与标签**：HTML5文档的基础是`<!DOCTYPE html>`声明，它告诉浏览器使用HTML5规范解析文档。`<html>`标签定义了整个文档的根元素，而`<head>`和`<body>`分别代表元数据...
前端之HTML知识点整理汇总(推荐)
09-28
下面小编就为大家带来一篇前端之HTML知识点整理汇总(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
html知识点整理笔记
06-30
html知识点整理笔记, 包含.mm(FreeMind文件) .pdf 和 .svg三个版本, 图片预览见博客https://blog.csdn.net/weixin_43775143/article/details/118360898?spm=1001.2014.3001.5501
HTML5基础知识归纳汇总
08-30
HTML知识点汇总，包括HTML文档结构和基本语法、HTML4元素、HTML4属性、HTML5元素、HTML5属性和HTML5全局属性的知识点。使用XMind打开。
HTML知识点汇总（代码+知识点）
08-21
HTML知识点汇总（代码+知识点），特别全面的覆盖了HTML的所有标签，无论是学习还是没学，都会在这里找到一个知识体系。使用xmind图导出的形式看起来非常方便。
html5知识结构图
04-09
html5知识结构图html5知识结构图html5知识结构图html5知识结构图
HTML5知识框架体系图
07-23
Html5语言的知识框架体系图，希望能够帮助初学者有个学习HTML5语言的路线和支持
HTML5网页设计基础相关知识点.docx
04-19
大一新生，刚学完HTML5不久，根据书上总结的最基础的知识点，适合没接触过HTML5的人看看
html知识点笔记整理
03-29
HTML、CSS、JavaScript 基础知识点笔记 HTML HTML（HyperText Markup Language）是一种超文本标记语言，用于网页的创建和结构化。HTML 由标签组成，标签可以分为单标签和双标签。单标签只有一个组成，例如：` `...
5张思维导图梳理jQuery知识点
04-25
以下是对这5张思维导图中jQuery知识点的详细梳理： 1. **选择器** - `ID选择器 (#id)`: 通过元素的ID获取单一元素，如`$("#myID")`。 - `类选择器 (.class)`: 选取具有特定类的所有元素，如`$(".myClass")`。 - ...
HTML5小结
飞鸟逐岸的博客
07-19 492
HTML 是文本标记语言（Hyper Text Mark-up Language） Html文件的扩展名一般为.html或者.htm Html内的标签一般是成对出现，有开始就有结束，但也有孤立标签，即不是成对存在的标签。 第一个标签：所有网页内容都是放在html标签内 html标签是网页是最大的标签 第二个标签：在html有两个重要的标签一个叫头部标签，一个叫主体标签：，注意在标签内的所有...
HTML5 基础知识总结(全)
IT_Holmes的博客
04-22 7303
HTML 一1.文档类型2.字符集3.标签< h1 >到< h6 >4.文本格式化标签（熟记）5.标签属性6.图像标签img 学习HTML推荐使用Sublime Text软件来操作练习，一定要熟练使用这个软件，对以后的无论是工作还是学习都有很大帮助。 1.文档类型<!DOCTYPE> <!DOCTYPE html> 这句活就是告诉我们使用那个html版本。 只需要记住，看到上面这行代码，说明使用的是html5的版本。 2.字符集 <meta chars
HTML5知识点梳理：期末考试必备题目解析
本资源是一份关于HTML5的期末考试题型文档，主要涵盖了HTML5的基本语法、元素用法以及新增特性。题目内容涉及到了HTML5的列表标记、头部元素、废弃元素、全局属性、表单验证、滑块控件、Canvas图形绘制以及Web ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值