当前位置：首页 > 前端技术 > HTML >内容正文

HTML

Web前端三剑客之HTML基础

发布时间：2025/3/21 HTML 33 豆豆

生活随笔收集整理的这篇文章主要介绍了 Web前端三剑客之HTML基础小编觉得挺不错的,现在分享给大家,帮大家做个参考.

文章目录

常识简介
- HTML元素
- 语法
- HTML文档规范
- 页面头部元素
- 元信息元素
- - 设定网页关键字：
  - 设定网页描述信息：
  - 设置网页字符集:
  - 设定网页自动刷新：
  - 切记：
页面主体元素
- 设置网页文字和背景颜色
- 添加网页背景图片
文字与段落
- 更改字体
文字与段落元素
- 段落元素
- 预格式化元素
- 列表与表格元素
- 表格
- - 未跨多列的表格：
  - - 划线后：
  - 跨多列的表格：
  - - 字体属性好像对于下列标签没用:
  - 跨多行的表格：
图片与滚动元素
- 图片
- 滚动元素
超链接元素
- 超链接元素
- 锚（书签）链接
表单对象
- 表单标签
- 表单元素
- - 文本框基本语法
  - 密码框基本语法
  - 单选按钮基本语法
  - 复选框基本语法
  - 下拉列表
  - - 下拉列表1
    - 下拉列表2
  - 按钮基本语法
  - 多行文本框基本语法
  - 隐藏域
  - 文件域file
  - 分组

常识简介

HTML是Hypertext Markup Language的缩写，中文编译为超文本标记语言。

超文本是指信息节点（即Web页面）通过超链接构成的具有一定逻辑结构和语义的网络

HTML定义了一套标记标签，并使用标记便签来描述网页，由标签及文本内容组成的文档叫HTML文档，也叫Web页面

HTML元素

HTML标签又称为HTML元素
HTML元素是由尖括号包围的关键词，通常成对出现，例如<body>和</body>

以下顺序是从图左往图右：
蓝颜色的也就是head元素(head title meta base link style noscript script)

黄颜色的也就是行内元素

棕色的也就是Web页面的快捷元素

绿颜色的也就是表单元素

浅蓝颜色也就是主体元素body，标题元素

白颜色的是html5新增加的

最右边的棕色是和表单相关的元素

语法

HTML属性元素可以给元素添加附加信息，属性包括属性名和属性值两部分

属性值可以用双引号，单引号包含起来，也可以不加引号

颜色值由十六进制来表示红( R) 绿(G) 蓝(B)，每个颜色的最低值为0（十六进制为00），最高值为255（十六进制为FF）

HTML文档规范

标签不区分大小写，推荐使用小写

子标签内容使用TAB键进行缩进

避免一行代码太长，影响可读性，尽量一行代码描述一个内容

页面头部元素

页面头部元素由<head></head>所包含的部分，可设置网页的标题，字符集，关键字，描述信息等

常用头部元素：

元素描述

title	设定显示浏览器标题栏中的内容
meta	设定网页的字符集，关键字，描述信息等内容
style	设置CSS层叠样式表的内容
link	设置对外部CSS文件的链接
script	设置页面脚本或链接外部脚本文件

元信息元素

元信息元素<meta>:用于定义网页的字符集，关键字以及网页内容的描述

属性描述

http-equiv	以键/值对的形式设置一个HTTP标题信息
name	以键/值对的形式设置页面描述信息
content	设置http-equiv或name属性所设置项目对应的值

设定网页关键字：

设定网页描述信息：

设置网页字符集:

设定网页自动刷新：

切记：

千万别写成:content="3”;url=“http://www.baidu.com“（这样的话并不会跳转）

<!DOCTYPE html> <html><head><meta http-equiv="refresh" content="3;url=https://www.baidu.com" charset="utf-8"><title></title></head><body><p>该网页三秒后自动跳转到百度</p></body> </html>

页面主体元素

使用body元素，可以设置页面背景，文字颜色等页面属性

设置网页文字和背景颜色

添加网页背景图片

