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标签不具备语义, 主要用于分割页面中的元素

文本格式化标签

标签 含义 标签 含义
strong 或 b 加粗文字 em或i 倾斜文字
del或s 删除线 ins或u 下划线

图片

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>

最后更新： 2023年08月30日 14:44

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

原始链接： 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/