HTML基础
标签
标签,表示页面的“头”,定义特殊内容,其常见的内部标签如下表所示:内部标签 | 说明 |
---|---|
<title> | 定义网页的标题 |
<meta> | 定义网页的基本信息(供搜素引擎) |
<style> | 定义CSS样式 |
<link> | 链接外部CSS文件/脚本文件 |
<script> | 定义脚本语言 |
<base> | 定义页面所有链接的基础定位 |
标签
在通过VS Code快捷生成HTML时,会自动生成部分<meta>标签,更具体的使用参考下述文章,链接如下:
<meta>标签
单标签(自闭合标签)
不必确定开始和结束,例如<br>和<hr>
标题标签
标题标签属于块元素(独占一行),有<hi>(i=1,2,…,6)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题标签</title>
</head>
<body>
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
</body>
</html>
段落标签
段落标签<p>属于块元素,段落之间有一定的空隙。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>段落标签</title>
</head>
<body>
<h1>文章标题</h1>
<hr>
<p>123456789123456789<br>123456789123456789123456789123456789123456789123456789123456789123456789</p>
<hr>
<p>123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789</p>
<hr>
</body>
</html>
格式化标签
格式化标签用于修改文字样式,常用的格式化标签如下图所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本格式化标签</title>
</head>
<body>
<b>加粗字体</b><br>
<strong>加粗字体</strong><br>
<u>下划线字体</u><br>
<ins>下划线字体</ins><br>
<i>倾斜字体</i><br>
<em>倾斜字体</em><br>
<s>删除线字体</s><br>
<del>删除线字体</del><br>
<strong><ins><em><del>极限融合</del></em></ins></strong>
</body>
</html>
标题语义化
根据语义选择正确的标签,而不是通过其他标签叠加、修改样式等方式模拟出类似的效果。
例如标题使用<h1>,<h2>等,而段落要使用<p>。
图像标签
<img>标签,该标签内部有若干属性,常用的属性如下表所示:
属性 | 含义 |
---|---|
src | 图像的URL |
alt | 图像的替换文本(加载失败时显示) |
width | 图像宽度(HTML5-CSS像素;HTML4也可以是百分比) |
height | 图像高度(没有该属性时等比例缩放) |
title | 鼠标悬停时显示的文本内容 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片标签</title>
</head>
<body>
<img src="./88.jpg" title="悬停显示" alt="加载失败显示" width="800">
<!--width和height,只需给出其中一个,另一个是自动等比例缩放-->
</body>
</html>
音频标签
<audio>音频标签,支持的音频格式有MP3,wav,ogg等。
<audio>常用的属性如下表所示:
属性 | 含义 |
---|---|
controls | 显示播放的控件 |
autoplay | 自动播放(部分浏览器不支持) |
loop | 循环播放 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>音频标签</title>
</head>
<body>
<audio src="./test.wav" controls>
</audio>
<audio controls>
<source src="..." type="mpeg"/>
<source src="..." type="ogg"/>
<source src="..." type="wav"/>
不支持现有音频格式
</audio>
<!--优先级mp3>ogg>wav,都没有则无法播放-->
</body>
</html>
视频标签
<video>视频标签,常用的属性同<audio>,但是自动播放需要配合muted属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>视频标签</title>
</head>
<body>
<video src="./舞蹈风2.mp4" controls autoplay muted width="200"></video>
</body>
</html>
超链接标签
<a>超链接标签,常用的属性如下表所示:
属性 | 含义 |
---|---|
href | 跳转目标链接(#代表空链接) |
target | 链接打开方式 |
download | 是否是下载而非打开 |
title | 鼠标悬停时显示的文本内容 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>链接标签</title>
</head>
<body>
<a href="http://today.hit.edu.cn" target="_blank">跳转至今日哈工大</a>
<a href="./88.jpg" download="picture.jpg">下载图片</a>
</body>
</html>
target属性
target属性表示链接打开的方式,常见的取值如下表所示:
取值 | 含义 |
---|---|
_blank | 在新窗口打开 |
_self | 在当前窗口打开(默认值) |
_parent | 在父窗口打开 |
列表
列表有无序列表、有序列表、自定义列表。
无序列表和有序列表
无序列表<ul>无序列表整体 <li>列表每一项
有序列表<ol>有序列表整体 <li>列表每一项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>无序列表和有序列表</title>
</head>
<body>
<h1>
无序列表和有序列表
</h1>
<ul>
<li>123</li>
<li>234</li>
<li>345</li>
</ul>
<hr>
<ol>
<li>123</li>
<li>456</li>
<li>789</li>
</ol>
</body>
</html>
自定义列表
自定义列表<dl>列表整体 <dt>列表表头 <dd>每一项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义列表</title>
</head>
<body>
<dl>
<dt><strong>列表表头</strong></dt>
<dd><ins>123</ins></dd>
<dd>345</dd>
</dl>
<!--dd默认有缩进-->
</body>
</html>
表格标签
<table>标签,内含有标签<caption>表名,<thead>表头,<tbody>表体,<tfoot>表尾。
<thead>中使用<tr>和<th>标签,而<tbody>和<tfoot>中使用<tr>和<td>;
跨行合并与跨列合并
在<td>标签中,使用rowspan属性进行跨行合并(保留最上面单元格的值),使用colspan属性进行跨列合并(保留最左边单元格的值)。
但是不能跨结构合并(如跨越<tbody>、<thead>)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>综合案例表格</title>
</head>
<body>
<table border="2" width="800" height="600">
<caption><strong>优秀学生信息表格</strong></caption>
<thead>
<tr>
<th>年级</th>
<th>姓名</th>
<th>学号</th>
<th>班级</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">高三</td>
<td>张三</td>
<td>110</td>
<td>三年二班</td>
</tr>
<tr>
<td>赵四</td>
<td>120</td>
<td>三年三班</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>评语</td>
<td colspan="2">优秀</td>
</tr>
</tfoot>
</table>
</body>
</html>
表单标签
<form>标签,用于表示整体,其action属性表示提交地址。
在<form>标签内部,多用<input>标签。
<input>标签
<input>标签根据type取值不同,有不同的作用,type取值如下图所示:
其中,有以下几点:
(1)单选框(radio)需要配合name属性使用。同一个name属性值的radio为一组,具有单选功能。
(2)文件上传(file)可以使用multiple属性实现多个文件上传功能。
(3)placeholder属性表示占位符。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>综合案例表单</title>
</head>
<body>
<h1>青春不常在,抓紧谈恋爱</h1>
<hr>
<form action="#">
昵称:<input type="text" id="username" placeholder="请输入昵称">
<br>
性别:<label><input type="radio" name="gender">男</label> <label><input type="radio" name="gender">女</label>
<br>
所在城市:<select name="city">
<option value="shanghai" selected>上海</option>
<option value="beijing">北京</option>
</select>
<br>
婚姻状况:<label><Input type="radio" name="info1">未婚</Input></label> <label><input type="radio" name="info1">已婚</label> <label><input type="radio" name="info1">保密</label>
<br>
喜欢的类型:<input type="checkbox">可爱 <input type="checkbox">御姐 <input type="checkbox">小鲜肉
<br>
个人介绍:
<br>
<textarea name="info2" cols="40" rows="20"></textarea>
<br>
<strong>我承诺</strong>
<ul >
<li>年满18</li>
<li>真心</li>
</ul>
<input type="checkbox" id="agree"><label for="agree">我同意所有条款</label>
<br>
<button value="免费注册">免费注册</button> <input type="reset" value="重置">
</form>
</body>
</html>
下拉列表标签
<select>标签表示下拉列表,内部包含若干个<option>标签表示每一个选项,<option>中使用selected属性表示整体下拉列表的默认值。
<label>标签
使用<label>标签可以实现点击其他区域时,也能选中/取消<input>选项。
(1)使用<label>标签包裹文字,使用其for属性表示选中的标签的id。
(2)直接使用<label>标签包裹<input>和文字。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Label</title>
</head>
<body>
<form action="">
性别:
<input type="radio" name="gender" id="male"> <label for="male">男</label>
<label><input type="radio" name="gender" id="female"> 女</label>
</form>
</body>
</html>
无语义标签
<div>标签独占一行,而<span>标签一行可以有多个。他们常用来实现页面布局(如CSS中的盒子模型)。
字符实体
字符实体用来表述特殊字符,有如下几点作用:
(1)避免HTML解析错误。
(2)保留原有字符的含义。
(3)提供可读性和可维护性。
常见的字符实体如下图所示: