学点东西

时间 2021-02-20

标签 html 工具开发工具网站 this url spa code htm 栏目 HTML 繁體版

原文原文链接

HTML 标签 (上)

HTML 语法规范

基本语法概述

HTML 标签是由尖括号包围的关键词, 如 <html>
HTML 标签一般成对出现, 如<html> </html>
少数单标签, 如 <br />

标签关系

包含关系
并列关系

HTML 基本结构标签

第一个 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">ui

HTML 经常使用标签

标签语义

根据语义,再合适的位置添加合理的标签,使得页面结构更加清晰this

标题标签 `<h1>-<h6>`

例:url

<h1>一级标题</h1>

段落和换行标签

段落标签 <p>spa

能够将 HTML 文档划分为若干段落, 例:code
```
<p>段落标签</p>
```
换行标签 <br/>htm

将文本强制换行显示, 例:
```
文本<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 新标签

属性	做用
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 注释和特殊字符

注释
```

```
特殊字符

空格:   &: & 之类的

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> &#8595</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> &#8595</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> &#8595</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 = "合并单元格的个数"
  最左侧单元格为目标单元格, 写合并代码
注意: 被合并的单元格不用写出