HTML超文本标记语言

Eg-

已于 2022-04-25 20:09:18 修改

阅读量350

点赞数

文章标签： html

于 2022-04-23 18:10:32 首次发布

本文链接：https://blog.csdn.net/m0_63711447/article/details/124220347

版权

本文是一篇关于HTML的基础教程笔记，主要介绍了HTML的基本语法、标签结构、常用标签，包括标题、段落、文本样式、列表、表格、图片和超链接的使用。此外，还提及了字符集、语言类型和文档类型声明。内容简洁明了，适合初学者快速了解HTML。

摘要由CSDN通过智能技术生成

（这篇文章是看小破站的HTML课程的一个学习笔记，学习的主要目的只是想了浅浅了解一下这门语言不是想做前端，以方便在学习其他内容的时候便于浏览，所以只记录了一些很基本的语法，很多东西没有记进来，主要是自己留着看）

1、HTML语法规范

1.1基本语法概述

关键词用尖括号包裹

（1）一般标签

有开始符号和结束符号，可以在内部插入其他标签或文字，成对出现，称为起始标签和结束标签，结束标签有正斜杠

eg. <html></html>

（2）自闭合标签

只有开始符号而没有结束符号，不可以在内部插入标签或文字

常用的自闭合标签	说明
<meta />	定义网页的信息
<link />	引入外部CSS文件
<br />	换行
<hr />	水平线
<img />	图片
<input />	表单

1.2标签关系

分为两类：包含关系、并列关系

包含关系

<head>

        <title> </title>

</head>

并列关系

<head> </head>
<body> </body>

2、HTML基本标签结构

第一个HTML网页（文档）

<html>   #根标签
    <head>   #头部标签
         <title>eg的第一个页面</tltle>   #网页标题
     </head>
     <body>   #主体内容
        没有学不会的知识！只有不勤奋的狗勾！
     </body>
</html>

3、VSCode工具生成骨架新增标签

3.1<!DOCTYPE>标签

文档类型声明标签，作用是告诉浏览器使用哪种HTML版本来显示网页，必须写在第一行，处于<html>前面

<!DOCTYPE html>的意思：当前页面采取HTML5版本来显示页面

3.2 lang语言种类：用来定义当前文档显示的语言

en定义语言为英语

zh-CN定义语言为中文

3.3字符集

字符集（character set）是多个字符的集合，以便计算机能够识别和存储文字

在<head>标签内，可以使用<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码

4、HTML常用标签

4.1标题标签

对于文章内容共有6个级别的标题标签<h1> - <h6>，级别重要性从h1到h6依次降低，一个页面只能有一个h1标签，但是h2-h6可以有多个

4.2段落标签

段落标签<p></p>可以自动换行，且两个段落之间有一定距离

另外一种换行方式：<br/>

4.3文本标签

（1）strong、b粗体标签

（2） em (emphasisized)、i、cite斜体标签

（3）sup(superscripted)上标标签

（4）sub(subscripted)下标标签

（5）s中划线标签

（6）u下划线标签

（7）big大字号标签，small小字号标签（字体大小一般使用CSS进行控制而不是HTML）

4.4水平线标签

HTML中，可以使用hr(horzion水平线)标签实现一条水平线

4.5 div标签

HTML中div(division分区)标签内部可以放入其他所有标签，如p,hr等。其最重要的功能是划分区域使代码更具有逻辑性，然后结合CSS对该区域进行样式控制。

4.6块元素和行内元素

（1）块元素

块元素独占一行，排斥其他元素与其位于同一行，块元素内部可以容纳其他的块元素和行内元素

常见块元素	说明
h1~h6	标题元素
p	段落元素
div	div元素
hr	水平线
ol	有序列表
ul	无序列表

（2）行内元素

行内元素可以与其他行内元素位于同一行，行内元素可以容纳行内元素但不容纳块元素

常见行内元素	说明
strong	粗体元素
em	斜体元素
a	超链接
span	span元素

4.7网页特殊符号

（1）网页中的“空格”： 

三个 约有一个字的缩进

在HTML中显示特殊符号也是通过代码形式来实现的，均以&开头以；结尾

5、列表

分为三种：有序列表，无序列表，定义列表

5.1有序列表

HTML中，可以使用ol元素来实现有序列表（ol指order list有序列表，li指list item列表项）

<ol>

</ol>

如果想用其它符号表示顺序，可以用type属性改变列表项前面的符号

</ol>

属性值	说明
1	阿拉伯数字：1、2、3......
a	小写英文字母：a、b、c......
A	大写英文字母：A、B、C......
i	小写罗马数字：i、ii、ii......
l	大写罗马数字：I、II、III......

5.2无序列表

HTML中，可以使用ul（unordered list）元素来实现无序列表（常用）

<ul>

</ul>

仍然可以用type属性改变列表项前面的符号

属性值	说明
disc	实心圆
circle	空心圆
square	正方形

【注】：ul元素的子元素只能是li，不能是其他元素。ul元素内部的文本，只能在li元素内部添加，不能在li元素外部添加

5.3定义列表

HTML中，定义列表的每一个列表项由两部分组成：名词和描述

<dl>

</dl>

dl(definition list) 指定义列表

dt(definition term) 指定义名词

dd(definition description) 指定义描述

5.4语义化

语义化是HTML中最最重要的思想，大部分标签都有自身的语义，而div和span是无语义的标签，我们应先使用其他有语义的标签。

6、表格

6.1基本结构

（1）表格：table标签

（2）行：tr标签

（3）单元格：td标签

（4）表格标题：caption（放在table内部）

（5）表头单元格：th

6.2合并行、合并列（使用不多）

合并行<td rowspan="跨越的行数">

合并列<td colspan="跨越的列数">

7、图片标签

语法：<img src="图片路径"/>

alt属性：用于图片描述，此描述文字是给搜索引擎看的，图片无法显示时，页面会显示alt中的文字

title属性：用于图片描述，给用户看，鼠标移动至图片上时，会显示title中的文字

语法：<img src="图片路径" alt="描述"/>

8、超链接

在HTML中使用a标签(anchor 锚点）来实现超链接

语法：<a href="链接地址">文本或图片</a>

注：此时是在原窗口打开链接

属性值	说明
_self	默认值，在原窗口打开链接
_blank	在新窗口打开链接
_parent	在父窗口打开链接
_top	在顶层窗口打开链接

eg.<a href="https://www.baidu.com/" target="_blank">百度</a>

9、表单

如果一个页面仅仅提供用户浏览，则为静态页面。如果这个页面能实现与服务器进行数据交互（如注册登录，评论交流等），则为动态页面。

表单的作用：在浏览器端收集用户输入的数据，然后将数据提交给服务器进行处理。

表单指文本框，按钮，单选框，复选框，下拉列表等的统称。一般所有的表单标签都要放到form标签内部

9.1 form标签

form标签的属性	说明
name	表单名称
method	提交方式 get/post
action	提交地址
target	打开方式，与a标签的target属性一致
enctype	编码方式

9.2input标签

在HTML中，大多数表单都是使用input标签实现的

语法：<input type="表单类型" />