<body background="images/bg.jpg" bgproperties="fixed"><!DOCTYPE html> <html><head><meta http-equiv="refresh" content="3;url=https://www.baidu.com" charset="utf-8"><title></title></head><body background="05.jpg" bgproperties="fixed" ><p>该网页三秒后自动跳转到百度</p></body> </html>

文字与段落

网页中的文字可分为普通文字，空格，特殊文字和注释语句

如何在网页中输入空格，大于，小于等特殊符号
常用特殊符号及其字符实体:

特殊符号字符实体

"	"
&	&
<	<
>	>
.	·
©	©
®	®

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body>普通文字     hello world <p>该网页三秒后自动跳转到百度</p></body> </html>

更改字体

默认情况下，中文网页中的文字是以黑色，宋体，3号字的效果来显示，如果希望改变默认的文字显示效果，可使用<font face="隶书,宋体,黑体" size="4" color="#ffcc00">字体元素</font>

使用文字修饰元素，可以设置字体格式，如粗体，斜体，显示下划线等。

元素描述

<b>……</b>，<strong>……</strong>	设置粗体格式
<i>……</i>，<em>……</em>	设置斜体格式
<sup>……</sup>	设置上标
<sub>……</sub>	设置下标
<big>……</big>	设置大号字体
<small>……</small>	设置小号字体
<u>……</u>	设置下划线
<s>……</s>，<strike>……</strike>	设置删除线

文字与段落元素

标题元素根据字号大小分为6级，分别用<h1>-<h6>标签定义

段落元素

使用<p>标签，换行元素使用<br>标签，水平线元素通过<hr>标签

预格式化元素

<pre>
保留HTML文档中的Enter键和空格键，使浏览器不解析<pre>中定义的文本

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><pre>离离原上草一岁一枯荣野火烧不尽春风吹又生</pre></body> </html>

列表与表格元素

使用列表元素可以使相关的内容以一种整齐的方式排列显示，HTML支持有序列表和无序列表
有序列表用<ol>表示，无序列表用<ul>表示，列表项用<li>表示

<ol><li>coffee</li><li>milk</li></ol>

<body><ul><li>coffee</li><li>milk</li></ul></body>

默认情况下，有序列表是以阿拉伯数字作为列表项的前导符，使用type属性可以改变有序列表的前导符，可分别取1,A,a,I,i.还可以设置start属性，定义有序列表前导符的起始项
ul的type属性值有：disc|square|circle

<ol type="A" start="3"><li>coffee</li><li>milk</li></ol>

<ul type="circle"><li>coffee</li><li>milk</li></ul>

表格

表格由<table>元素定义，每个表格均有若干行（<tr>标签定义），每行被分割成若干单元格(<td>标签定义),表格表头使用<th>定义

未跨多列的表格：

划线后：

<body><table width="70%" border="1" cellpadding="8" cellspacing="0" align="center"> <caption>电脑价格表</caption> <tr><th>电脑型号</th><th>价格</th></tr><tr><th>联想</th><th>5000</th></tr><tr><th>戴尔</th><th>5100</th></tr><tr><th>华硕</th><th>5200</th></tr></table></body>

划线代码是这个属性border=“1”
width="70%"大小占当前浏览器窗口70%
border="1"有边框，边框宽度为1
align="center"居中对齐
<caption>表格标题

跨多列的表格：

<body><table width="70%" border="1" cellpadding="8" cellspacing="0" align="center"><tr><th colspan="2">电脑价格表哦</th></tr><tr><th>联想</th><th>5000</th></tr><tr><th>戴尔</th><th>5100</th></tr><tr><th>华硕</th><th>5200</th></tr></table></body>

字体属性好像对于下列标签没用:

<body><table width="70%" border="1" cellpadding="8" cellspacing="0" align="center"><tr><td colspan="2">电脑价格表哦</td></tr><tr><td>联想</td><td>5000</td></tr><tr><td>戴尔</td><td>5100</td></tr><tr><td>华硕</td><td>5200</td></tr></table></body>

跨多行的表格：

<body><table width="70%" border="1" cellpadding="8" cellspacing="0" align="center"><tr><td rowspan="2">电脑价格表哦</td><td>联想</td><td>戴尔</td></tr><tr><td>5200</td><td>5100</td></tr></table></body>

