参考书籍：

《HTML与CSS3基础教程》

参考视频：

HTML5完整教学通俗易懂

 2023新版前端Web开发HTML5+CSS3+移动web视频教程，前端web入门首选黑马程序员

参考网站：

w3school

零.开发环境准备

1.需要的工具

Vscode编译器软件：编写HTML代码，辅助代码补充

浏览器（谷歌，Microsoft Edge等）：展示HTML页面

2.Vscode所需要插件

汉化菜单插件：Chinese
打开网页插件：open in browser
自动刷新页面: live serve

3.其他辅助软件

PxCook前端设计辅助软件：放入UI美工设计的Psd文件，即可获得页面所需要的相关数据，例如间距px，颜色的RGB代码等

一.HTML基本语法

1.HTML基本骨架

html : 整个网页
head :网页头部，用来存放给浏览器看的信息，例如CSS
- meta:描述性标签，描述网站的一些信息
- title：网页标题
body : 网页主体，用来存放给用户看的信息，例如图片文字
生成HTML基本骨架的快捷键：！+回车

<!-- DOCTYPE:告诉浏览器要使用的规范 -->

<!DOCTYPE html>

<html lang="en">

<!-- head代表网页头部 -->

<head>

    <!-- meta描述性标签，描述网站的一些信息 -->

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- title网页标题 -->

    <title>网页标题</title>

</head>

<!-- body代表网页主体 -->

<body>

    存放给用户看的内容

</body>

</html>

2.注释

注释添加快捷键：Ctrl+/

<!--内容-->

3.HTML语法规范

HTML中不区分大小写，但是我们一般都使用小写
HTML中的注释不能嵌套
HTML标签必须结构完整，要么成对出现，要么自结束标签
HTML标签可以嵌套，但是不能交叉嵌套
HTML标签中的属性必须有值，且值必须加引号(双引号单引号都可以)

4.标签规范

单标签

<标签名 [属性名=属性值,...]>

双标签

<标签名 [属性名=属性值,...]></标签名>

二.HTML网页基本标签

1.标题标签

标题标签有h1~h6(双标签)
显示特点：文字加粗，字号逐渐减小，独占一行（换行）
h1标签一般一个网页只用一次

<h1>一级标题</h1>

<h2>二级标题</h2>

<h3>三级标题</h3>

<h4>四级标题</h4>

<h5>五级标题</h5>

<h6>六级标题</h6>

2.段落标签

段落标签：p(双标签)
段落标签的特点：独占一行，段落间存在间隙

示例：

<!-- <p>段落</p> -->

    <p>两只老虎，两只老虎~</p> <p>跑得快，跑得快！</p> <p>一只没有眼睛，一只没有尾巴~</p> <p>真奇怪，真奇怪~</p>

3.换行标签

换行标签：br（单标签)
特点：相对于段落标签p来说，它的间隙更小

示例：

<!-- <br> -->

两只老虎，两只老虎~<br>跑得快，跑得快！<br>一只没有眼睛，一只没有尾巴<br>真奇怪，真奇怪~

4.水平线标签

水平线标签：hr（单标签)

<hr>

5.文本格式化标签

用来添加文本样式，使文字展示不同的样式效果

5.1粗体标签

粗体标签：strong(双标签)或b(双标签)
作用：添加加粗的字体样式

<strong>加粗字体测试</strong>

<b>加粗字体测试</b>

5.2斜体标签

斜体标签：em(双标签)或i（双标签)
作用：添加斜体的字体样式

<em>斜体字体测试</em>

<i>斜体字体测试<i>

5.3下划线标签

下划线标签：ins(双标签)或u（双标签)
作用：添加下划线的字体样式

<ins>下划线字体测试</ins>

<u>下划线字体测试<u>

5.4删除线标签

删除线标签：del(双标签)或s（双标签)
作用：添加删除线的字体样式

<del>下划线字体测试</del>

![](https://img2023.cnblogs.com/blog/3305947/202311/3305947-20231126213510836-1999730110.png)

<s>下划线字体测试<s>

6.图像标签

图像标签：img（单标签)
作用：在网页中插入图片，默认是等比例缩放
src用于指定图像的位置和名称，是图像标签的必须属性

常用属性

属性	值	描述
src	URL	图像的目标链接
alt	text	图像无法显示时的替代文字
title	text	鼠标悬停提示文字
width	x	图像宽度
height	y	图像高度

<img src="path">    <!--省略其他属性-->

<img src="path" alt="text" title="text" width="x" height="y">

7.链接标签

超链接：a(双标签)
作用：点击打开另一个网页

<a href="https://www.baidu.com">百度</a>   <!--打开另一个链接-->

<a href="https://www.baidu.com" target="_blank">百度</a>   <!--在另一个页面打开链接-->

<a href="https://www.baidu.com" target="_self">百度</a>   <!--在当前页面打开链接-->

<!--点击图像打开链接-->

<a href="https://www.baidu.com">

  <img src="../resorces/image/baidu.jpg" alt="百度">

</a>

常用属性

属性	值	描述
href	URL	规定目标的URL
target	_blank,_parent,_self,_top,framename	规定在何处打开目标 URL.

8.表格标签

<!--建立表格-->

<table border="1px" cellpadding="0px" cellspacing="0px">

    <tr>                              <!--建立行-->

        <th>表头一</th>

        <th>表头二</th>

        <th>表头三</th>

        <th>表头四</th>

    </tr>

    <tr>

        <td>单元格一</td>

        <td>单元格二</td>

        <td>单元格三</td>

        <td>单元格四</td>

    </tr>

