【Web前端】HTML基础知识详解

已于 2023-05-13 13:08:14 修改
阅读量3.4k 收藏 41
点赞数 8
分类专栏： Web前端 文章标签： 前端 html
于 2022-10-23 21:36:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aidijava/article/details/127436089
版权

文章目录

1. HTML 简介

HTML 指的是超文本标记语言(HyperText Markup Language)，是用来描述网页的一种语言。

  • HTML 不是编程语言，而是标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页

1.1 HTML 基本结构

以下为HTML基本结构：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
</body>
</html>
  • <!DOCTYPE html>：声明为 HTML5 文档
  • <html>元素： HTML 页面的根元素
  • <head>元素：头部元素，包含了文档的元数据(meta)，标题(title)等
  • <body>元素：包含了可见的页面内容

1.2 HTML 元素

HTML元素基本组成：

  • 开始标签
  • 结束标签
  • 元素内容

注：
1.空标签：只有开始标签，没有结束标签，如<br/> 、<img>等
2.大部分HTML 元素拥有属性

HTML 元素解析示例：

<a href="http://www.baidu.com">百度链接</a>
  • <a>：开始标签
  • </a>：结束标签
  • 百度链接：元素内容
  • href：属性名
  • http://www.baidu.com：属性值

2. HTML 编辑器

推荐使用现在主流的编辑器VS Code，VS Code的安装与使用。

2.1 Live Server 插件

下载完VS Code后建议安装插件Live Server，这款插件可以在保存html文件时自动刷新页面，可以省去自己每次手动刷新页面。

注：Live Server，只有通过VS Code打开文件夹时才有用，单独打开这个文件是无效的。

VS Code的使用：
1.新建一个文件夹，右键文件夹 -> 通过Code打开 ->左上角新建一个html文件，如demo.html，编辑demo.html，输入!再按Tab或者回车，会自动生成html基本结构代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

2.右键Open With Live Server打开浏览器，之后再对demo.html修改保存，网页会自动刷新。

在这里插入图片描述
在这里插入图片描述

2.2 Prettier 插件

建议安装插件Prettier，可以美化代码。

1.打开设置：文件 -> 首选项 -> 设置，搜索设置框输入editor.defaultFormatter,选择Prettier。

在这里插入图片描述

2.搜索设置框输入editor.formatOnSave，勾选保存时格式化文件。

在这里插入图片描述

3.设置完以后，再保存文件，会自动美化代码。

3. HTML 标签

3.1 常用标签汇总

1.文本

标签英文释义说明
<h1> - <h6>heading标题
<p>paragraph段落
<br/>break换行
<b>bold加粗
<i>italic斜体
<sub>subscript下标字
<sup>superscript上标字

2.超链接和图像

标签英文释义说明
<a>anchor超链接
<img>image图像

3.表格

标签英文释义说明
<table>table表格
<tr>table row表格的行
<td>table data单元格
<th>table heading表头

4.列表

标签英文释义说明
<ol>ordered list有序列表
<ul>unordered list无序列表
<li>list item列表项
<dl>definition list自定义列表
<dt>definition term自定义列表组
<dd>definition description自定义列表描述

5.块级元素和内联元素

标签英文释义说明
<div>division块级元素，无特定含义
<span>span内联元素，无特定含义

6.表单

标签属性属性说明
formaction服务端的URL路径
method表单的提交方式
inputtext文本框
password密码框
radio单选框
checkbox复选框
submit提交按钮
buttontype按钮类型
onclick点击按钮发生的事件
selectoption下拉列表的选项

7.框架

标签说明
<iframe>当前 HTML文档中嵌入另一个文档

8.头部

标签说明
<title>页面标题
<base>链接的默认URL以及默认打开方式
<link>链接外部资源
<meta>页面描述
<style>样式
<script>脚本

3.2 注释

<!-- -->用于注释。

<!-- 注释 -->

3.3 文本

3.3.1 标题

通过<h1> - <h6>用来定义标题，其中<h1>为最大标题，<h6>为最小标题。

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

运行结果：

在这里插入图片描述

3.3.2 段落

<p>用来定义段落，<br/>用来换行。

