HTML

文章列表

HTML

这里写目录标题

- - HTML
  - - 一、简介
    - 二、网页三要素
    - 三、书写规范
    - 四、结构标签
    - 五、排版标签
    - 六、标题标签
    - 七、块标签
    - 八、文字标签
    - 九、文本格式化标签
    - 十、列表
    - - 10.1 无序列表
      - 10.2 有序列表
      - 10.3 列表嵌套
    - 十一、图片标签
    - 十二、链接标签
    - - 12.1 基本用法
      - 12.2 锚点
    - 十三、表格标签
    - - 13.1 基本用法
      - 13.2 行和列的合并
      - 13.3 使用表格布局【不推荐】
    - 十四、表单标签【重点】
    - - 14.1 表单标签
      - 14.2 表单元素
    - 十五、其他标签和特殊字符
    - - 15.1 其他标签
      - 15.2特殊字符
    - 十六、框架标签
    - - 16.1 框架集【不推荐使用】
      - 16.2 iframe

HTML

一、简介

使用标签或者标记将效果展示给用户的语言。

HTML（Hyper Text Mark Language）超文本标记语言。

超文本：页面可以包含图片、音乐、视频、链接等

标记：使用标签来描述，不同的标签显示不同的功能

版本变化：

1993年HTML1.0->1999年HTML4.01->2014年HTML5

二、网页三要素

网页的三个组成部分：

HTML：页面上的内容

CSS：对页面上内容的进行装饰

Javascript：页面的动态效果

三、书写规范

HTML的标签是使用<>包围的关键字，例如：<img>

HTML标签通常是成对出现的，有开始就有结束。例如：<a></a>

HTML标签通常都有属性，多个属性使用空格隔开。例如：<a href="" target=""></a>

HTML标签不区分大小写，推荐小写。

四、结构标签

结构标签是网页结构组成。

<html>：表示页面的开始和结束

<head>：表示页面的头部，头部中的内容一般不会显示在页面，主要用来设置当前页面的属性。

<body>：表示页面的主体，页面上显示的内容。

注意：head标签和body标签是同级的。

<!--表示当前网页的版本，HTML5-->
<!DOCTYPE html><!--表示页面的开始和结束-->
<html><!--表示页面的头部，通常用来设置页面信息--><head><!--设置页面字符集--><meta charset="utf-8" /><!--设置网页标题--><title>千锋Java2110</title></head><body><!--页面主体部分，写的内容会显示在页面上-->Hello, world千锋武汉Java2110，yyds</body>
</html>

下面的网页是老版本的HTML4.01的结构：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title></title></head><body></body>
</html>

五、排版标签

注释标签：

换行标签： ，自结束标签。

段落标签：，上下会空一行。

水平线标签：<hr/>

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body>静夜思<br/><!--默认黑色，全屏长度--><!--color是颜色，	size是高度，单位为像素width：宽度align表示对齐方式，默认居中，center居中，left居左，right居右--><hr color="blue" size="50px" width="300px" align="left"/>床前看月光，<br/>疑似地上霜。<br/><!--align表示对齐方式，center居中，left居左，right居右--><p align="right">举头望山月，</p>低头思故乡。<br/></body>
</html>

HTML页面的颜色表示：

可以使用英文

可以使用三原色（红绿蓝）来混合。例如：#000000表示黑色，#ffffff表示白色，#ff0000表示红色。

在样式中，还可以使用rgb来表示颜色。例如：rgb(255, 0, 0)

六、标题标签

使用h1~h6，h1字体最大，h6字体最小。默认黑体，独占一行。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><h1 align="center">千锋武汉Java2110,yyds</h1><h2>千锋武汉Java2110,yyds</h2><h3>千锋武汉Java2110,yyds</h3><h4>千锋武汉Java2110,yyds</h4><h5>千锋武汉Java2110,yyds</h5><h6>千锋武汉Java2110,yyds</h6></body>
</html>

七、块标签

div：行级块标签，独占一行。

span：行内块标签，所有内容共同一行。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><div align="center">我是谁</div><span>穷哈</span><span style="color: red;">穷哈</span>哈利波特                                                    骑着扫帚飞</body>
</html>

注意：页面上的换行，空格等没有实际效果，只会显示一个空格。

八、文字标签