图片与滚动元素

图片

图片元素通过<img>标签定义

src图片相应的文件以及相应的路径
width和height是图片属性，默认是像素，不需要加px
border用来指定图片边框的粗细
vcpace表示图片相对于上面和下面垂直间距，默认是像素
hspace表示图片相对于左面和右面的水平间距，默认是像素
align 表示位置

滚动元素

说明：
scrolldelay：表示滚动的延迟时间，默认值为90
direction：表示滚动的方向，默认为从右往左
behavior：设定滚动的方式，alternate：表示在两端之间来回滚动。scroll：表示由一端滚动到另一端，会重复。slide：表示由一端滚动到另一端，不会重复

默认就是从右往左

<marquee ><p>我是水平滚动条</p></marquee>

<body><marquee ><p>我是水平滚动条</p></marquee><marquee direction="up" scrolldelay="100">垂直滚动</marquee></body>

<body><marquee ><p>我是水平滚动条</p></marquee><marquee direction="up" scrolldelay="100">垂直滚动</marquee><marquee height="500" width="600" scrolldelay="300" onmouseover="this.stop()" onmouseout="this.start()"><img src="05.jpg" width="50" height="50" border="0">二次元</marquee></body>

超链接元素

<a>

属性href用来设置需要连接到的目标文件；属性target用来链接目标窗口

<a href="welcome.html" target="_blank">这是一个链接</a> <body> <a href="http://www.baidu.com" target="_blank">欢迎访问百度哦</a></body>

target="_blank"表示我们点击超链接后，会新开一个窗口，用于跳转目标文件
还可以取值_self（也就是直接当前窗口跳转，不新开）

<body> <a href="http://www.baidu.com" target="_self">欢迎访问百度哦</a></body>

如何从一个文件超链接到另一个文件呢？
两种方式：相对路径和绝对路径
绝对路径：文件的完整路径，如http://www.baidu.com/index.html
相对路径：相对于当前文件的路径

<body> <a href="firstTest.html" target="_self">欢迎访问firstTest.html哦</a></body>

仔细看，文件名是不是变了

锚（书签）链接

锚（书签）链接：指的是连接目标位置是网页中的指定锚点位置（书签）的链接。

在待链接的目标网页中定义锚点（书签）