<p>落霞与孤鹜齐飞，秋水共长天一色。</p>
<p>落霞与孤鹜齐飞，<br/>秋水共长天一色。</p>

运行结果：

在这里插入图片描述

3.3.3 文本格式化

常见的文本格式化如下：<b> 加粗、<i>斜体、<sub>下标字、<sup>上标字。

<b>粗体</b>
<i>斜体</i>
<p>f<sub>(x)</sub>=x</p>
<p>x<sup>2</sup>=4</p>

运行结果：

在这里插入图片描述

3.4 超链接

<a>用来设置超文本链接，其中href属性用于描述链接的地址，target规定在何处打开链接的地址。

1.不加target属性，默认当前页面打开链接
2.target="_blank"代表新窗口打开链接

<a href="http://www.baidu.com" target="_blank">百度链接</a>

运行结果：

在这里插入图片描述
点击该链接后，在新窗口打开百度地址。

3.5 图像

<img>用于页面显示图片：

  • src属性用于描述图片的 URL 地址。
  • alt属性用于图片不能正常显示时出现的文本提示。
  • title属性用于鼠标悬停在图片上的文本提示。
  • width属性为图片的宽度。
  • height属性为图片的高度。
<img src="https://www.baidu.com/img/bdlogo.png" alt="图片未能加载成功" title="百度logo" width="540" height="258">
<img src="bdlogo.png" alt="图片未能加载成功">

运行结果：
在这里插入图片描述

3.6 表格

<table> 用于定义表格：

  • 每个表格有若干行<tr>。
  • 每行有若干单元格<td>。
  • 表格的表头为<th>，显示为粗体居中的文本。
  • rowspan属性用于跨行合并单元格
  • colspan属性用于跨列合并单元格

1.基础表格

<table border="1">
    <tr>
        <th>姓名</th>
        <th>院系</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>计算机学院</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>软件学院</td>
    </tr>
</table>

运行结果：
在这里插入图片描述

2.跨行、跨列合并单元格的表格

<!-- 跨行合并单元格 -->
<table border="1">
    <tr>
        <th rowspan="2">猫科</th>
        <td>狮子</td>
    </tr>
    <tr>
        <td>老虎</td>
    </tr>
    <tr>
        <th>犬科</th>
        <td>狼</td>
    </tr>
</table>

<br>

<!-- 跨列合并单元格 -->
<table border="1">
    <tr>
        <th colspan="2">猫科</th>
        <th>犬科</th>
    </tr>
    <tr>
        <td>狮子</td>
        <td>老虎</td>
        <td>狼</td>
    </tr>
</table>

运行结果：

在这里插入图片描述

3.7 列表

3.7.1 有序列表

<ol>定义有序列表，<li>为列表项。

<ol>
    <li>咖啡</li>
    <li>牛奶</li>
</ol>

运行结果：

在这里插入图片描述

3.7.2 无序列表

<ul>定义无序列表，<li>为列表项。

<ul>
    <li>咖啡</li>
    <li>牛奶</li>
</ul>

运行结果：

在这里插入图片描述

3.7.3 自定义列表

<dl>为自定义列表，<dt>为自定义列表项，<dd>为自定义列表项的描述。

<dl>
    <dt>咖啡</dt>
    <dd>- 热饮</dd>
    <dt>牛奶</dt>
    <dd>- 冷饮</dd>
</dl>

运行结果：

在这里插入图片描述

3.8 块级元素和内联元素

1.块级元素：块级元素独占一行，常见的块级元素有<div>、<h1> 、<p>等。

<div>：该块级元素没有特定的含义；主要用途是文档布局；可以配合CSS 一同使用，用于对大的内容块设置样式属性。

2.内联元素：内联元素不会以新行开始，也称行内元素，常见的内联元素有<span>、<b>、<a>等。

<span>：该内联元素没有特定的含义； 可以配合CSS 一同使用，用于为部分文本设置样式属性。

3.9 表单

<form>用于定义表单，表单用于收集用户的输入信息。

表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。

3.9.1 文本框和密码框

<input>：input标签的type属性，决定了输入类型。

  • <input type="text">：文本框
  • <input type="password">：密码框