font标签，设置文字的颜色、字体、大小等。现在不推荐使用。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body>静夜思<br/>床前看<font face="宋体" color="orange" size="7">月光</font>，<br/>疑似地上霜。<br/>举头望<span style="font-size: 200px;">山月</span>，<br/>低头思故乡。<br/></body>
</html>

九、文本格式化标签

粗体：和

强调字体：（斜体），和

上标：

下标：

删除线：<del>

注意：上面的操作皆为修饰文字，所以现在不推荐使用，应该使用样式。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body>静夜思<br/>床前看<b>月光</b>，<br/>疑似地上霜。<br/><i>举头</i>望<strong>山月</strong>，<br/><em>低头</em>思故乡。<br/>(a-b)<sup>2</sup> = a<sup>2</sup> + b<sup>2</sup> - 2ab<br/>(x<sub>1</sub> - x<sub>2</sub>)<sup>2</sup><br/>古来<del>圣贤</del>贤圣皆<del>寂寞</del>死尽，唯有饮者留其名。</body>
</html>

十、列表

10.1 无序列表

使用一组无序的符号定义。标签为<ul>

类型：

默认为实心圆disc

circle：空心圆

square：实心正方形

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--ul无序列表--><!--默认为实心圆disccircle：空心圆square：实心正方形--><ul type="square"><li>华为</li><li>苹果</li><li>小米</li><li>vivo</li></ul></body>
</html>

10.2 有序列表

标签为<ol>

类型：

默认为数字,1

a：小写字母

A：大写字母

i：罗马数字

I：大写罗马数字

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--ol有序列表默认为数字,1a：小写字母A：大写字母i：罗马数字I：大写罗马数字--><ol type="I"><li>华为</li><li>苹果</li><li>小米</li><li>vivo</li></ol></body>
</html>

10.3 列表嵌套

有序列表和无序列表可以相互嵌套。

无序列表类型会自动选择。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><ol type="I"><li>华为</li><ul><li>手机</li><ul><li>P30</li><li>P40</li></ul><li>平板</li><li>电脑</li></ul><li>苹果</li><li>小米</li><li>vivo</li></ol></body>
</html>

十一、图片标签

在页面显示图片。<img>

可以显示网络图片，也可以显示本地图片。

属性：

width：宽度，单位px，也可以设置百分比，但是该百分比是占据外部容器的百分比。

height：高度，宽高一般只需要设置其中一个，会自适应宽高，如果两个都设置，可能会变形。

注意：如果没有外部容器的情况下，直接把body当作外部容器，此时width设置百分比有效，高度设置百分比无效。

align：图文混排时对齐方式。默认文字在图片的下方bottom，可以设置为top或center(middle)

alt：当图片无法显示时，会显示的描述文字。

title：当图片无法显示时，会显示的描述文字；当图片显示时，鼠标移动到图片上，会显示的描述文字。

hspace：图片左右留白。

vspace：图片上下留白。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--网络地址-->汽车图片：<img alt="汽车" hspace="100px" align="top" hspace="100px" width="50%" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fx0.ifengimg.com%2Fres%2F2021%2FC599FFA252BD3E29021BFFF90B04D5F1EEF86F52_size50_w744_h510.jpeg&refer=http%3A%2F%2Fx0.ifengimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640845433&t=652e1d9c0134b34198ae0ae5ceb30b17"/><!--本地图片-->奥特曼：<img title="迪迦" align="top"  src="img/14.png" /></body>
</html>

十二、链接标签

12.1 基本用法

使用<a>来实现一个链接。通过该链接跳转到另一个页面。

属性：

href：链接的地址，可以链接到外网，也可以链接到本地的一个地址。

target：跳转时打开的方式。

_self：默认值，在当前窗口打开

_blank：在新窗口打开

_parent：在父级窗口打开

_top：在顶层窗口打开

自定义：在自定义的窗口打开

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><a href="https://www.baidu.com" target="_blank">百度</a><a href="文字标签.html"><img src="img/12.png" width="200px"/></a></body>
</html>

12.2 锚点

打开某个页面的某个位置。

步骤：

1、通过name属性来定义一个位置。

2、使用href="#name"来跳转到对应的位置。