</table>

9.列表标签

9.1无序列表

9.2有序列表

9.3自定义列表

10.分组标签

三.HTML的特殊符号

1.空格

在HTML代码中输入空格在页面中只会显示一个，因此使用特殊符号可以显示多个空格

空格符号：一个符号代表一个空格，多次使用可以展示多个空格

&nbsp;

2.大于，小于符号(> , < )

大于符号(>)：一个符号代表一个大于符号，多次使用可以展示多个大于符号

&gt;

小于符号(<)：一个符号代表一个小于符号，多次使用可以展示多个小于符号

&lt;

3.版权符号

版权符号()：一个符号代表一个版权符号，多次使用可以展示多个版权符号

&copy;

HTML5语法总结大全的更多相关文章

html5语法
html5语法沿用html语法,但更简单,更人性化. 一.DOCTYPE及字符编码 DOCTYPE:<!doctype html>或者<!DOCTYPE html>因为html ...
100多个基础常用JS函数和语法集合大全
网站特效离不开脚本,javascript是最常用的脚本语言,我们归纳一下常用的基础函数和语法: 1.输出语句:document.write(""); 2.JS中的注释为//3.传统 ...
MySQL语法语句大全
一.SQL速成结构查询语言(SQL)是用于查询关系数据库的标准语言,它包括若干关键字和一致的语法,便于数据库元件(如表.索引.字段等)的建立和操纵. 以下是一些重要的SQL快速参考,有关SQ ...
bootstrap学习起步篇：初识bootstrap之html5语法构建hello篇（一）
目前选择使用bootstrap作为前端页面模板,是件很省心的事情.官网上给出的实例和教程也很多.在实际使用过程中,我们也许还要借助文档去了解它的元素和样式.但也不能减少我们使用他的兴趣. 我准备将其整 ...
Python常用基础语法知识点大全
记得我是数学系的,大二时候因为参加数学建模,学习Python爬虫,去图书馆借了一本Python基础书,不厚,因为有matlab和C语言基础,这本书一个星期看完了,学完后感觉Python入门很快,然后要 ...
让vs2010的html编辑器验证html5语法
或者在Tools -> option -> Text Editor -> Html -> Validation
html5语法改变
<!doctype html> 简化了 <meta http-equiv="Content-type" content="text/html;chars ...
HTML5学习笔记简明版（1）：HTML5介绍与语法
HTML5介绍 HTML5是继HTML4以后的下一代HTML标准规范,它提供了一些新的元素和属性(例如<nav>网站导航块和<footer>).新型的标签有利于搜索引擎和语义分 ...
HTML5 学习总结（一）——HTML5概要与新增标签
一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸 ...
HTML5 学习笔记（一）——HTML5概要与新增标签
目录一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2 ...

随机推荐

简单搭建基本Prometheus监控系统
前言适用场景:新手入门:内网离线部署,只是需要了解服务器基本情况,不需要告警系统. 需要准备的安装包: grafana的docker包(先在线下载,然后docker save保存镜像.如果没有doc ...
[python]爬取手机号码前缀和地区信息
概述使用python爬取手机号码前缀7位.区号和地区. 小网站不容易,对爬虫也挺友好,就不放链接了. 代码 import requests from lxml import etree from f ...
「Go笔记-02」变量、数据类型、数据类型间转换、进制转换...看这一篇就Go了
前言一个程序就是一个世界,不论是使用哪种高级程序语言编写程序, 变量都是其程序的基本组成单位, 变量在 go 中变量是用于存储数据的命名空间(内存位置),它可以表示一个值,这个值在程序执行过程中 ...
SRC赏金猎人—笔记二
以下是如何将速率限制漏洞的影响从低增加到高甚至严重过程 1.我访问了该网站,然后开始在网站的主文件中手动查找main.js 2.我发现有一个 Web 服务托管在 http:// redacted.c ...
为什么NoSQL不支持事务
为什么NoSQL不支持事务 1. 背景看书<Neo4j权威指南>的时候,发现个问题:日常的NoSQL都不支持事务(ACID). 2. 问题事务对数据的存储过程是有利的,既然事情是有利的 ...
HDU 1171 0-1背包
最近感觉DP已经完全忘了..各种爆炸,打算好好复习一发,0-1背包开始 Big Event in HDU Problem Description Nowadays, we all know that ...
为什么大家都在用 WebP？
WebP 是谷歌在 2010 年提出的一种新型的图片格式,放到现在来讲,已经不算是"新"技术了,毕竟已经有了更新的 JPEG XL 和 AVIF .但是在日常工作中,大家时常会碰到 ...
文心一言 VS 讯飞星火 VS chatgpt （99）-- 算法导论9.3 5题
五.用go语言,假设你已经有了一个最坏情况下是线性时间的用于求解中位数的"黑箱"子程序.设计一个能在线性时间内解决任意顺序统计量的选择问题算法. 文心一言: 为了在线性时间内解决任 ...
Jenkins 命令执行 -- jetty 敏感信息泄露 --(CVE-2021-2816)&&(CVE-2017-1000353)&&(CVE-2018-1000861)
Jenkins 命令执行 -- jetty 敏感信息泄露 --(CVE-2021-2816)&&(CVE-2017-1000353)&&(CVE-2018-100086 ...
聊聊基于Alink库的推荐系统
概述 Alink提供了一系列与推荐相关的组件,从组件使用得角度来看,需要重点关注如下三个方面: 算法选择推荐领域有很多算法,常用的有基于物品/用户的协同过滤.ALS.FM算法等.对于不同的数据场景, ...

HTML5语法总结大全