HTML相关知识汇总
1.html是什么？
html指的是超文本标记语言（HyperText Markkup Language) 。
超文本 ：是指页面内可以包含图片、链接、声音、视频等内容。
标记：标签（通过标记符号来告诉浏览器网页内容该如何显示）。
2.html做什么？
通过HBuilder(软件工具)来制作网页。
3.html的基本语法
①.html的框架
<!--
声明html的语言版本，当前版本为html5。
注释快捷键为：ctrl+/
-->
<!DOCTYPE html>
<!--
该标签标记了html的开始与结束；网页中的所有内容必须写在该标签下。
-->
<html>
<!--
网页头部，设置网页信息
-->
<head>
<!-- 设置网页字符集编码 -->
<meta charset="utf-8">
<!--link是标题处添加图标 -->
<link href="图片地址" rel="icon" />
<!-- 定义网页标题 -->
<title>网页标题</title>
</head>
<!--
网页的身体部分，即网页内容
-->
<body>
网页内容，包括文字、图片、视频等
<!--
标签分类：
<开始>内容<结束/> 这种类型的称为闭合标签（双标签）
<link href="图片地址" rel="icon" /> 这种类型的称为自闭合标签（单标签）
-->
</body>
</html>
②.标题标签
<body >
<!--
h标签为标题标签，分为六级，h1至h6为一级标题至六级标题
每个标题独占一行
align为标题的属性，规定标题位置：center(居中)，right(右对齐)，left(左对齐)
-->
<h1 align="center">一级标题</h1>
<h2 align="right">二级标题</h2>
<h3 align="left">三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
③段落标签
<body>
<!--
p标签表示一个段落 ，占一行 段落与段落之间有一个间隔
<br/> 表示换行 style="text-indent: 2em;" 表示首行缩进
-->
<p style="text-indent: 2em;">
这是第一个段落，且首行缩进，默认左对齐。
</p>
<p align="center" >
这是第二个段落，段落居中。如果想要使段落右对齐的话，则只需把center改为right。
</p>
</body>
④特殊符号含义
<!--
特殊的转义字符：
---空格
©---版权
®---注册商标
™---商标
<---小于号
>---大于号
-->
⑤列表标签
<body>
<!--
列表分为有序列表和无序列表
有序列表由两组标签组成：ol li 列表项前自动生成序号 type指定序号类型 ：1,A,a,i,I
无序列表由两组标签组成：ul li 列表项前默认为圆点 type制定类型：disc(默认)、square、 circleS
-->
有序列表
<ol type="1">
<li>列表项内容</li>
<li>列表项内容</li>
<li>列表项内容</li>
</ol>
© ®
无序列表
<ul type="square">
<li>列表项内容</li>
<li>列表项内容</li>
<li>列表项内容</li>
</ul>
</body>
⑥超链接与图像标签
<body>
<!--
a为超链接标签 连接到网络上的另一个指定的网页资源
target="_self(默认当前窗口打开),_blank(新窗口打开)"
-->
<a href="http://www.qq.com" target="_blank">腾讯</a>
<a href="http://www.baidu.com" target="_self">百度</a>
<!--
img为图像标签 实现图片的插入
src="图片地址" 引用项目中的一个图片
alt="图片不能正常显示时提示"
title="鼠标移动到标签上提示信息"
-->
<img src="img/baidu.ico" alt="图片不能正常显示时提示"
title="鼠标移动到标签上提示信息" />
</body>
4.超链接锚点
<body>
<a name="top"></a>
<!--
超链接跳转到制定的锚点
<a href="#+锚点name">产品1</a>
-->
<a href="#p1">产品1</a>
<a href="#p2">产品2</a>
<a href="#p3">产品3</a>
<a href="#p4">产品4</a>
<a href="#p5">产品5</a>
<hr />
<!-- 定义锚点 <a name="锚点name"></a> -->
<h3>产品1 <a name="p1"></a> </h3>
<img src="img/1.png" />
<h3>产品2 <a name="p2"></a></h3>
<img src="img/2.png" />
<h3>产品3 <a name="p3"></a></h3>
<img src="img/3.png" />
<h3>产品4 <a name="p4"></a></h3>
<img src="img/4.png" />
<h3>产品5 <a name="p5"></a></h3>
<img src="img/5.png" />
<hr />
<p align="center"><a href="#top">返回顶部</a></p>
</body>
5.表格标签及表格属性
<body>
<!--
表格标签：
table:表格内容区域
属性标签： border="1" 设置表格边框；width="400" height="300" 设置表格整体的宽高
bgcolor="aqua"表格背景颜色；background="img/QQ图片20200924142653.jpg">表格背景图片
cellspacing="number"表格边框的填充值，number为0时边框为一条线
cellpadding="number" 表格内容到边框的距离；
tr：表格行
属性标签：height="200" 行高
th：表头，也是单元格，内容会加粗，居中
属性标签：width="150" 列宽 bgcolor="yellow" 单元格背景颜色
background="img/3.png" 单元格背景图片
td：普通的单元格
注意：表格中的内容必须都写在单元格中。
-->
<table border="1" width="400" height="300" cellspacing="0" cellpadding="10" bgcolor="aqua" background="img/QQ图片20200924142653.jpg">
<tr height="200" >
<th width="150">单元格内容</th>
<th bgcolor="yellow">单元格内容</th>
<th background="img/3.png">单元格内容</th>
</tr>
<tr >
<td>单元格内容</td>
<td>单元格内容</td>
<td>单元格内容</td>
</tr>
<tr>
<td >单元格内容</td>
<td>单元格内容</td>
<td>单元格内容</td>
</tr>
<tr >
<td>单元格内容</td>
<td>单元格内容</td>
<td>单元格内容</td>
</tr>
</table>
6.表格中的单元格合并
<body>
<!-- colspan="合并数量" 单元格跨列合并
从哪个开始合并，就在哪个中加入该标签
删除多余的单元格
rowspan="合并数量" 单元格跨行合并
-->
<table border="1" width="400" height="300" ">
<tr >
<td colspan="3">单元格内容</td>
</tr>
<tr>
<td rowspan="2" >单元格内容</td>
<td>单元格内容</td>
<td>单元格内容</td>
</tr>
<tr >
<td>单元格内容</td>
<td>单元格内容</td>
</tr>
7.表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
form为表单标签，表单中包含很多输入/选择的组件，用户可以输入信息，最终提交给服务器
id: 为标签定义id号，值唯一，值自定义，不能数字开头
name：值自定义，可以重复，向服务器提交数据的键
value:向服务器提交的值,标签默认值
size：列数
placeholder="提示信息" 提示信息，当输入内容后被覆盖
readonly="readonly" 只读，可以提交 disabled="disabled" 禁止组件，不能向服务器提交
-->
<form>
<label for="accountid1">账号</label>:
<input type="text" id="accountid1" size="20" placeholder="请输入账号" />
<br />
<label for="accountid2">密码</label>:
<input type="password" id="accountid2" size="20"
placeholder="请输入密码" /><br />
<!--
type="radio" 单选框组件
通过name属性进行的分组，name相同为一组，一组之内只能选一个
注意：凡是选择性组件必须给予默认值
-->
性别：<input type="radio" name="sex" value="男" id="man" checked="checked" />
<label for="man" >男</label>
<input type="radio" name="sex" value="女" id="women" />
<label for="women">女</label><br />
<!--
type="checkbox" 多选框组件
通过name属性进行的分组，name相同为一组，一组之内可选多个
注意：凡是选择性组件必须给予默认值
-->
课程：<input type="checkbox" name="course" value="JAVA" id="cour1" checked="checked" />
<label for="cour1">JAVA</label>
<input type="checkbox" name="course" value="HTML" id="cour2" />
<label for="cour2">HTML</label>
<input type="checkbox" name="course" value="C" id="cour3" />
<label for="cour3">C</label><br />
<!-- type="file" 文件选择框 accept=".文件后缀名,.文件后缀名" 限制文件类型 -->
上传附件：<input type="file" name="file" accept=".jpg" /> <br />
<!--
下拉框：select ：name属性添加在select标签中
option
selected="selected" 默认选中项
-->
省份：<select name="province">
<option value="101">北京</option>
<option value="610" selected="selected">陕西</option>
<option value="710">山西</option>
</select><br />
<!-- textarea 多行文本域， rows 行数 ，cols 列数 -->
地址：<textarea name="address" rows="5" cols="30">陕西省汉中市</textarea><br />
<!--
type="reset" 重填表单内容
type="submit" 提交表单内容到服务器
type="button" 普通按钮，没有功能，只能被点击触发事件用
注意：value中的值是运行后你所看到的值，可以自定义。
例如，reset是重填，你可以自定义value为：删除数据，重新填写等
-->
<input type="reset" value="重填" />
<input type="submit" value="提交" />
<input type="button" value="按钮" />
</form>
</body>
</html>
8.内联框架
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
内联框架可以在一个窗口内嵌入一个子窗口，从而在子窗口内引入一个外部界面
<iframe src="子窗口地址" name="子窗口"></iframe>
在iframe标签中添加name属性 是为了通过超链接target="子窗口"来让父窗口中的链接在子窗口中打开
-->
父窗口
<a href="http://www.baidu.com" target="z1" >百度</a>
<iframe src="子窗口.html" name="z1" width="800" height="400" frameborder="1">子窗口 </iframe>
</body>
</html>
（注意：具体的代码实现结果在之前发过的笔记中有所提到，在此只做汇总。）
343
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