创建指向锚点（书签）的链接

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><ol><li><a href="#01">跳转1</a></li><li><a href="#02">跳转2</a></li><li><a href="#03">跳转3</a></li><li><a href="#04">跳转4</a></li></ol><pre>在VC++6.0中，类和结构体中的数据成员是根据它们在类或结构体中出现的顺序来依次申请申请内存空间的，由于内存对齐的原因，它们并不一定会像数组那样连续地排列。由于数据类型的不同，因此占用的内存空间大小也会不同，因此占用的内存空间大小也会不同，在申请内存时，会遵守一定的规则。要找对齐的话，我个人感觉应该先找到编译器的指定对齐值，因为结构体中的当前数据成员类型长度为M，指定的对齐值是N，那么实际的对齐值为q=min（M，N），其成员的地址安排在q的倍数上。但是，并非设定了默认对齐值就将结构体的对齐值锁定。如果结构体中的数据成员类型最大值为M，指定的对齐值是N，那么实际对齐值为q=min（M，N）三准则如下： a.数据成员对其规则：结构（或联合）的数据成员，第一个数据成员放在offset为0的地方，以后每个数据成员存储的子成员大小（只要该成员有子成员，比如说是数组，结构体等）的整数倍开始（比如int 在32位机为4字节则要从4的整数倍地址开始存储）b.结构体作为成员：如果一个结构里有某些结构体成员，则结构体成员要从其内部最大元素的整数倍地址开始存储.（struct a里存有 struct b，b里有 char ，int ，double 等元素，那b应该从8的整数倍开始存储.）c.收尾工作：结构体的总大小，也就是sizeof的结果，必须是其内部最大成员的整数倍，不足的要补齐</pre><pre>在VC++6.0中，类和结构体中的数据成员是根据它们在类或结构体中出现的顺序来依次申请申请内存空间的，由于内存对齐的原因，它们并不一定会像数组那样连续地排列。由于数据类型的不同，因此占用的内存空间大小也会不同，因此占用的内存空间大小也会不同，在申请内存时，会遵守一定的规则。要找对齐的话，我个人感觉应该先找到编译器的指定对齐值，因为结构体中的当前数据成员类型长度为M，指定的对齐值是N，那么实际的对齐值为q=min（M，N），其成员的地址安排在q的倍数上。但是，并非设定了默认对齐值就将结构体的对齐值锁定。如果结构体中的数据成员类型最大值为M，指定的对齐值是N，那么实际对齐值为q=min（M，N）三准则如下：a.数据成员对其规则：结构（或联合）的数据成员，第一个数据成员放在offset为0的地方，以后每个数据成员存储的子成员大小（只要该成员有子成员，比如说是数组，结构体等）的整数倍开始（比如int 在32位机为4字节则要从4的整数倍地址开始存储）b.结构体作为成员：如果一个结构里有某些结构体成员，则结构体成员要从其内部最大元素的整数倍地址开始存储.（struct a里存有 struct b，b里有 char ，int ，double 等元素，那b应该从8的整数倍开始存储.）c.收尾工作：结构体的总大小，也就是sizeof的结果，必须是其内部最大成员的整数倍，不足的要补齐</pre><h1><a name="01">1目的地</a></h1><pre>在VC++6.0中，类和结构体中的数据成员是根据它们在类或结构体中出现的顺序来依次申请申请内存空间的，由于内存对齐的原因，它们并不一定会像数组那样连续地排列。由于数据类型的不同，因此占用的内存空间大小也会不同，因此占用的内存空间大小也会不同，在申请内存时，会遵守一定的规则。要找对齐的话，我个人感觉应该先找到编译器的指定对齐值，因为结构体中的当前数据成员类型长度为M，指定的对齐值是N，那么实际的对齐值为q=min（M，N），其成员的地址安排在q的倍数上。但是，并非设定了默认对齐值就将结构体的对齐值锁定。如果结构体中的数据成员类型最大值为M，指定的对齐值是N，那么实际对齐值为q=min（M，N）三准则如下：a.数据成员对其规则：结构（或联合）的数据成员，第一个数据成员放在offset为0的地方，以后每个数据成员存储的子成员大小（只要该成员有子成员，比如说是数组，结构体等）的整数倍开始（比如int 在32位机为4字节则要从4的整数倍地址开始存储）b.结构体作为成员：如果一个结构里有某些结构体成员，则结构体成员要从其内部最大元素的整数倍地址开始存储.（struct a里存有 struct b，b里有 char ，int ，double 等元素，那b应该从8的整数倍开始存储.）c.收尾工作：结构体的总大小，也就是sizeof的结果，必须是其内部最大成员的整数倍，不足的要补齐</pre><h2><a name="02">2目的地</a></h2><pre>在VC++6.0中，类和结构体中的数据成员是根据它们在类或结构体中出现的顺序来依次申请申请内存空间的，由于内存对齐的原因，它们并不一定会像数组那样连续地排列。由于数据类型的不同，因此占用的内存空间大小也会不同，因此占用的内存空间大小也会不同，在申请内存时，会遵守一定的规则。要找对齐的话，我个人感觉应该先找到编译器的指定对齐值，因为结构体中的当前数据成员类型长度为M，指定的对齐值是N，那么实际的对齐值为q=min（M，N），其成员的地址安排在q的倍数上。但是，并非设定了默认对齐值就将结构体的对齐值锁定。如果结构体中的数据成员类型最大值为M，指定的对齐值是N，那么实际对齐值为q=min（M，N）三准则如下：a.数据成员对其规则：结构（或联合）的数据成员，第一个数据成员放在offset为0的地方，以后每个数据成员存储的子成员大小（只要该成员有子成员，比如说是数组，结构体等）的整数倍开始（比如int 在32位机为4字节则要从4的整数倍地址开始存储）b.结构体作为成员：如果一个结构里有某些结构体成员，则结构体成员要从其内部最大元素的整数倍地址开始存储.（struct a里存有 struct b，b里有 char ，int ，double 等元素，那b应该从8的整数倍开始存储.）c.收尾工作：结构体的总大小，也就是sizeof的结果，必须是其内部最大成员的整数倍，不足的要补齐</pre><h3><a name="03">3目的地</a></h3><pre>在VC++6.0中，类和结构体中的数据成员是根据它们在类或结构体中出现的顺序来依次申请申请内存空间的，由于内存对齐的原因，它们并不一定会像数组那样连续地排列。由于数据类型的不同，因此占用的内存空间大小也会不同，因此占用的内存空间大小也会不同，在申请内存时，会遵守一定的规则。要找对齐的话，我个人感觉应该先找到编译器的指定对齐值，因为结构体中的当前数据成员类型长度为M，指定的对齐值是N，那么实际的对齐值为q=min（M，N），其成员的地址安排在q的倍数上。但是，并非设定了默认对齐值就将结构体的对齐值锁定。如果结构体中的数据成员类型最大值为M，指定的对齐值是N，那么实际对齐值为q=min（M，N）三准则如下：a.数据成员对其规则：结构（或联合）的数据成员，第一个数据成员放在offset为0的地方，以后每个数据成员存储的子成员大小（只要该成员有子成员，比如说是数组，结构体等）的整数倍开始（比如int 在32位机为4字节则要从4的整数倍地址开始存储）b.结构体作为成员：如果一个结构里有某些结构体成员，则结构体成员要从其内部最大元素的整数倍地址开始存储.（struct a里存有 struct b，b里有 char ，int ，double 等元素，那b应该从8的整数倍开始存储.）c.收尾工作：结构体的总大小，也就是sizeof的结果，必须是其内部最大成员的整数倍，不足的要补齐</pre><h4><a name="04">4目的地</a></h4></body> </html>

