HTML基本结构

一个基本的HTML文件通常具有如下的结构

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

</body>
</html>

<meta charset="UTF-8">指定了当前的文件编码为UTF-8编码. 显然将编码指定为这个值时, 该文件本身也应该使用UTF-8编码. <meta http-equiv="X-UA-Compatible" content="IE=edge">是关于IE浏览器的兼容性设置, 如果不考虑IE的兼容性, 可以不写. <meta name="viewport" content="width=device-width, initial-scale=1.0">是网页兼容移动端的重要设置, 启用该设置后浏览器才会按照移动端的规则对页面进行渲染, 否则无论页面是否适配移动端, 都会按照PC端的风格进行渲染.

基础标签

使用h1, h2, h3, h4, h5, h6定义各级标题. 使用p标签定义段落文字. 使用br(break)标签强制进行换行. div标签和span标签不具备语义, 主要用于分割页面中的元素

文本格式化标签

标签 含义 标签 含义
strongb 加粗文字 emi 倾斜文字
dels 删除线 insu 下划线

图片

1
<img src="图片地址" alt="图片加载失败时显示的文字" title="鼠标在图片上显示的文字" width="300" height="" />

一般仅设置宽度或仅设置高度, 使得图片能够保持比例缩放

超链接

1
<a href="跳转目标" target="弹出方式">文字或图片</a>

href是跳转地址, 如果是外部链接必须使用完整的URL, 否则默认连接当前服务器的相应位置. target表示链接的打开方式, 通常有如下的取值:

参数名 效果
_self 在当前窗体打开链接,此为默认值
_blank 在新窗口中打开链接

表格

表格基本结构如下所示:

1
2
3
4
5
6
7
8
9
<table>
<tr>
<th>表头文字</th>
</tr>
<tr>
<td>单元格文字</td>
</tr>

</table>

table表示一个表格, tr表示表格中的一行, 即table row, th表示表头单元格, td表示表格中的普通单元格.

表格默认没有分割线且左对齐, 通常使用CSS增强表格的显示

列表

列表的主要作用是页面的布局, 通常规整的结构都采取列表结构. 无序列表使用ul标签, 有序列表使用ol标签, 自定义列表可以使用dl标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<ul>
<li>这是第一项</li>
<li>这是第二项</li>
</ul>

<ol>
<li>这是第一项</li>
<li>这是第二项</li>
</ol>

<dl>
<dt>表头</dt>
<dd>解释1</dd>
<dd>解释2</dd>
</dl>

表单

表单域

使用form定义一个表单域, 例如

1
2
3
4
5
6
7
8
<form method="post" action="save.php">
<label for="username">用户名:</label>
<input type="text" name="username" id="username" value="admit" />
<label for="pass">密码:</label>
<input type="password" name="pass" id="pass" value="password" />
<input type="submit" value="确定" name="submit" />
<input type="reset" value="重置" name="reset" />
</form>

基本文本框

使用input定义一个文本框

1
<input type="text"  name="username" id="username" value="admit" />

name属性用于后台程序根据名称提取值, value属性用于表示此项被选中时的值(对于文本框则是初始文字)

type常见的取值为:

type取值 含义 type取值 含义
text 文本框 password 密码框
radio 单选按钮 checkbox 复选框
submit 提交按钮 reset 清除按钮
button 普通按钮 file 文件上传

单选框和复选框的的同一组应该设置为同样的name, 如果需要预选选中, 则设置checked属性. 例如:

1
2
3
4
请选择您的性别</br>
<input type="radio" name="sex" value="man">
<input type="radio" name="sex" value="woman">
<input type="radio" name="sex" value="None" checked="checked">保密</br>

submit类型和reset类型默认会进行操作, 而button类型不绑定任何事件, 需要额外的JS代码进行处理.

label标签

lable标签和对应的组件绑定, 当点击到label标签时, 相当于点击到对应的组件, 从而避免组件太小难以点击的问题. label的for属性为需要绑定的组件的id

下拉选择框

1
2
3
4
5
<select name = "selectSex">
<option value="man"></option>
<option value="woman"></option>
<option value="None" selected="selected">保密</option>
</select>

文本域

1
<textarea cols="100" rows="5">默认内容</textarea>

最后更新: 2022年10月30日 09:33

版权声明:本文为原创文章,转载请注明出处

原始链接: https://lizec.top/2022/07/14/Web%E5%BC%80%E5%8F%91%E7%AC%94%E8%AE%B0%E4%B9%8BHTML%E5%9F%BA%E7%A1%80/