如果要跳转到某个页面的某个位置，可以使用href=“页面#name”。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><a href="链接标签.html#mybottom">链接标签</a><a href="#mybottom">跳转到底部</a><a name="mytop"></a><a href="https://www.baidu.com" target="_blank">百度</a><a href="文字标签.html"><img src="img/12.png" width="200px"/></a><ol><li>11111111</li><li>11111111</li><li>11111111</li><li>11111111</li><li>11111111</li><li>11111111</li><li>11111111</li><li>11111111</li><li>11111111</li><li>11111111</li><li>11111111</li><li>11111111</li><a href="#mytop">回到顶部</a><a name="mybottom"></a></ol></body>
</html>

十三、表格标签

13.1 基本用法

用来在页面绘制表格。

table：用来定义表格的开始和结束

border：边框宽度

width：表格宽度

height：表格高度

align：整个表格在页面上对齐方式

bgcolor：设置整个表格的背景颜色

tr：用来定义行

align：设置整行的水平对齐方式（left，center，right）

valign：设置整行的垂直对齐方式（top，middle，bottom）

bgcolor：设置整行的背景颜色

td：用来定义列

align：设置单元格的水平对齐方式（left，center，right）

valign：设置单元格的垂直对齐方式（top，middle，bottom）

bgcolor：设置单元格的背景颜色

th：用来定义表头（第一行）居中、黑体
注意：当表格、行、列都设置了某一个样式时，优先级：单元格 > 行 > 表格

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><table border="1px" bgcolor="bisque" width="500px" align="center" height="400px"><tr><th>姓名</th><th>年龄</th><th>性别</th></tr><tr bgcolor="blue" align="right" valign="bottom"><td align="center" bgcolor="aqua" valign="top">曹操</td><td>25</td><td>男</td></tr><tr><td>吕布</td><td>22</td><td>男</td></tr><tr><td>刘备</td><td>28</td><td>男</td></tr></table></body>
</html>

13.2 行和列的合并

在单元格中使用rowspan来跨多行，使用colspan来跨多列。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><table align="center" border="1px" bgcolor="bisque" width="500px" height="400px"><tr><th colspan="3">课程表</th></tr><tr align="center"><th rowspan="3">周一</th><td>上午</td><td>语文</td></tr><tr align="center"><td>下午</td><td>数学</td></tr><tr align="center"><td>晚上</td><td>英语</td></tr><tr align="center"><th rowspan="3">周二</th><td>上午</td><td>语文</td></tr><tr align="center"><td>下午</td><td>数学</td></tr><tr align="center"><td>晚上</td><td>英语</td></tr></table></body>
</html>

13.3 使用表格布局【不推荐】

将整个页面（或者局部）以的表格的方式，划分成多行多列，设置行和列的宽高，然后再在相应单元格中放入内容，实现页面布局。

十四、表单标签【重点】

用来收集用户的输入数据。

14.1 表单标签

用来定义表单。即表示表单的开始和结束。

form：表示表单标签，开始和结束

action：表示表单的提交路径（一般写服务器的地址）

method：提交方式，通常有get和post两种。默认为get，而post相对安全

enctype：提交类型，主要是文件上传时需要设置。

14.2 表单元素

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><form action="列表.html" method="get"><!--单行文本框name表示该表单元素的名称，一般用来在服务器上接收数据id是在页面上唯一的名称，一般用来样式处理或者js处理value表示默认值placeholder提示信息--><input type="text" name="username" id="" value="aaa" placeholder="请输入用户名"/><br /><!--密码框--><input type="password" name="password" id="" value="" placeholder="请输入密码"/><br /><!--数字框--><input type="number" name="age" id="" value="" placeholder="请输入年龄"/><br /><!--邮箱框--><input type="email" name="email" id="" value="" placeholder="请输入邮箱"/><br /><!--拉动条-->百分比：<input type="range" min="1000" max="10000" name="range" id="" value=""/><br /><!--取色按钮-->颜色：<input type="color" name="color"/><br /><!--date只有日期，time只有时间，datetime日期和时间-->生日：<input type="datetime-local" pattern="yyyy-MM-dd HH:mm:ss" name="birth"/><br />生日：<input type="date" name="birth1"/><br /><!--单选按钮，当name一样时，默认为一组，实现单选效果, checked表示默认选中-->性别：<input type="radio" checked="checked" name="sex" value="男"/>男<input type="radio" name="sex" value="女"/>女<br /><!--复选框-->爱好：<input type="checkbox" name="hobby" value="睡觉"/>睡觉<input type="checkbox" name="hobby" value="打游戏"/>打游戏<input type="checkbox" name="hobby" value="看小说"/>看小说<br /><!--文件域，用来上传文件--><input type="file" name="photo"/><br /><!--隐藏域，不会显示在页面上，但是会随着表单一起提交到服务器--><input type="hidden" name="id" value="121"/><!--下拉框，默认为单选，可以通过设置multiple="multiple"来实现多选-->职业：<select name="position"><option value="1">法师</option><option value="2">射手</option><option value="3">肉</option></select><br /><!--文本域，rows表示行，cols表示列-->自我介绍：<textarea name="introduce" cols="100" rows="10"></textarea><br /><!--提交按钮，点击后会提交表单到action对应的地址--><input type="submit" value="提交"/><!--普通按钮，只能配合js起作用--><input type="button" value="普通按钮" /><!--重置按钮，会将表单内容还原到初始状态，相当于页面刷新后的表单状态--><input type="reset" value="重置按钮" /><!--图片提交按钮，作用相当于提交按钮--><input type="image" src="img/14.png" height="50px" /></form></body>
</html>