<form>
    用户名：<input type="text"> <br/>
    密码：<input type="password">
</form>

运行后，在两个输入框内输入内容，结果如下：

在这里插入图片描述

3.9.2 单选框和复选框

  • <input type="radio">：单选框
  • <input type="checkbox">：复选框
<form>
    <input type="radio" name="sex" value="male">男
    <input type="radio" name="sex" value="female">女 <br/>
    <input type="checkbox" name="animal" value="cat">猫
    <input type="checkbox" name="animal" value="dog">狗
    <input type="checkbox" name="animal" value="hamster">仓鼠
</form>

运行结果：

在这里插入图片描述

3.9.3 自定义按钮和提交按钮

  • <button type="button"></button>：自定义按钮
  • <input type="submit">：提交按钮

区别：在<button> 元素内部，可以放置内容，比如文本或图像。这是该元素与使用 <input> 元素创建的按钮之间的不同之处。

1.自定义按钮

  • type属性有button、reset、submit，为按钮的类型

  • onclick属性为点击按钮发生的事件

<button type="button" onclick="alert('Hello World!')">点击一下</button>

运行后，点击按钮，出现弹框如下：

在这里插入图片描述

2.提交按钮

当用户单击确认按钮时，表单的内容会被传送到服务器。

  • action属性定义了服务端的URL路径。
  • method属性定义了表单数据的提交方式，属性值有get和post。
    • get：默认值，指的是 HTTP GET 方法，表单数据会附加在 action 属性的 URL 中，并以 ?作为分隔符，一般用于不敏感信息，如分页等。例如：http://127.0.0.1:5500/test.php?username=123456，这里的username=123456 就是 get 方法提交的数据。
    • post：指的是 HTTP POST 方法，表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等。
<form name="input" action="test.php" method="get">
    用户名: <input type="text" name="username">
    <input type="submit" value="提交">
</form>

运行后，输入123456，点击提交按钮：
在这里插入图片描述

提交后结果如下：

在这里插入图片描述

因为 test.php文件路径不存在，所以报错了

3.9.4 下拉列表

<select>定义下拉列表，<option>定义下拉列表的选项。

<select name="animal">
    <option value="cat">猫</option>
    <option value="dog">狗</option>
    <option value="hamster">仓鼠</option>
</select>

运行结果：

在这里插入图片描述

3.10 框架

<iframe>用于定义框架，通过使用框架，可以在同一个浏览器窗口中显示不止一个页面。

1.原demo.html文件,内容如下：

<iframe src="test.html" width="200" height="200"></iframe>

2.在demo.html同级目录下新建test.html，内容如下：

<p>
    丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。<br>

    明月几时有？把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。<br>
    
    转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。
</p>

3.运行demo.html文件,结果如下：

在这里插入图片描述

3.11 头部

<head> 元素包含了所有的头部标签元素。

头部区域的元素标签如下：

  • <title>：定义了页面的标题
  • <base>：规定页面上所有链接的默认URL和链接的默认打开方式
  • <link>： 标签定义了文档与外部资源之间的关系，常用于链接到样式表
  • <meta>：元数据，通常用于指定网页的描述，关键词、文件的最后修改时间、作者等
  • <style>：用于添加样式来渲染 HTML 文档
  • <script>：用于加载脚本文

1.<title>标签

  • 在所有 HTML 文档中是必需的
  • 定义了网页标题
  • 网页添加到收藏夹时，显示在收藏夹中的标题
  • 显示在搜索引擎结果页面的标题
<title>HTML教程</title>

运行后，并收藏该页面，结果如下：
在这里插入图片描述
2. <base>标签

  • href：默认URL
  • target：默认链接打开方式
<head>
    <base href="https://www.baidu.com/img/" target="_blank">
</head>
        
<body>
    <img src="bdlogo.png" alt="图片无法加载">
    <a href="https://www.baidu.com/">百度链接</a>
</body>

注：

  1. bdlogo.png为相对路径，加上前面base的路径，得到的路径是src="https://www.baidu.com/img/bdlogo.png"
  2. a·的target属性没有设置，则默认为base中的target="_blank"，点击百度链接在新窗口打开百度首页。

