本文详细介绍了HTML（超文本标签语言）的基础知识，包括其结构、特点、字符集和常用标签。HTML是网页文档的主要组成部分，它的基本结构由文档声明、头部和主体组成。常见的HTML标签如段落、标题、字体修饰、链接、表单元素、图像、表格、列表等在网页设计中扮演重要角色。此外，还讲解了表单的get和post提交方式，以及超链接的target属性，表格的嵌套和合并，以及列表标签的应用。
HTML 全称为 HyperText Mark-up Language，翻译为超文本标签语言，标签也称作标记或者元素。 HTML 是目前网络上应用最为广泛的技术之一，也是构成网页文档的主要基石之一。HTML文本是由 HTML 标签组成的描述性文本，HTML 文本可以说明文字、图形、动画、声音、表格、链接等。
HTML的特点：简单灵活，可扩展性，平台无关性。
HTML的结构：
<!DOCTYPE <!DOCTYPE html> ---- 文档声明
<html> ---- 网页的开始
<head> ----页头。代表页面的“头”，定义一些特殊内容（其中就有<title>--定义网页标 </head> 题），这些内容往往都是“不可见内容”（在浏览器不可见）。
<body> ----页身。代表页面的“身”，定义网页展示内容，这些内容往往都是“可见内容”
</body> （在浏览器可见）。
</html>
HTML常见的字符集：
UTF-8：常用字符集。GB2312 ：简体中文字符集 。BIG5 ：繁体中文字符集 。GBK ： 是GB2312的后续更新 ，添加了更多的汉字和特殊的符号。
比较常用的几种标签
| <p> | 段落标签-align 属性的取值 left center right,默认的位置是居左 |
| <br> | 换行标签 |
| <strong> <b> | 用于字体加粗 |
| <u> | 下划线标签 |
| <hr> | 水平分割线 -width属性设置的是长度 单位可以是px也可以是% size属性指的是宽度 |
| <font> | 用来修饰字体 color 字体的颜色 |
| <span> | 标准的行内标签，用来修饰文本，不会自动换行 |
| <div> | 盒子标签，属于块元素。 |
| <h1~6> | 标题标签，段落号从小到大，标题显示依次变小。 |
| <i> | 斜体 |
| <del> | 删除线 |
| <sub> | 文字下标 |
| <sup> | 文字上标 |
| align <p align="?"> </p> | 定义文本对齐方式。取值：left、center、right |
| color <font color=" ? "> </font> | 修饰字体颜色。 用单词或色号 |
例：
<!DOCTYPE html>
<html>
<head>
<title>我的世界</title>
</head>
<body>
欢迎，来到我的世界。<br>
<strong>欢迎，来到我的世界</strong><br>
<b>也是粗体<y/b><br>
<i>斜体</i><br>
<em>也是斜体</em><br>
<u>下划线</u><br>
<del>删除线</del>
<hr width="50%" size="10">
<p align="left"><font color="red">这是一段话啊达瓦撒疯啊十大算法的空间打算第五大道那就撒谎高度完全就到家啊湿度温度看到啥厚度</font></font></p>
<p align="right"><font color="fdbddf">这是一段话啊达瓦撒疯啊十大算法的空间打算第五大道那就撒谎高度完全就到家啊湿度温度看到啥厚度</font></font></p>
A<sub>下标</sub><br>
B<sup>上标</sup>
<pre>wadafaesdavsdfe是否散
发到王府井
发考试计划</pre><!用来原样输出>
<span>标准的行内标签 特点:只占内容部分，不会自动换行</span><br>
<h1>这是一个标题</h1>
<h2>这是一个标签</h2>
<h3>hn n的取值1-6，字体大小从大到小</h3>
<div>块级标签，能自动换行</div>
<div>这是一个盒子，多用于布局</div>
</body>
</html>
转义字符（不能直接使用符号所以使用转义符）：
|  ； | 空格 |
| < | < |
| > | > |
| ¥ | ￥ |
| " | " |
| © | © |
| ® | ® |
| ± | ± |
| ‰ | ‰ |
| ÷ | ÷ |
表单标签：
1）form--一般与input标签连用。
用于为用户输入创建 HTML 表单
表单能够包含 input、textarea、select标签，比如文本字段、复选框、单选框、提交按钮等等,用于向服务器传输数据
包涵了action属性---取值：文件路径
name---取值：字符串（表单名称）
method---取值：请求方式--get、post（用来表明表单提交的方式）
get和post区别：get：不安全，会将用户名和密码暴露在地址栏上，后台接收数据
post：相对安全，后台接收数据
form标签的属性：
| action | 规定当提交表单时向何处发送表单数据。 取值：文件路径（绝对路径和相对路径） |
| enctyp | 规定在发送表单数据之前如何对其进行编码。 |
| name | 表单的名称 取值：字符串 |
| method | 规定用于发送 form-data 的 HTTP 方法 取值：get（请求会将用户名和密码暴露在地址栏上，不安全） post（请求相较于比较安全） |
| novalidate | 如果使用该属性，则提交表单时不进行验证 |
2）input 标签
根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
格式：<input type = "元素类型" id = "客户唯一标识符">
type属性的取值：
| type = "text" | 文本框(单行) |
| type = "password" | 密码框 |
| type = "radio" | 单选按钮 |
| type = "chexbox" | 多选按钮 |
| type = "submit" | 提交按钮 |
| type = "reset" | 复位按钮 重置按钮 |
| type = "button" - | 普通的按钮 |
| type = "image" | 图像按钮 |
| type = "file" | 上传文件 文件域 |
| type = "hidden" | 隐藏域 用户在页面上不可见的内容 提交用户不可以看见的一些信息 |
| type = "email" | 邮箱 |
| type = "color" | 颜色 |
| type = "date" | 日期 |
| type="datetime-local" | 日期+时间 |
| type="time" | 时间 |
| type="range" | 进度条 |
inpu其他属性：
checked ----默认选择
readonly --- 字段只读不能修改
disabled ----- 表示input禁用 不可点击
autofocus --- 默认光标的位置
required---- input不能为空白提交
例：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div align="center">
<form action="..\前端课\demo01.html" name="name" method="post">
用户名：<input type="text" name="username" id="username" value="zhangsan" readonly="readonly"><br>
密 码：<input type="password" name="username" ><br>
请选择：<input type="radio" value="男" name="gender">男 <input type="radio" value="女" name="gender">女<br>
<p>
<input type="checkbox" value="唱" name="dance">唱
<input type="checkbox" value="跳" name="dance">跳
<input type="checkbox" value="rap" name="dance">rap
<input type="checkbox" value="篮球" name="dance">篮球
</p>
<input type="submit" value="提交">
<input type="reset" value="哒咩">
<input type="button">
<input type="file">
<input type="hidden">
请输入您的邮箱：<input type="email"><input type="color"><br>
<input type="date"><input type="datetime-local"><input type="time"><br>
<input type="range">
默认选择<input checked="checked"><br>
只读不能写<input readonly="readonly"><br>
intput提交不能为空<intput required="required"><br>
</form>
</div>
</body>
</html>
3）select标签：
select 元素表示下拉选择框,可创建单选或多选菜单。
<select> 元素中的 <option> 标签用于定义列表中的可用选项。
<select multiple="multiple" size="可见列表项的数目">
<option value...> ？</option>
</select>
会和option标签连用 option表示的下拉选择框中的选项
属性：
value ---- 选项的值
name ---- 下拉框的名称
selected ----- 默认被选中的选项
multiple ----- 以列表的形式显示
例：
请选择你所在的城市：
<select>
<option value="北京" >北京</option>
<option selected="selected">重庆</option>
<option>成都</option>
</select><br>
4）.textarea：
<textarea> 标签定义多行的文本输入控件。
文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。
可以通过 cols（文本域的宽度） 和 rows （文本域的高度）属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。
例：
<textarea cols="5" rows="10">这家伙很懒，什么都没有留下 cols:行，宽度。rows:列，高度</textarea>
超链接：
1）超链接a标签的使用：
<a>-----超链接
格式：<a href="链接地址" target="目标窗口的打开方式"> </a>
Target属性：
target属性值 说明 _self 默认方式，即在当前窗口打开链接 _blank 在一个全新的空白窗口中打开链接 _top 在顶层框架中打开链接 _parent 在当前框架的上一层里打开链接 farmename 在指定的框架中打开被链接文档。
在<body>中中超链接的修饰：
| Text | 文本颜色 |
| link | 超链接文本的颜色 |
| vlink | 访问过的超链接的文本颜色 |
| Alink | 激活超链接文本的颜色 |
| bgcolor | 背景颜色 |
| background | 背景图片 一般不建议背景使用图片 |
<a>标签做锚点：
锚点：网页制作中超级链接的一种，又叫命名锚记。
使用命名锚记可以在文档中设置标记，这些标记通常放在文档的特定主题处或顶部。然后可以创建到这些命名锚记的链接，这些链接可快速将访问者带到指定位置。
例：
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title></title>
</head>
<body link="black" vlink="red" alink="blue" bgcolor="pink">
<a href="http://www.cqucc.com.cn/shixun.html">我的世界><哈哈哈哈¥</a><br>
"©®±<br>
<a href="https://www.w3school.com.cn/tags/tag_a.asp
" target="_blank" link="black">点我</a><br>
<a href="#01">一</a><br>
<a href="#02">二</a><br>
<a href="#03">三</a><br>
<a href="#04">四</a><br>
<a href="#01">回到第一章</a><br>
<img src="dd52c803d7603eca.jpg" width="100%" height="100%" title="王权富贵" usemap="#image">
<map name="image"> <area shape="circle" coords="154,132,50" href="demo01.html"></area> </map>
</body>
</html>
图像
1）image标签
属性：
|
src
|
指代图片的路径（相对路径和绝对路径）
|
|
alt
|
表示的图像的代替文本（路径错误或者图片损坏或者浏览器的问题显示不出图片的时候）
|
|
width 和
height
|
控制图片的大小 单位可以使用
px %
|
|
border
|
边框 默认边框的取值
0
没有边框
>=1
数字越大边框就越大 （大小指的是边框的粗细）
|
|
align
|
位置
指的是文字和图片的位置 取值
center left right bottom middle top,
默认的下对齐
|
| title | 鼠标移到图片上悬停时的的提示文字 |
常见的图片格式：.jpg、.png和.gif：
路径：绝对路径（指的是文件的完整路径）和相对路径（指的是同一个网站下，不同文件之间的的位置定位。引用的文件位置是相对当前文件的位置而言，从而得到相对路径。）
2）位图
即带有可点击区域的图像映射
<map id="">
<area coords="坐标值和大小" href="链接路径" alt=""> </area>
</map>
map 标签和 area 标签连用
shape 属性 ---- 鼠标点击的形状coords 属性 ----- 点击形状的大小href 属性 ---- 表示跳转的路径
3)多媒体标签：
audio音频标签和video视频标签：
src ----- 表示音频和视频的文件位置（相对路径或者绝对路径）controls ----- 表示的是显示播放器的组件autoplay ----- 自动播放
表格
- 表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> <th>标签定义）。tbody --- 主干，tfoot----- 尾、页脚
表格的属性：
|
border
|
边框
取值是数字
单位是像素 当取值为
0
的时候表示没有边框（默认）大于
0
的时候表 格是有边框的，数值一定要为整数
|
|
width 和heght
|
表示的是表格宽度和高度
|
|
align
|
表示的是表格对齐方式
left center right,
默认是
left
|
|
bgcolor
|
表示的是表格的背景颜色
|
|
background
|
表示背景图像
|
|
cellpadding
|
表示表格边距（单元格内元素距离单元格边缘的距离）
|
|
cellspacing
|
表示表格间距（单元格与单元格之间的距离）
|
例：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<table border="1" width="300" height="100" cellpadding="10" cellspacing="10">
<tr bgcolor="#999999">
<th>衬衫</th>
<th>鞋</th>
<th>皮带</th>
</tr>
<tr bgcolor="#cccccc">
<td>$90</td>
<td>$300</td>
<td>$50</td>
</tr>
</body>
</html>
表格嵌套：
<body>
<table width="300" border="1">
<tr>
<td width="100"> </td>
<td width="200">
<table width="200" border="1" align="center">
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="200"> </td>
<td width="200"> </td>
表格合并：
- 单元格跨行---- 合并的是行
-
<body> <table width="300" border="1"> <tr> <td rowspan="2"> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> </body>
列表标签
1）有序列表
有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
属性：
|
type
|
表示设置序号的种类，
1
、
A
、
a
、
I
、
i,
默认取值是
1
|
|
start
|
控制开始序号的位置
|
|
reversed
|
降序（反序）
|
2）无序列表
<ul> </ul> 标签定义无序列表。
<body>
<h4>一个无序列表：</h4>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
</body>
3）数据列表
<dl></dl> 标签定义了定义列表（definition list）。
<dl> 标签用于结合 <dt>（定义列表中的项目）和<dd>（描述列表中的项目）。
<body>
<dl>
<dt>这是标题</dt>
<dd>这是内容1</dd>
<dd>这是内容2</dd>
<dd>这是内容3</dd>
<dd>这是内容4</dd>
<dd>这是内容5</dd>
<dd>这是内容6</dd>
<dd>这是内容7</dd>
</dl>
</body>
多窗口框架
一个页面可以显示多个窗口 ----- framesetiframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
您可以把需要的文本放置在 <iframe> 和 </iframe> 之间，这样就可以应对无法理解 iframe 的浏览器。
注意：如果要使用frameset标签，就不能和body标签连用
| 属性 | 值 | 描述 |
|---|---|---|
| align |
| 不赞成使用。请使用样式代替。 规定如何根据周围的元素来对齐此框架。 |
| frameborder |
| 规定是否显示框架周围的边框。 |
| height |
| 规定 iframe 的高度。 |
| longdesc | URL | 规定一个页面，该页面包含了有关 iframe 的较长描述。 |
| marginheight | pixels | 定义 iframe 的顶部和底部的边距。 |
| marginwidth | pixels | 定义 iframe 的左侧和右侧的边距。 |
| name | frame_name | 规定 iframe 的名称。 |
| referrerpolicy |
| 规定 iframe 的名称。 |
| sandbox |
| 启用一系列对 <iframe> 中内容的额外限制。 |
| scrolling |
| 规定是否在 iframe 中显示滚动条。 |
| seamless | seamless | 规定 <iframe> 看上去像是包含文档的一部分。 |
| src | URL | 规定在 iframe 中显示的文档的 URL。 |
| srcdoc | HTML_code | 规定在 <iframe> 中显示的页面的 HTML 内容。 |
| width |
| 定义 iframe 的宽度。 |
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<frameset rows="15%,*,15%">
<frame src="demo01.html"></frame>
<frameset cols="25%,*"> <frame src="demo02.html"></frame>
<frame src="demo03.html"></frame>
</frameset>
<frame src="demo04.html">
</frame>
</frameset>
</html>
3971
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