十五、其他标签和特殊字符

15.1 其他标签

meta：在head标签中的设置信息。

link：链接样式表

script：定义js

15.2特殊字符

 ：空格

<：小于

>：大于

"：双引号

®：注册符号

©：版权符号

¥：人民币符号

十六、框架标签

16.1 框架集【不推荐使用】

因为有些浏览器不支持。

<!--整个页面分为上下两部分-->
<frameset rows="15%, *"><!--上面--><frame src="top.html" /><!--下面又分为两部分--><frameset cols="15%, *"><!--左边--><frame src="left.html" /><!--右边--><frame name="mainFrame" src="" /></frameset>
</frameset>

left.html

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><ul><li>小区管理</li><ul><li><a href="fc.html" target="mainFrame">房产管理</a></li><li><a href="ds.html" target="mainFrame">栋数管理</a></li></ul><li>车位管理</li></ul></body>
</html>

16.2 iframe

在页面上嵌入另一个页面。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><table width="100%" border="1px"><tr><td colspan="2"><h1>欢迎使用物业管理系统</h1></td></tr><tr><td valign="top" ><ul><li>小区管理</li><ul><li><a href="fc.html" target="mainFrame1">房产管理</a></li><li><a href="ds.html" target="mainFrame1">栋数管理</a></li></ul><li>车位管理</li></ul></td><td width="85%" height="630px"><iframe src="" frameborder="0" height="100%" width="100%" name="mainFrame1"></iframe></td></tr></table></body>
</html>

HTML

这里写目录标题

HTML

一、简介

二、网页三要素

三、书写规范

四、结构标签

五、排版标签

六、标题标签

七、块标签

八、文字标签

九、文本格式化标签

十、列表

10.1 无序列表

10.2 有序列表

10.3 列表嵌套

十一、图片标签

十二、链接标签

12.1 基本用法

12.2 锚点

十三、表格标签

13.1 基本用法

13.2 行和列的合并

13.3 使用表格布局【不推荐】

十四、表单标签【重点】

14.1 表单标签

14.2 表单元素

十五、其他标签和特殊字符

15.1 其他标签

15.2特殊字符

十六、框架标签

16.1 框架集【不推荐使用】

16.2 iframe

公告

DeepSeek全套部署资料免费下载

免费可商用字体批量下载

标签

HTML

这里写目录标题

HTML

一、简介

二、网页三要素

三、书写规范

四、结构标签

五、排版标签

六、标题标签

七、块标签

八、文字标签

九、文本格式化标签

十、列表

10.1 无序列表

10.2 有序列表

10.3 列表嵌套

十一、图片标签

十二、链接标签

12.1 基本用法

12.2 锚点

十三、表格标签

13.1 基本用法

13.2 行和列的合并

13.3 使用表格布局【不推荐】

十四、表单标签【重点】

14.1 表单标签

14.2 表单元素

十五、其他标签和特殊字符

15.1 其他标签

15.2特殊字符

十六、框架标签

16.1 框架集【不推荐使用】

16.2 iframe

相关问题

公告

DeepSeek全套部署资料免费下载

免费可商用字体批量下载

标签