- A+
所属分类：Web前端
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 = "合并单元格的个数"
最左侧单元格为目标单元格, 写合并代码
-
-
注意: 被合并的单元格不用写出
