本文详细介绍了HTML的基本概念，包括其特点、模板示例，以及常用的标签如标题、段落、文本格式、链接、表单元素、多媒体标签、表格和列表的使用。此外，还涉及了多窗口框架的基本概念和结构。
1. 关于HTML
1.1 何为HTML
HTML是超文本标记语言（HyperText Markup Language）的缩写。我们用HTML来构建web即所谓的网页。
1.2 HTML特点
简单灵活；可扩展；平台无关性。
1.3 HTML模板
在visual studio Code软件上你只需要在英文状态下打一个感叹号回车即可出现模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>2. 常用标签
（1）https://www.runoob.com/tags/html-reference.html
（2）标题标签：<h1><h2><h3><h4><h5><h6>且标题标签为单标签
（3）段落标签：<p></p>
（4）文本加粗标签：<strong></strong> 下划线标签： <ins></ins> 删除线标签：<del></del>
（5）文本斜体标签：<em></em>
（6）图片标签：<img src=“路径” alt=“无法正常加载图片时显示的文字”/>
（7）音频标签：<audio src=“路径” controls：作用是显示播放的按钮 loop：作用是循环播放 autoplay：作用是自动播放/></audio >
（8）视频标签：<video src=“路径” muted:作用是规定音频的输出应该被静音/></video >
（9）路径：绝对路径：网络路径或者是从盘符开始找
相对路径：相对于当前的一个位置
./ 当前文件夹
…/ 上一级文件夹
…/…/ 上上一级文件夹
2.1 strong、b标签
这些都是用来加粗字体的
<body>
<!-- hello word ！！！！！ -->
这是注释的部分
<strong>这是粗体</strong>
<b>也是粗体</b>
<em>这是斜体</em>
<i>也是斜体</i>
<u>下划线</u>
<del>删除线</del>
</body>2.2 br和hr标签
br
标签是用来换行
-------
单标签
hr -------
水平分割线 ，单标签，可以设置
width
属性表示的水平分割线的长度，
size
属性设置的粗细
<body>
吴韬这个小孩，全世界第一可爱，大家都喜欢这个小孩。<br>
吴韬这个小孩，全世界第一可爱，大家都喜欢这个小孩。
吴韬这个小孩，
全世界第一可爱，大家都喜欢这个小孩。
<hr width="800px" size="10">
</body>2.3 p标签
段落标签
两个相邻的
p
标签中间会空一行
align
属性
------
位置
left center right,
默认值是
left
font
标签
------
这是字体
color
属性：颜色
颜色的表示法：英文单词
red black pink
#rrggbb
三原色
red green blue
<p align = "center">
吴韬你是最棒的
</p>
<p align = "right">
吴韬你是最棒的
</p>
<p >
吴韬你是最棒的
</p>
<p>
<font color ="#006600">这是字体标签</font>
</p>2.4 sub、sup、pre、span标签
sub -----
下标标签
sup ----
上标标签
pre ------
用来原样输出内容
span ----
修饰文本的标签
-----
标准的行内标签
<body>
二的三次方:2<sup>3</sup><br>
数组a下标是2:a<sub>1</sub>+a<sub>2</sub>+.......+a<sub>n</sub><br>
<p>
鹅鹅鹅
[骆冰王]
鹅鹅鹅，
曲项向天歌。
白毛浮绿水，
红掌拨清波。
</p>
<pre>
鹅鹅鹅
[骆冰王]
鹅鹅鹅，
曲项向天歌。
白毛浮绿水，
红掌拨清波。
</pre>
<span style="color: blueviolet; font-size: 32px;">
这是一个标准的行内标签！！！！！
</span>
</body>2.5 hn和div标签
hn
指的是
h1,h2,h3,h4,h5,h6 -----
标题标签
n
取值只能是
1-6
字体越来越小 有加粗的效果
div
标签
----
标准的块级标签
------
盒子布局
块级标签：独占一行，自动换行
div hn p hr
行内标签：不能自动换行，除非这一行的文本内容铺满了整个页面才会换行
span
<body>
<h1>这是标题</h1>
<h2>这是标题</h2>
<h3>这是标题</h3>
<h4>这是标题</h4>
<h5>这是标题</h5>
<h6>这是标题</h6>
<div>这是一个div</div>
<div>这是一个div</div>
<div>这是一个div</div>
<div>这是一个div</div>
<span>这是一个span标签</span>
<span>这是一个span标签</span>
<span>这是一个span标签</span>
<span>这是一个span标签</span>
<span>这是一个span标签</span>
<span>这是一个span标签</span>
</body>2.6 特殊字符
3. 表单标签
form
标签
一般会和
input 标签连用
<form action="">
用户名: <input type="text"><br>
密码: <input type="password" >
</form>
action:
跳转的路径
绝对路径：从盘符开始到文件名称的全部路径，
D:\
重大城科
\23
级前端
1202\
代码
\
第二天
\demo01.html
相对路径：当前源文件和目标文件的相对路径，
..\
第一天
\demo01.html
method:
表单提交的方式
get post
默认是
get
name :
表单的名称
get:
会把用户请求的内容暴露在地址栏上
post:
相较于
get
会安全一点
<body>
<form action="..\第一天\demo01.html" method="get" name="register">
用户名: <input type="text" name="username"><br>
密码: <input type="password" name="password"><br>
<input type="submit" >
</form>
</body>3.1 表单元素
表单元素（文本框、密码框、下拉列表、单选、多选）
一般由
input
、
textarea
、
select
标签构成，需要放到
form
里面
语法格式
<input type="元素的类型" name="元素的名称" value="元素的值">
type
的取值：
text ------
文本框
password ----
密码框
radio ----
单选按钮
checkbox -----
多选按钮
submit ----
提交按钮
reset -----
重置按钮
button -----
普通的按钮
image ----
图像按钮
file ----
文件域
hidden -----
隐藏域
email ------
邮箱
color -----
颜色域
date -----
日期
time ------
时间
datetime-local ------
日期
+
时间
range ----
进度条
input
标签常用的属性：
checked ----
默认选择
readonly ------
只读 字段只可以读不能修改
disabled -----
禁用 不可以点击
autofocus ------
默认光标的位置
required----
不能为空白提交
3.2 select标签
下拉列表框
------
一般和
option
标签进行连用
selected
属性
----
默认被选中的选项
multiple
属性
-------
以列表的形式显示
3.3 textarea标签
用来实现文本域
cols -------
多少列，用于显示文本的宽度
rows -------
多少行，用来显示文本的高度
4. 常见的属性
a
标签
-----
超链接
vlink -----
访问过超链接文本的颜色
Alink ------
激活超链接文本的颜色
link ------
超链接文本的颜色
text ----
文本的颜色
bgcolor -----
背景颜色
background ------
背景图片
颜色表示法：
1
、英文单词
2
、
#rrggbb
3
、
rgba() a
表示透明度
5. a标签
a
标签
-----
超文本链接标签
-----
用来进行页面跳转
herf = "url"
跳转页面的路径
target
属性
锚点：使用锚点，点击锚点跳转到指定的位置
#+id
的名字进行链接跳转
6. img标签
目前常见的图片的格式：
GIF JPG PNG BMP
等
6.1 常见的属性
src
属性
----
指的是图片的路径（绝对路径和相对路径）
alt
属性
------
代替图片的文本内容（因为路径的问他或者因为浏览器的问题显示不出来这个张图片的
时候，
alt
属性值就是去描述这张图片的一个内容）
width ------
宽度
height ----
高度
border ------
边框，默认值
0
align -----
位置 （图片和文字的位置）
top (
上对齐
) middle(
居中对齐
) bottom(
下对齐 默认值
) left(
左对齐
) right(
右对齐
)
title ------
图片的标题 ，用来显示描述图片的文字
6.2 位图
usemap
属性
map
标签的
name
属性，一般会和
area
标签进行连用
属性：
shape -------
鼠标点击的形状
coords -----
鼠标点击形状的大小
href ------
表示跳转的路径
7. 多媒体标签
audio
标签
----
音频
video
标签
----
视频
controls
属性
----
表示播放器的组件
autoplay
属性
-----
自动播放（浏览器不支持这个属性值）
loop
属性
----
循环播放
8. 表格布局
8.1 表格属性
边框：border=“1px” 设置表格的边框为1px
表格的内边距：cellpadding = “0” 设置表格的内边距为0px
表格线之间的距离：cellspacing=“0” 设置表格的单元格到单元格的空间为0px
行：<tr></tr>
列：<td></td> 先有行再有列所以它是dd（弟弟）
表头： <th></th>
表格合并：
合并行：rowspan
合并列：colspan 单词里面字母有L所以它是合并列
表格标题：<caption></caption>
下面是一个具体的示例：
<body>
<table border="1" cellspacing="0" cellpadding="0px">
<caption>
最喜欢的音乐
</caption>
<tr>
<th width="200" height="20">歌曲</th>
<th width="200" height="20">歌手</th>
</tr>
<tr>
<td height="20">云烟成雨</td>
<td height="20">房东的猫</td>
</tr>
<tr>
<td height="20">十年</td>
<td height="20" rowspan="2">陈奕迅</td>
</tr>
<tr>
<td height="20">富士山下</td>
<!-- <td height="20">陈奕迅</td> -->
</tr>
<tr>
<td height="20" colspan="2">合计</td>
</tr>
</table>
</body>
8.2 表格的背景
bgcolor -----
背景颜色
background ----
背景图片
8.3 表格的间距和边距
cellpadding ------
表格边距（表示的是单元格内元素距离单元格边缘的距离）
cellspacing-----
表格的间距（单元格和单元格之间的距离）
9. 列表标签
主要有三种：有序列表、无序列表、数据列表
9.1 有序列表 ---- ol
type
属性
----
设置序号的种类，默认的是数字
start
属性
-----
控制序号开始的位置
reversed
属性
-----
降序（反序）
9.2 无序列表---- dl
type属性 ------ 无序列表的样式 disc(默认取值 实心圆) circle(空心圆) square（实心方框）
9.3 数据列表 ----- dl
<dl>
<dt>这是标题</dt>
<dd>这是内容1</dd>
<dd>这是内容2</dd>
<dd>这是内容3</dd>
<dd>这是内容4</dd>
<dd>这是内容5</dd>
</dl><dl>
<dt>地方新闻</dt>
<dd>这是内容1</dd>
<dd>这是内容2</dd>
<dd>这是内容3</dd>
<dd>这是内容4</dd>
<dd>这是内容5</dd>
<dt>国际新闻</dt>
<dd>这是内容1</dd>
<dd>这是内容2</dd>
<dd>这是内容3</dd>
<dd>这是内容4</dd>
<dd>这是内容5</dd>
<dt>国内新闻</dt>
<dd>这是内容1</dd>
<dd>这是内容2</dd>
<dd>这是内容3</dd>
<dd>这是内容4</dd>
<dd>这是内容5</dd>
</dl>10. 多窗口框架
一个页面可以显示多个窗口
----- frameset
（不能和
body
标签连用）
cols ------
定义页面列方向的尺寸或则数目
rows ----
行
<frameset cols="25%,40%,*">
<frame src="D:\重大城科\23级前端1202\代码\第五天\demo01.html"></frame>
<frame src="D:\重大城科\23级前端1202\代码\第四天\demo04.html"></frame>
<frame src="D:\重大城科\23级前端1202\代码\第四天\demo03.html"></frame>
</frameset>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
