HTML 标签 (上)
HTML 语法规范
基本语法概述
- HTML 标签是由尖括号包围的关键词, 如
<html> - HTML 标签通常成对出现, 如
<html> </html> - 少数单标签, 如
<br />
标签关系
- 包含关系
- 并列关系
HTML 基本结构标签
第一个 HTML
每个网页都有基本的结构标签(骨架标签)
| 标签名 | 定义 | 说明 |
|---|---|---|
<html> </html> |
HTML 标签 | 页面中最大的标签, 称为 根标签 |
<head> </head> |
文档的头部 | head 标签中必须设置 title 标签 |
<title> </title> |
文档的主题 | 让网页拥有标题 |
<body> </body> |
文档的主体 | 元素包含文档中的所有内容 |
<html>
<head>
<title> 第一个HTML 网页</title>
</head>
<body>爆炸吧现实, 粉碎吧精神, 放逐这个世界!
</body>
</html>
显示的结果如下:
网页开发工具
此处用 vscode
VSCode 工具生成骨架标签新增代码
- 标签
- lang 语言
- charset 字符集
<!DOCTYPE html>
<html lang="zh-CN">
<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>vscode
</title>
</head>
<body>
爆ぜろリアル！弾けろシナプス！vanishment this world！
</body>
</html>
文档类型声明标签
- 当前页面采取 HTML5 版本来显示网页
lang 语言种类
<html lang="zh-CN">
- lang="en" 定义语言为英语
- lang="zh-CN" 定义语言为中文
字符集
<meta charset="UTF-8">
HTML 常用标签
标签语义
根据语义,再合适的位置添加合理的标签,使得页面结构更加清晰
标题标签 <h1>-<h6>
例:
<h1>一级标题</h1>
段落和换行标签
-
段落标签
<p>可以将 HTML 文档划分为若干段落, 例:
<p>段落标签</p> -
换行标签
<br/>将文本强制换行显示, 例:
文本<br/> -
不同: 段落标签会使得两端之间有一定垂直距离
文本格式化标签
| 语义 | 标签 |
|---|---|
| 加粗 | 或者 |
| 斜体 | 或者 |
| 删除线 | |
| 下划线 | 或者 |
<div> 和 <span>标签
没有语义, 就是用来装内容的
<div>一行只能有一个, 大盒子<span>一行可以有多个, 小盒子
例:
<div>一个div</div>
<span>span</span>
<span>span</span>
<span>span</span>
<span>span</span>
<div>一个div</div>
<div>一个div</div>
图像标签和路径
-
图像标签
<img src = "url"/>属性 属性值 说明 src 图片路径 必须属性 alt 文本 图片显示失败时候显示的文字 title 文本 鼠标悬停在图像上显示的文字 width 像素 宽 height 像素 高 border 像素 设置图像的边框粗细 -
路径(略)
超链接标签 <a>
-
语法
<a href = "跳转目标" target = "目标窗口跳出方式"> 文本或者图像</a>属性 作用 href url, 必须 taget 打开方式, 默认_self当前, _blank 新标签 -
连接分类
-
外部连接 :
<a href = "https://www.baidu.com"> 百度</a> -
内部链接: 网站内部各个页面之间的链接
<a href = "index.html"> 首页 </a> -
空链接:
<a href = "#"> 首页 </a> -
下载链接:
<a href = "文件"> 点击下载 </a> -
网页元素链接:
<a href = "url"> <img src = "img.jpg"> </a> -
锚点链接: 定位到当前页面的某个位置zz
<a href = "#barusu"> 跳转到 barusu </a> <div id = "barusu" > 巴鲁斯 </div>
-
HTML 注释和特殊字符
-
注释
<!-- some comments --> -
特殊字符
空格:
&:&之类的
HTML 标签 (下)
表格标签
表格主要作用
- 显示数据
表格的基本语法
<table>
<tr>
<th>表头</th>
<td>单元格里面的文字</td>
</tr>
</table>
<table> </table>定义表格<tr> </tr>定义表格中的行,必须嵌套在<table> </table>中<th> </th>表示 HTML 表格的表头单元格<td> </td>定义表格中的数据单元格, 必须嵌套在<tr> </tr>中
表格属性
不常用
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left, center, right | 对齐方式 |
| border | "1"或"" | 默认为"", 即无边框 |
| cellpadding | 像素值 | 规定单元边沿与其内容之间的空白, 默认1像素 |
| cellspacing | 像素值 | 规定单元格之间的空白, 默认2像素 |
| width | 像素或者百分比 | 表格的宽度 |
表格结构标签
<thead> </thead>表格的头部区域, 必须包含<tr>标签<tbody> </tbody>表格的主体区域
<!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>
<table align="center" border="1" cellspacing="0" cellpadding="10">
<thead>
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td> ↓</td>
<td>345</td>
<td>123</td>
<td><span> <a href="https://tieba.baidu.com/f?fr=wwwt&ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF"
target="_blank">贴吧</a></span><span> <a
href="https://image.baidu.com/search/index?tn=baiduimage&ps=1&ct=201326592&lm=-1&cl=2&nc=1&ie=utf-8&word=%E9%AC%BC%E5%90%B9%E7%81%AF"
target="_blank">图片</a></span><span> <a
href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin"
target="_blank">百科</a></span> </td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td> ↓</td>
<td>345</td>
<td>123</td>
<td><span> <a href="https://tieba.baidu.com/f?fr=wwwt&ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF"
target="_blank">贴吧</a></span><span> <a
href="https://image.baidu.com/search/index?tn=baiduimage&ps=1&ct=201326592&lm=-1&cl=2&nc=1&ie=utf-8&word=%E9%AC%BC%E5%90%B9%E7%81%AF"
target="_blank">图片</a></span><span> <a
href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin"
target="_blank">百科</a></span> </td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td> ↓</td>
<td>345</td>
<td>123</td>
<td><span> <a href="https://tieba.baidu.com/f?fr=wwwt&ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF"
target="_blank">贴吧</a></span><span> <a
href="https://image.baidu.com/search/index?tn=baiduimage&ps=1&ct=201326592&lm=-1&cl=2&nc=1&ie=utf-8&word=%E9%AC%BC%E5%90%B9%E7%81%AF"
target="_blank">图片</a></span><span> <a
href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin"
target="_blank">百科</a></span> </td>
</tr>
</tbody>
</table>
</body>
</html>
合并单元格
-
合并单元格的方式: 添加对应属性
-
跨行合并
rowspan= "合并单元格的个数"最上侧单元格为目标单元格, 写合并代码
-
跨列合并
colspan = "合并单元格的个数"
最左侧单元格为目标单元格, 写合并代码
-
-
注意: 被合并的单元格不用写出
表格总结
列表标签
列表的作用
- 用来布局, 显得整齐有序
无序列表
语法如下:
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
<ul> </ul>中只能嵌套<li> </li><li> </li>可以容纳任何元素- 无序列表的样式属性通常通过 CSS 设置
有序列表
语法如下
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
<ol> </ol>中只能嵌套<li> </li><li> </li>可以容纳任何元素- 有序列表的样式属性通常通过 CSS 设置
自定义列表
常用于对术语或者名词进行解释和描述, 自定义列表的的列表项前没有任何的项目符号
<dl>
<dt>名词1</dt>
<dd>名词1 解释1</dd>
<dd>名词1 解释2</dd>
</dl>
<dl> </dl>里面只能包括<dt> </dt>和<dd> </dd><dt> </dt>和<dd> </dd>个数无限制, 一般一个<dt>对应多个<dd>
表单标签
表单域
- 一个包含表单元素的区域
- 用
<form>标签来定义表单域, 把范围内表单元素信息提交给服务器
<form action = "url" method = "提交方式" name = "表单域名称">
各种表单元素控件
</form>
常用属性:
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url | 指定接收并处理表单数据的服务器地址 |
| method | get/post | 用于设置表单数据的提交方式, 其取值为 get 或 post |
| name | 名称 | 指定表单的名称, 用于区分 |
表单控件
<input>表单元素
<input type = "属性值"/>
<input>为单标签- type 属性指定不同的控件类型
type 属性:
| 属性值 | 描述 |
|---|---|
| button | 可点击按钮, 结合 js |
| checkbox | 复选框 |
| file | 定义输入字段和"浏览按钮", 上传文件用 |
| hidden | 定义隐藏的输入字段 |
| image | 定义图像形式的提交按钮 |
| password | 密码 |
| radio | 单选按钮 |
| reset | 重置按钮 |
| submit | 提交, 表单数据发送给服务器 |
| text | 单行的输入字段, 默认 20 字符宽 |
除了 type 属性, <input> 标签具有的其他属性:
| 属性 | 属性值 | 描述 |
|---|---|---|
| name | 自定义 | input 元素的名称, 单复选框需要有相同的 name 值 |
| value | 自定义 | input 元素的默认的值 |
| checked | 规定该元素首次加载即被选中 | |
| maxlength | 正整数 | 规定输入字符的最大长度 |
<label> 标签
<label> 用于绑定一个表单元素, 点击它的文本时, 浏览器自动将焦点转到或者选择对应的元素, 如下图:
语法:
<label for="male"> 男 </label>
<input type = "radio" name = "sex" id = "male"/>
<label>的for属性应当与相关元素的id属性一致
<select> 表单元素
下拉列表:
语法
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>
<textarea> 表单元素
输入多行文本, 常用于留言板, 评论框