HTML标签
（1）html标签
html标签是HTML文件的最大一个标签，也被称为根标签。在html标签内把整个html分为了头部（head标签）和内容部分（body部分）,头部负责声明页面的属性，body用来展示内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <!--设置编码为utf-8-->
<title>标题</title>
</head>
<body>
<p>展示的内容</p>
</body>
</html>
（2）标题标签
<h1 align="right">标题</h1>
<!--
从h1到h6一共六个等级，等级1到6由大到小
align：对齐方式。left：左对齐；center：居中；right：右对齐。
-->
（3）文本标签
<p>文本标签</p>
<span>文本标签</span>
<br>
<hr>
<!--
p标签：文本标签通常用来存放文字，一个p标签占一行，html当中大段的文字通常是用p标签表示的。
span标签：文本标签不进行换行操作，可以对一行文字进行修饰
br标签（单标签）：换行标签
hr标签（单标签）：独立一行的一条线
-->
（4）文本修饰标签
<i>倾斜</i>
<em>倾斜</em>
<b>加粗</b>
<strong>加粗</strong>
<u>下划线</u>
<del>删除线</del>
<!--
i标签：倾斜文字，强调倾斜
em标签：倾斜文字
b标签：加粗文字
strong标签：加粗文字，强调加粗
u标签：文字下划线
del标签：删除线
-->
（5）图片标签
<img src="img.png" alt="找不到图片" title="背景" height="150px" width="100%">
<!--
src：图片的路径，可以是绝对路径，也可以是相对路径
alt：图片加载失败的提示文字
title：鼠标移到图片时的提示文字
图片尺寸：height 图片高度 width 图片宽度
单独设置图片的高度或者宽度，html会自动的对图片进行等比例缩放，使得图片不会变形
高度和宽度的设置单位通常是像素（px），也可以用百分比
-->
（6）超链接标签
<!--超链接-->
<a href="https://www.baidu.com/" target="_blank">帮助</a>
<!--
href：超链接的地址
target：打开链接的方式,_blank指的是新建一个窗口来访问链接
-->
<!--锚点操作，快速跳转到指定的标签位置-->
<h2 id="h2" align="center">诺卡木门调查问卷</h2>
<a href="#h2">返回顶部</a>
<!-- 操作步骤
1、在需要跳转到的标签上设置id属性，id是标签的标识属性，在一个页面中，id不可重复
2、给a标签的href属性使用#id的名称进行指定，实现跳转到指定的标签位置
-->
（7）列表标签
1、有序列表
<ol type="A" start="2">
<li>python</li>
<li>java</li>
</ol>
<!--
type属性
a：小写字母排序
A：大写字母排序
i：小写罗马数字排序
I：大写罗马数字排序
1：数字排序，默认
start属性：序列开始数字
-->
2、无序列表
<ul type="square">
<li>python</li>
<li>java</li>
</ul>
<!--
type属性
disc：实心原点，默认
circle：空心原点
square：实心方块
-->
3、自定义列表
<dl>
<dt>学科</dt>
<dd>python</dd>
<dd>java</dd>
</dl>
<!--
输出结果：
学科
python
java
-->
（8）表格标签
<table cellspacing="25px" cellpadding="50" width="700px" height="800px" align="center">
<caption> ***表格
</caption>
<tr>
<th valign="bottom">姓名</th>
<td>老王</td>
<td>年龄</td>
<td>18</td>
<td rowspan="2">图片</td>
</tr>
<tr>
<td colspan="2">性别</td>
<td colspan="2">男</td>
</tr>
</table>
<!--
caption标签：表格的标题
tr标签：行
td标签：列
th标签：是一种特殊的td，对文字自动执行居中加粗
属性：
align：表格相对于周围元素的对齐方式。
left
right
center
valign：单元格中的内容的垂直对齐方式，在h5中已不支持，可以通过css代替，不过设置单行td还有效
top
bottom
middle
cellspacing：单元格和单元格之间的距离
cellpadding：单元格和内容的距离（内容和单元格上下左右的距离）
width：表格的宽度
height：表格的高度，由于数据条数不固定，通常不设置高度
colspan 跨列合并：某一行合并几列单元格
rowspan 跨行合并：某一列合并几行单元格
-->
（9）表单标签
<form action="demo.php" >
name: <input type="text" name="myname" value="jacke5t"><br>
<input type="submit" value="提交">
</form>
<!--
form标签：用于创建供用户输入的 HTML 表单。
参数
action：数据提交的地址
method：提交的方式，通常有get和post两种
enctype：提交数据的格式，适用method="post" 的情况
-->
（10）表单元素标签
1、input标签
<input name="myname" value="jacke5t">
<input type="radio" name="1" checked>
<input type="radio" name="1">
<input type="submit" value="提交">
<input type="text" placeholder="请输入您的联系电话">
<input type="text" readonly>
<input type="reset" value="分享" disabled>
<!--
input标签默认是一个文本框
type参数：
text：文本框，默认
password：密码框，输入内容不可见
radio：单选框，依赖name确定一组单选框，单选框中相同name的选项只能选一个
checked：代表选项选中
checkbox：复选框，依赖name确定一组，复选框中相同name的选项能选多个
checked：代表选项选中
file：文件框，用来上传文件
hidden：隐藏域，不显示，但可以提交，后端校验使用居多
submit：提交按钮，自动提交表单里的数据，没有后台没有效果，需要value参数来定义按钮上的内容
reset：重置按钮，清空当前表单的所有输入
属性：
placeholder：在文本框中显示提示字符
readonly：只读，输入文本框不能输入
disable：禁用按键
value：元素的值
-->
2、button标签
<button type="button">
<img scr="..." width="100px">
</button>
<button type="submit">按钮</button>
<!-- 相比较input，button的按钮内容可以更丰富
type参数
button：按钮
submit：提交
reset：重置
-->
3、select标签
<select>
<option>1</option>
<option>2</option>
<option selected>3</option>
</select>
<!--下拉框标签
option标签：下拉框中的选项
selected：下拉默认选中项
-->
4、textarea标签
<textarea cols="40" rows="5">textarea</textarea>
<!--用于大段的文字
cols：文本区域内可见的宽度
rows：规定文本区域内可见的行数
-->
5、label标签
label元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<form action="demo_form.php">
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female"><br>
<input type="submit" value="提交">
</form>
<!--当用户点击label时，会在选项框中自动选择相应label所绑定的选项
for：规定label与哪个表单元素绑定。
-->
（11）符号
空格的代表符号，代表一个空格
> ">"的代表符号
< "<"的代表符号
扫一扫
963
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