运行结果：
在这里插入图片描述

3.<link>标签

  • rel：此属性必需填写，定义了当前文件与被链接文件之间的关系
  • type：规定被链接文件的 MIME 类型
  • href：文件URL
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>

4.<meta>标签

常用属性如下：

  • charset="UTF-8"：定义文档的字符编码
  • name="author"：定义网页作者
  • name="description"：定义网页描述
  • name="keywords"：为搜索引擎定义关键词
<meta charset="UTF-8">
<meta name="author" content="张三"> 
<meta name="description" content="Web前端基础教程">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">

5.<style>和 <script>标签

将冲破艾迪i
关注
  • 8
    点赞
  • 踩
  • 41
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML基础知识点汇总
12-04
HTML基本标签汇总讲义。虽然只有短短几页但基本包含了html所有标签。对初学者是必不可少的资料。
HTML的基本框架
h3197的博客
12-07 5034
以上就是HTML的基本框架，有遗漏的话，欢迎评论区补充哦。
网络安全小白入门基础：HTML（非常详细）零基础入门到精通，收藏这一篇就够了
最新发布
Python84310366的博客
07-16 729
（1）图片、音频、视频、动画、多媒体等内容，成为超文本，因为它们超出了文本的限制。（2）不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件进行连接。即：超级链接文本。（1）标记语言是一套标记标签。比如：标签。
HTML5基础
qq_62243433的博客
01-02 2757
一.html5的基本框架： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt
HTML基础知识（一）
11-02 3159
HTML的基础属性介绍包括布局、表格、表单、图像、列表等
HTML入门（详细）
热门推荐
qq_63525426的博客
05-03 2万+
HTML（全称为“超文本标记语言”）是一种用于创建Web页面的标记语言。它是Web开发的基础，允许开发者定义页面的结构、内容和样式。HTML使用一些标记或“标签”来描述文本和媒体内容的结构和格式，这些标签可以指示网页浏览器如何显示内容，包括标题、段落、列表、超链接、图像、音频、视频等等。HTML还可以与其他Web技术（如CSS和JavaScript）结合使用，以实现更复杂和交互性的Web应用程序。这篇文章只是介绍HTML的基础标签的使用。
Web前端基础.md
01-13
### Web前端基础知识点详解 #### 一、Web前端介绍 ##### 1. 什么是网页 网页是一种基于浏览器的应用程序，其主要功能在于展示数据。它通过浏览器与服务器之间的交互完成数据请求、处理以及呈现。 ##### 2. 网页的...
web前端HTML社区论坛学习模版
07-12
它可能包含了各种页面结构，如登录/注册界面、讨论板块、个人中心、搜索功能等，设计时考虑到了教育和互动性，便于学习者理解和应用HTML基础知识。 【HTML知识点详解】 HTML（HyperText Markup Language）是网页...
Web前端开发详细教程, Web前端开发代码大全, 包含各种框架详解
07-07
### Web前端开发详细教程 ...通过本教程的学习，你将能够理解Web前端开发的基础知识，并掌握主流前端框架的应用方法。不断实践和学习新技术是成为一名优秀Web前端开发者的关键。希望本文能为你开启Web前端开发的大门！
Web前端开发知识体系大全
03-18
### Web前端开发知识体系详解 #### 一、理论知识 **1.1 数据结构与算法** 数据结构和算法是编程的基础，对于Web前端开发者来说也不例外。掌握常见的数据结构（如数组、链表、栈、队列、哈希表、树等）以及基本的...
Web前端开发系列视频
06-22
希望这些基础知识能为初学者提供一定的帮助和启发，同时也建议大家进一步深入学习，不断提升自己的技能水平。 通过上述分析，可以看出该视频系列应该是针对初学者而设计，旨在教授如何使用HTML和CSS进行基本的Web...
Web前端HTML（基础）
String111111Name的博客
08-01 380
HTML的标签可以分为很多种，head里面的我们称为元信息类标签，诸如title、meta、style、link、base、script这些，他们用来描述文档的一些基本信息。字符编码)，你可以尝试去掉这一行代码，在中输入一段文字看一下运行结果，你就会发现没有代utf-8就会乱码的。学了p标签，在这里我们在学校与p的共性与异性，br标签是小换行提行，p标签是大换行(分段)各行作用。当然，meta标签中，还有很多的属性，我们在接下来的学习中，慢慢去探索。...
Web前端学习：HTML基础【入门宝典】
Oh_Python的博客
03-11 7666
一、HTML简介 什么是HTML？ HTML(HyperText Markup Language) 超文本标记语言，是一种用于创建网页的标准标记语言。 1、HTML的特点 （1）HTML不是编程语言，而是标记语言。 （2）HTML使用标签的形式来标识网页的不同组成部分 （3）HTML文档包含了HTML标签和文本 （4）HTML文档又叫做Web页面 （5）HTML文档的后缀：html 或 htm 2、HTML元素语法 （1）HTML 元素以开始标签起始 （2）HTML 元素以结束标签终止
HTML详解
weixin_40055163的博客
10-08 1万+
HTML 概念：HTML（Hypertext Markup Language ) 超文本标记语言。 HTML 不是一种编程语言，而是一种标记语言。 Html主要用来描述网页中所需要的组件，例如：文本框、表格、图片、视频等等，也对网页进行排版。 HTML的源文件，称为“网页”，通常以.html或者.htm为结尾。 可以使用任意文本编辑器编辑，需要使用浏览器执行。 访问：https://www.w3school.com.cn/ 1 标记（标签）基本语法 1.定义标签 HTML语言以标签形式体现，这些标签通常
HTML基础知识
xuan971130的博客
03-02 2913
一、基础知识： 1.网站：许多网页的集合。 2.HTML：超文本标记语言（Hyper Text Markup Language），用来描述网页的一种语言。不是一种变编程语言，而是一种标记语言。 3.浏览器内核（渲染引擎）：负责读取网页内容，整理讯息、计算网页的显示方式并显示页面。 4.Web标准的组成 ...
HTML超详细教程
weixin_60535956的博客
03-27 9560
详细介绍HTML相关基础知识（含大量实例）
前端学习——HTML
qq_46574748的博客
06-19 1319
C/S架构和B/S架构 1.C/S架构：需要安装，偶尔更新，不跨平台 2.B/S架构：无需安装，无需更新，可跨平台 大型专业应用、安全性要求较高的应用，需要采用C/S架构 前端工程师主要研发B/S架构的应用——写网页，微信小程序，客户端开发，搭建服务器，数据可视化 浏览器内核 内核是浏览器的核心，用于处理浏览器所得到的各种资源 网页构成 结构（html）+表现（css）+行为（javascript） HTML（超文本标记语言） 1.超文本：和普通文本比，内容更丰富 2.标记：文本要变成超文本，就要用
HTML基础入门（详细）
weixin_51143430的博客
08-28 3593
HTMLHTML结构2.HTML常见标签2.1注释标签2.2换行符2.3加粗标签2.4文字格式化2.4.1加粗2.4.2倾斜 2.4.3下划线 HTML结构 2.HTML常见标签 2.1注释标签 <!--注释> ctrl快捷键可快速进行注释或取消注释 2.2换行符 2.3加粗标签 2.4文字格式化 2.4.1加粗 2.4.2倾斜 2.4.3下划线 ......
HTML基础教程（非常详细）从零基础入门到精通，看完这一篇就够了。
wangluoanquan111的博客
09-05 1万+
HTML全称Hyper Text Markup Language, 翻译成中文就是超文本标记语言，是一种最基础的网页开发语言, 需要注意的是HTML并不是编程语言, 而是一种标记语言超文本可以理解为超越了文本的意思, 也就是超级文本, 超文本不只是普通的文本内容, 还可以加入图片,视频,声音等内容, 甚至可以从一个文件跳转到另一个文件(超级链接文本)标记语言可以理解为一套标记标签,也就是由许多标记标签组成的语言。
HTML基础知识详解
"HTML知识点汇总" HTML（HyperText Markup ...这些只是HTML基础知识的一部分，实际开发中还有表格、列表、链接、图像、表单、框架、多媒体等诸多元素和属性。熟练掌握这些基本概念是成为一名合格的前端开发者的基础。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值