即可在文中点击链接进行相应位置的跳转

表单对象

表单标签

表单对象元素由表单标签<form>和表单元素两部分组成

action 指定提交后，由服务器上那个处理程序处理(所以一般来说是个URL)
method 指定向服务器提交的方法：一般为post或get方法，post方法比较安全（GET上传数据长度也有一定的限制）

表单元素

文本框基本语法

type表示是什么输出框（例如text就是文本输入框）
value表示输入元素的默认值
size输出框的文本区的宽度

密码框基本语法

type表示是什么输出框（例如password就是密码框）
value表示初始密码
size输出框的密码区的宽度

单选按钮基本语法

type表示按钮属性（radio表示单选按钮）
value表示初始值
checked 表示默认选中，后面checked可以省略，即缩写

记住，单选框同一个组里面的name必须相同（名称相同，单选按钮也就会在同一个组中）

复选框基本语法

下拉列表

<select > <option>标签定义下拉列表

下拉列表1

multiple=“multiple”
表示我们这个下拉列表可以进行多选
selected="selected"默认选中

下拉列表2

<select><option>标签定义下拉列表 <select name="degree" > <option vaule="1" >幼儿园</option> <option vaule="2">小学生</option> <option vaule="3">初中生</option> <option vaule="4">高中生</option> </select>

按钮基本语法

type按钮类型（reset表示重置按钮，submit表示提交按钮，button普通按钮）
name 按钮名称
value 按钮上的标签

多行文本框基本语法

name文本框的名字
cols文本框的列数
rows文本框的行数

<body><textarea name="textarea" cols="40" rows="6">我是小彪彪，哈哈哈今晚熬夜做笔记，噢噢噢</textarea></body>

隐藏域

隐藏域hidden,主要用于在不同页面中传递隐藏域中设定的值

文件域file

文件域file,用于将本地文件上传到服务器端

使用文件域上传文件到服务器，需要在中修改表单的编码，即设置

分组

<fieldset>元素用于分组，<legend>元素为每个分组定义标题

总结

以上是生活随笔为你收集整理的Web前端三剑客之HTML基础的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。

上一篇： Python正则表达式之零宽断言（4）
下一篇： Web前端三剑客之CSS基础