HTML基础

发表于 更新于
啊啊啊又要开学啦！！睡个觉看个剧一天就没啦！日子过得飞快。简单记了点HTML的基础部分，一边学一边忘。

编辑器：VScode

自用的VScode插件：

  1. Browser Preview : 浏览器内嵌在VScode拆分页
  2. Live Server ：在本地生成静态和动态页面

可能会用到的快捷键：

  1. ctrl + end：光标从头选中一行
  2. ctrl + home：光标从尾选中一行
  3. ctrl + enter：在下行插入空行
  4. ctrl + ` ：打开集成终端
  5. shift + alt + ↓ 和 ↑：向下复制一行
  6. alt + ↓ 或 ↑：快速移动一行
  7. alt + 鼠标左键：多光标
  8. alt + d：转到相同元素的下一个，并开启多光标
  9. shift + alt + A ：块注释
  10. 标签 + Tab：快速补全

教程：

视频 千锋教育

文档 W3school


一、介绍

1. 三剑客

HTML：结构->房子的结构
CSS：样式->房子的装修
JavaScript：行为->房子的家具

2. HTML基本结构

定义：超文本 标记 语言
超文本：文本内容 + 非文本内容（文字类信息之外信息：图片、视频、音频等）
标记：HTML语法，也叫标签 <header>

1. 标签

写法分为两种：

  • 单标签 <br />
  • 双标签 <header></header>
    上下排列、可以嵌套

HTML5标签含义之元素周期表

2. 属性

来修饰标签，设置当前标签的一些功能
<标签 属性="值1" 属性2="值2">

1
2
3
<header title="hello">
    hello world
</header>

3.初始代码

每个.html文件都有的代码叫做初始代码，要符合html文件的规范写法
使用! + Tab生成初始代码，默认生成的代码如下

1
2
3
4
5
6
7
8
9
10
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

介绍

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>				   文档申明：告诉浏览器这是一个html文件
<html lang="en">			   html最外层标签：包裹着所以html标签代码
    						  lang="en"表示是一个英文网站
<head>
    <meta charset="UTF-8">	    元信息：编写网页的辅助信息，采用国际编码
    <title>
        Document			   浏览器页面的标签，网页标题
    </title>				
</head>
<body>
    content					   显示内容的区域
</body>
</html>

body中的属性：
< body bgcolor="red">红色背景
< body text="#0000ff">蓝色文本
< body link="blue">链接为蓝色
< body vlink ="#H0000">设置已使用的链接的颜色
< body alink ="yellow">设置正在被击中的链接的颜色

4. 注释

<!-- 已被注释 -->

5. HTML语义化

概念：根据网页中内容的结构，选择适合的HTML标签进行编写。

好处：

  1. 在没有CSS的情况下，页面也能呈现出很好的内容结构。
  2. 有利于SEO，让搜索引擎爬虫更好的理解网页。
  3. 方便其他设备解析（如屏幕阅读器、盲人闯读器等）。
  4. 便于团队开发与维护。

6. 标题与段落

  1. 标题
    双标签：<h1></h1> 到 <h6></h6> 共六级
    在一个网页中，h1标题最重要，且一个.html只能出现一次，其他级随意
    h5 , h6标签不常使用

  2. 段落
    双标签：<p></p> 一个p标签就是一个段落

7. 强调

  • 粗体<strong></strong>
  • 斜体<em></em>，比粗体的强调更轻
  • 设置字体大小<font size=""></font>，1~7
  • 设置字体的颜色<font color = ""></font>，使用名字或RGB的十六进制值
  • 下标<sub></sub>比如H<sub>2</sub>O表示H2O
  • 上标<sup></sup>比如X<sup>2</sup>表示X2
  • 删除文本（狗头线）：<del></del>
  • 插入文本（下划线）：<ins></ins>
  • 水平线---：<hr>
    <hr size="1">厚度=1
    <hr width="1">宽度可以是百分比或者绝对值
    <hr noshade>没有阴影的水平线

8. 图片

单标签：<img src="" alt=""> alt提示当且仅当图片有问题时会显示

属性：

  • titile：<img src="" alt="" title="inf">鼠标停滞时，提示信息inf

  • width、height：图片的大小，也可以使用CSS来设置
    <img src="" alt="pic" width="500" height="500">
    当图片未设置大小时，也会按照图片默认大小展示。对此不同之处在于：当网络加载速度很慢时，已设置完图片大小的标签，加载完图片前会预留图片的空位；而未设置大小属性的图片则不会。

9. 文件

相对路径和绝对路径
巨硬很喜欢反斜线 \，但是网络地址只允许斜线 /，不要被巨硬带偏

10. 链接

1. 链接：

双标签：<a></a>
默认方式下，会在当前页面打开链接

属性：

  • href：链接地址，需要指明网络协议，https中的secure随意填写

    1
    <a href="http://www.baidu.com">百度一下</a>

  • target：可以改变链接打开方式，是否新建页面打开链接
    默认在当前页面打开 _self
    在新建页面打开 _blank

2. 默认设置：

单标签：<base>
改变链接的默认行为

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <base target="_self">       <!--默认在当前页面打开_self-->
</head>
<body>
    <a href="www.baidu.com">访问百度</a>    <!--未填协议，不能访问-->
    <a href="http://www.baidu.com" target="_self">访问百度</a> <!--可以访问-->
    <a href="https://www.baidu.com" target="_blank">访问百度</a> <!--可以访问-->
</body>
</html>

11.跳转锚点

  • 方法1：#号 + id
    起点：<a href="#html"> HTML </a>
    终点：<h2 id="html"> </h2>

  • 方法2：#号 + name (类似goto+flag：)
    起点：<a href="#html"> HTML </a>
    终点：<a name="html"> </a>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
    <h1>
        <a href="#html">HTML</a>
        <a href="#CSS">CSS</a>
        <a href="#JavaScript">JavaScript</a>
        <a href="#Python">Python</a>
    </h1>
    <h2 id="html">HTML超文本标记语言
        <p>这是一个段落</p>
        <p>这是一个段落</p>
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    </h2>
    <h2 id="CSS">CSS层叠样式表
        <p>这是第二个段落</p>
        <p>这是第二个段落</p>
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    </h2>
    <h2 id="JavaScript">JS脚本
        <p>这是第三个段落</p>
        <p>这是第三个段落</p>
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    </h2>
    <a name="Python"></a>
    <h2>Python
        <p>这是第四个段落</p>
        <p>这是第四个段落</p>
    </h2>
</body>
</html>

12.特殊符号

一些符号不能输出；需要进行转义：可以采用特殊符号

特殊字符 含义 特殊字符代码
[space] 空格符 &nbsp;
© 版权 &copy;
® 注册商标 &reg;
< 小于号 &lt;
> 大于号 &gt;
& 和号 &amp;
¥ 人民币 &yen;
° 摄氏度 &deg;

给HTML表示为<HTML>可以这样 &lt;HTML&gt;
要使得空格生效 hello &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; world

13.列表

1. 无序列表

<ul><li> </li></ul> ：列表的最外层容器、列表顶
嵌套规范：ul和li必须是组合出现的，他们之间不能夹有其他标签
tips：若想快速创建5个<li> </li>标签，可以li*5 + Tab

属性：

  • type：（一般用CSS实现）
值 描述
disc 实心圆（默认值）
circle 空心圆
square 实行方块 
1
2
3
4
<url type="circle">
    <li><a href="#"><strong>第一项</strong></a></li>
    <li>第二项</li>
</url>

2. 有序列表

<ol><li> </li></ol> ：列表的最外层容器、列表
一般用的比较少，可以用无序列表代替

属性：

  • type：(一般用CSS实现)
值 描述
1 ( 1 , 2 , 3 , 4 )
a ( a , b , c , d )
A ( A , B , C , D )
i 罗马字母小写
I 罗马字母大写

3. 定义列表

列表项需要添加标题进行描述的内容时，常用于footer

<dl> </dl>：定义列表
<dt> </dt>：定义专业术语或名词
<dd> </dd>：对名词进行解释和描述

1
2
3
4
5
6
7
8
9
10
11
12
13
<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言</dd>
    <dd>超文本标记语言</dd>
    
    <dt>CSS</dt>
    <dd>层叠样式表</dd>
    <dd>层叠样式表</dd>
    
    <dt>JavaScript</dt>
    <dd>网页脚本语言</dd>
    <dd>网页脚本语言</dd>
</dl>

4. 嵌套列表

一个层级的列表下的<li> </li>目录里可以嵌套另外的列表

14.表格标签

<table> </table>：表格的最外层容器
<tr> </tr>：定义表格行
<th> </th>：定义表头
<td> </td>：定义表格单元
<caption> </caption>：定义表格标题
之间有嵌套关系，需要符合嵌套规范

语义化标签：有利于形成标准，团队合作和爬虫
<tHead></tHead>
<tBody></tBody>
<tFood></tFood>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<table>
    <caption>天气预报</caption>
    <tHead>
        <tr>
            <th>日期</th>  
            <th>天气</th>
        </tr>
    </tHead>
    <tBody>
        <tr>
            <td>2020年1月1日</td>
            <td>阴天</td>
        </tr>
        <tr>
            <td>2020年1月1日</td>
            <td>雨天</td>
        </tr>
        <tr>
            <td>2020年1月1日</td>
            <td>晴天</td>
        </tr>
    </tBody>
    <tFood></tFood>
</table>

  • 属性
    border：表格边框
    cellpadding：单元格内的空间
    cellspacing：单元格之间的空间
    rowspan：合并行
    colspan：合并列
    align：左右对齐方式
    valign：上下对齐方式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    <table border="1" cellpadding="30" cellspacing="30" >
        <caption>天气预报</caption>
        <tHead>
            <tr>
                <th colspan="2">日期</th>  
                <th>天气</th>
            </tr>
        </tHead>
        <tBody>
            <tr>
                <td rowspan="2">2020年1月1日</td>
                <td>白天</td>
                <td>阴天</td>
            </tr>
            <tr>
                <td>晚上</td> 
                <td>雨天</td>
            </tr>
            <tr>
                <td rowspan="2">2020年1月2日</td>
                <td>白天</td>
                <td>晴天</td>
            </tr>
            <tr>
                <td>网上</td>
                <td>晴天</td>
            </tr>
        </tBody>
        <tFood></tFood>
    </table>

  • 表格的边框显示状态属性 frame
    <table frame="边框显示值">

    frame的值 描述
    box 显示整个表格边框
    void 不显示表格边框
    hsides 只显示表格的上下边框
    vsides 只显示表格的左右边框
    alove 只显示表格的上边框
    below 只显示表格的下边框
    lhs 只显示表格的左边框
    rhs 只显示表格的右边框

  • W3schoolHTML表格

15.表单标签

<form></form>：表单的最外层容器，对于嵌套没有规则
<input>：标签用于搜索用户的信息，根据不同的type属性值，展示不同的控件，比如输入框、密码框、复选框等
常用属性：checked、disabled、name、for …

type属性 含义
text 普通的文本输入框
password 密码输入框
checkbox 复选框
radio 单选框
file 上传文件
submit 提交按钮
reset 重置按钮 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<form action="http://www.baidu.com">
    <h2>输入框</h2>
    <input type="text">   
    <h2>密码框</h2>
    <input type="password">
    <h2>复选框</h2>
    <input type="checkbox" checked="checked">苹果
    <input type="checkbox">栗子
    <input type="checkbox" disabled>香蕉
    <h2>单选框</h2>
    <input type="radio" name="sex" id="man"><label for="man">男</label>
    <input type="radio" name="sex" id="woman"><label for="woman">女</label>
    <h2>上传文件</h2>
    <input type="file" multiple>
    <h2>提交按钮</h2>
    <input type="submit">
    <input type="reset">
</form>

<textarea></textarea>：多行文本框，与自带的俩属性cols、rows配合
<select></select> <option></option>：下拉菜单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<form>
    <textarea cols="30" rows="10"></textarea>
    <h2>下拉菜单</h2>
    <select>
        <option selected disabled>请选择</option>
        <option>北京</option>
        <option>上海</option>
    </select>
    <select size="2">
        <option>北京</option>
        <option>上海</option>
    </select>
        <select multiple>
        <option>北京</option>
        <option>上海</option>
    </select>
</form>

16.块

<div> </div>(块)：div全称为divisision，“分割、分区”的意思，<div>标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。HTML中大多数的标签都可以嵌套在<div>标签中，<div>中还可以嵌套多层<div>，用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。
span(内联)：用来修饰文字

  • div与span都没有任何默认样式，需要配合CS5才行。
1
2
3
4
5
<div>
    <h2>
        这是一个 <span>块</span>
    </h2>
</div>