积累沉淀

待山花烂漫，化茧成蝶

HTML-前端开发

Posted on Edited on

简介：HTML（HyperText Markup Language）是用于创建网页的标准标记语言。它通过定义一系列的标签来描述网页的内容结构，这些标签告诉浏览器如何显示内容以及内容之间的关系。HTML与CSS和JavaScript一起构成了前端开发的核心技术。

Html是什么？

全称：HypterText Markup Language, 译为：超文本标记语言

Html 标签

  1. 标签，又称元素，是HTML的基本组成单位。
  2. 标签分为：双标签与单标签。多数为双标签。
  3. 标签不区分大小写，推荐小写，小写更规范。
  4. 双标签：
1
<marquee>尚硅谷，让天下没有难学的技术！</marquee>
  1. 单标签：
1
<intput/>

HTML标签属性

  1. 用于给标签提供附加信息。
  2. 可以写在双标签或单标签中，形式如下 ：
1
2
3
4
5
<marquee loop="1" bgcolor="red" id="mar1">
    尚硅谷，让天下没有难学的技术！
    <input type="password">
</marquee>

  1. 有些特殊的属性，只有属性值没有属性名，如下：
1
<input disabled>

HTML基本结构

  1. 在网页中，如何查看在某段结构中的具体代码？ 点击鼠标右键，选择“检查”。
  2. 检查和查看网页源代码的区别：
  • 查看网页源代码是：程序员编写的源代码.
  • 检查是：经过浏览器处理过的源代码.
  • 备注：日常开发中，检查使用的多。
  1. 网页的基本结构
  • 想要呈现在网页中的内容写在 body标签中。
  • head标签中的内容不会呈现在网页中。
  • head中的title可以指定网页的标题。
  • 如下：
1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
    <title>我的网页</title>
</head>
<body>
    <marquee loop="1" bgcolor="red" id="mar1">
        尚硅谷，让天下没有难学的技术！
        <input type="password">
    </marquee>
    <input disabled>
</body>
</html>

HTML注释

形式：<!--- 这是一个注释、单行或多行 --->

HTML文档声明

形式：<!DOCTYPE html>

HTML编解码

一句话：存储方式和解码方式都使用UTF-8

1
2
3
4
<head>
    <meta charset="utf-8">
    <title>HTML文档声明</title>
</head>

HTML语言

  1. 主要作用：
    • 让浏览器显示对应的翻译提示。
    • 有利于搜索引擎的优化
  2. 格式：<html lang="zh-CN">
  3. lang 属性的编写规则
    • zh-CN :简体中文
    • zh-TW :繁体中文
    • zh :中文
    • en-US :英语-美国
    • en-GB :英语-英国
  4. 参考：

HTML标准结构

  1. vscode 输入！可以自动插入标准HTML标准结构，代码人如下：
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML标准结构</title>
</head>
<body>
    <input type="text">
</body>
</html>

HTML标签

排版标签

标签名 含义 单/双
h1—h6 标题 双
p 段落 双
div 布局 双
说明：
  • h1最好写一个，h2-h6能适当多写
  • h1-h6不能嵌套
  • p标签很特殊，它里面不能有 p div h1-h6

语义化标签

  1. 概念：用特定的标签表达特定大的语义。
  2. 原则：标签的默认效果不重要，语义更重要。
  3. 举例：h1标签表达的效果不重要，语义是网页的主要内容（很重要）。
  4. 优势：
    • 代码结构清晰可读
    • 有利于SEO（搜索引擎优化）
    • 方便设备解析（盲人阅读器、屏幕阅读器）

块级元素与行内元素

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<body>

    <!-- 块级元素特点：独占一行 -->
    <!-- <marquee>尚硅谷，让天下没有难学的技术！</marquee>
    <marquee>尚硅谷，让天下没有难学的技术！</marquee>
    <h1>尚硅谷，让天下没有难学的技术！</h1>
    <h1>尚硅谷，让天下没有难学的技术！</h1>
    <p>尚硅谷，让天下没有难学的技术！</p>
    <p>尚硅谷，让天下没有难学的技术！</p>
    <div>尚硅谷，让天下没有难学的技术！</div>
    <div>尚硅谷，让天下没有难学的技术！</div> -->

    
    <!-- 行内元素特点：不独占一行，在一行 -->
    <!-- <input type="">
    <input type="">
    <span>尚硅谷，让天下没有难学的技术！</span>
    <span>尚硅谷，让天下没有难学的技术！</span> -->

    <!-- 规则1：块级元素中能写：行内元素，块级元素（几乎都能写） -->
    <!-- <div>
        <span>尚硅谷</span>
        <span>尚硅谷</span>
        <p>尚硅谷</p>
        <div>尚硅谷</div>
    </div> -->

    <!-- 规则2：行内元素中能写：行内元素，不能写块级元素-->
     <!-- <span>
        <span>尚硅谷</span>
        <input type="text">
        <span>尚硅谷</span>
     </span> -->

     <!-- 特殊规则： h1-h6不能嵌套 -->
     <!-- <h1>
        尚硅谷
        <h2>尚硅谷</h2>
     </h1>
     <h3>尚硅谷</h3> -->

     <!-- 特殊规则：p标签不能写块元素 -->
    <p>
        尚硅谷
        <!-- <div>尚硅谷</div> -->
    </p>

</body>

常用的文本标签

  1. 用于包裹：词汇短语
  2. 通常写在排版标签里面
  3. 排版标签更宏大，文本标签更围观（词汇短语）
  4. 文本标签通常是行内元素
    常用如下：
标签名 标签语义 单双
em 要着重阅读的内容 双
strong 十分重要的内容 双
span 没有语气用于包裹短语的通用容器 双

不常用的文本标签

标签名 标签语义 单双
cite 作品标题（书籍、歌曲、电影、电视节目、绘画、雕塑） 双
dfn 特殊术语或专属名词 双
del\ins 删除的文本\插入的文本 双
sub\sup 下标\上标 双
code 一段代码 双
samp 从正常的上下文中，将某些内容提取处理，例如：表示设备输出 双
kbd 键盘文本，表示文本时键盘输入的 双
abbr 缩写，最好配上title属性 双
bdo 更改文本方向，要配合dir属性，可选值：itr、rtl 双
var 标记变量，可以与code一起使用 双
small 附属细则，例如：包括版权、法律文本（很少使用） 双
b 摘要中的关键字，评论中的产品名称（很少使用） 双
i 本意是：人物的思想活动、所说的话等等；现在多用于：呈现字体图标 双
u 与正常有反差的文本，例如：错的单词、不合适的描述等（很少） 双
q 短引用（很少使用） 双
blockquote 长引用（很少使用） 双
address 地址信息 双

备注：

  1. 这些不常用的文本标签，编码时不用过于纠结（酌情而定，不用也没毛病）。
  2. blockquote 与 address 是块级元素，其他的文本标签，都是行内元素。
  3. 有些语义感不强的标签，我们很少使用，例如：small、b、u、q、blockquote
  4. HTML标签太多了！记住那些：重要的、语义感强的标签即可；截止目前，有这些：
    h1~h6、p、div、em、strong、span

图片标签

img标签
img标签总结

图片格式

  1. jpg格式：
    概述：扩展名为.jpg或.jpeg，是一种有损的压缩格式（把肉眼不容易观察出来的细节丢弃了）。
    主要特点：支持的颜色丰富、占用空间较小、不支持透明背景、不支持动态图。
    使用场景：对图片细节没有极高要求的场景，例如：网站的产品宣传图等。一一该格式网页中很常见。
  2. png 格式:
    概述：扩展名为.png，是一种无损的压缩格式，能够更高质量的保存图片。
    主要特点：支持的颜色丰富、占用空间略大、支持透明背景、不支持动态图。
    使用场景：①想让图片有透明背景；②想更高质量的呈现图片；例如：公司logo图、重要配图等。
  3. bmp 格式:
    概述：扩展名为.bmp，不进行压缩的一种格式，在最大程度上保留图片更多的细节。
    主要特点：支持的颜色丰富、保留的细节更多、占用空间极大、不支持透明背景、不支持动态图。
    使用场景：对图片细节要求极高的场景，例如：一些大型游戏中的图片。（网页中很少使用)
  4. gif 格式:
    概述：扩展名为·gif，仅支持256种颜色，色彩呈现不是很完整。
    主要特点：支持的颜色较少、支持简单透明背景、支持动态图。
    使用场景：网页中的动态图片。
  5. webp 格式：
    概述：扩展名为.webp，谷歌推出的一种格式，专门用来在网页中呈现图片。
    主要特点：具备上述几种格式的优点，但兼容性不太好，一旦使用务必要解决兼容性问题。
    使用场景：网页中的各种图片。
  6. base64格式
    本质：一串特殊的文本，要通过浏览器打开，传统看图应用通常无法打开。
    原理：把图片进行base64编码，形成一串文本。
    如何生成：靠一些工具或网站。
    如何使用：直接作为img标签的src属性的值即可，并且不受文件位置的影响。
    使用场景：一些较小的图片，或者需要和网页一起加载的图片。

超链接

  1. 跳转链接
    a标签
    说明如下：
    a标签说明

  2. 跳转到文件
    a标签跳转到文件

  3. 跳转描点

a标签跳转描点

  1. 唤起指定应用

a标签唤起应用

列表

  1. 有序列表
    概念：有顺序或侧重顺序的列表。
1
2
3
4
5
6
<h2>要把大象放冰箱总共分几步</h2> 
<ol>
    <li>把冰箱门打开</li> 
    <li>把大象放进去</li> 
    <li>把冰箱门关上</li>
</ol>
  1. 无序列表
    概念：无顺序或不侧重顺序的列表。
1
2
3
4
5
6
7
<h2>我想去的几个城市</h2> 
<ul>
    <li>成都</li> 
    <1i>上海</li> 
    <li>西安</li> 
    <1i>武汉</1i>
</ul>
  1. 列表嵌套
    概念：列表中的某项内容，又包含一个列表（注意：嵌套时，请务必把解构写完整）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<h2>我想去的几个城市</h2>
<ul>
    <li>成都</li>
    <li>
        <span>上海</span>
        <ul>
            <li>外滩</li>
            <li>杜莎夫人蜡像馆</li>
            <li>
                <ahref="https: //www.opg.cn/">东方明珠</a>
            </li>
            <li>迪士尼乐园</1i>
        </ul>
    </li>
    <li>西安</li>
    <li>武汉</li>
</ul>

注意：li标签最好写在ul 或ol 中，不要单独使用。
4. 自定义列表
1．概念：所谓自定义列表，就是一个包含术语名称以及术语描述的列表。
2．一个dl就是一个自定义列表，一个dt就是一个术语名称，一个dd就是术语描述（可以有多个）。

1
2
3
4
5
6
7
8
9
10
<h2>如何高效的学习？</h2>
<dl>
    <dt>做好笔记</dt>
    <dd>笔记是我们以后复习的一个抓手</dd>
    <dd>笔记可以是电子版，也可以是纸质版</dd>
    <dt>多加练习</dt>
    <dd>只有敲出来的代码，才是自己的</dd>
    <dt>别怕出错</dt>
    <dd>错很正常，改正后并记住，就是经验</dd>
</dl>

表格

  1. 基本结构
  • 一个完整的表格由：表格标题、表格头部、表格主体、表格脚注，四部分组成。
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<table>
        <!-- 表格标题 -->
        <caption>学生信息</caption>
        <!-- 表头 -->
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>民族</th>
                <th>政治面貌</th>
            </tr>
        </thead>
        <!-- 表格主体 -->
        <tbody>
            <tr>
                <td>张三</td>
                <td>男</td>
                <td>18</td>
                <td>汉族</td>
                <td>团员</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>女</td>
                <td>20</td>
                <td>满族</td>
                <td>群众</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>男</td>
                <td>19</td>
                <td>回族</td>
                <td>党员</td>
            </tr>
            <tr>
                <td>赵六</td>
                <td>女</td>
                <td>21</td>
                <td>壮族</td>
                <td>团员</td>
            </tr>
        </tbody>
        <!-- 表格脚注 -->
        <tfoot>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>共计：4人</td>
            </tr>
        </tfoot>
    </table>
  • 表格涉及到的标签：
    table：表格
    caption：表格标题
    thead：表格头部
    tbody：表格主体
    tfoot：表格注脚
    tr：每一行
    th、td：每一个单元格（备注：表格头部中用th，表格主体、表格脚注中用：td）
  • 跨行跨列
    rowspan：指定要跨的行数。
    colspan：指定要跨的列数。
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<table border="1" cellspacing="0">
        <caption>课程表</caption>
        <thead>
            <tr>
                <th>项目</th>
                <th colspan="5">上课</th>
                <th colspan="2">活动与休息</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>星期</th>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
                <th>星期六</th>
                <th>星期日</th>
            </tr>
            <tr>
                <th rowspan="4">上午</th>
                <th>3---2</th>
                <th>3---3</th>
                <th>3---4</th>
                <th>3---5</th>
                <th>3---6</th>
                <th>3---7</th>
                <th rowspan="4">休息</th>
            </tr>
            <tr>
                <th>4---2</th>
                <th>4---3</th>
                <th>4---4</th>
                <th>4---5</th>
                <th>4---6</th>
                <th>4---7</th>
            </tr>
            <tr>
                <th>5---2</th>
                <th>5---3</th>
                <th>5---4</th>
                <th>5---5</th>
                <th>5---6</th>
                <th>5---7</th>
            </tr>
            <tr>
                <th>6---2</th>
                <th>6---3</th>
                <th>6---4</th>
                <th>6---5</th>
                <th>6---6</th>
                <th>6---7</th>
            </tr>
            <tr>
                <th rowspan="2">下午</th>
                <th>7---2</th>
                <th>7---3</th>
                <th>7---4</th>
                <th>7---5</th>
                <th>7---6</th>
                <th>7---7</th>
                <th rowspan="2">休息</th>
            </tr>
            <tr>
                <th>8---2</th>
                <th>8---3</th>
                <th>8---4</th>
                <th>8---5</th>
                <th>8---6</th>
                <th>8---7</th>
            </tr>
            
        </body>
    </table>

常用标签补充

标签名 标签含义 单、双标签
br 换行 单
hr 分割线 单
pre 按原文显示（一般用于在页面中嵌入大段代码） 单

注意点：

  • 不要用<br>来增加文本之间的行间隔，应使后面即将学到的cSSmargin属性。
  • <hr> 的语义是分隔，如果不想要语义，只是想画一条水平线，那么应当使用cSS完成。

表单

  1. 基本结构
1
2
3
4
5
6
7
8
9
<form action="https://www.baidu.com/s" target="_blank">
    <input type="text" name="wd">
    <button>去百度搜索</button>
</form>
<hr>
<form action="https://search.jd.com/search" target="_blank">
    <input type="text" name="keyword">
    <button>去京东搜索</button>
</form>
  1. 常用表单控件
    代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<form action="https://search.jd.com/search" target="_blank">
        <!-- 文本框 -->
        账号：<input type="text" name="account" value="zhangsan" maxlength="10">
        <!-- 密码输入框 -->
        密码：<input type="password" name="pwd" value="123" maxlength="6">
        <!-- 单选框 -->
        性别：
        <input type="radio" name="gender" value="male" checked>男
        <input type="radio" name="gender" value="female">女
        <br>
        <!-- 多选框 -->
        爱好：
        <input type="checkbox" name="hobby" value="smoke" checked>抽烟
        <input type="checkbox" name="hobby" value="drink">喝酒
        <input type="checkbox" name="hobby" value="perm" checked>汤头
        <br>
        <input type="hidden" name="from" value="toutiao">
        <br>
        <button>确认</button>
        <input type="submit" value="确认">
        <button type="reset">重置</button>
        <input type="reset">
    </form>

a. 文本输入框

1
2
3
4
5
6
7
8
9
10
<input type="text">
```   
> 常用属性如下：
> * name属性：数据的名称。
> * value属性：输入框的默认输入值。
> * maxlength属性：输入框最大可输入长度。

b. 密码输入框
```html
<input type="password">

常用属性如下：

  • name属性：数据的名称。
  • value属性：输入框的默认输入值（一般不用，无意义）。
  • maxlength属性：输入框最大可输入长度。

c. 单选框

1
2
<input type="radio" name="sex" value="female">女 
<input type="radio" name="sex" value="male">男

常用属性如下：
name属性：数据的名称，注意：想要单选效果，多个radio的name属性值要保持一致。
value属性：提交的数据值。
checked属性：让该单选按钮默认选中。

d. 复选框

1
2
3
<input type="checkbox" name="hobby" value="smoke">抽烟 
<input type="checkbox" name="hobby" value="drink">喝酒 
<input type="checkbox" name="hobby" value="perm">烫头

常用属性如下：
name属性：数据的名称。
value属性：提交的数据值。
checked属性：让该复选框默认选中。

e. 提交按钮

1
2
<input type="submit”value="点我提交表单">
<button>点我提交表单</button>

注意：

  • button标签type属性的默认值是submit。
  • button不要指定name属性
  • input标签编写的按钮，使用value属性指定按钮文字。

f. 禁用表单控件
给表单控件的标签设置disabled既可禁用表单控件。

input、textarea、button、select、option都可以设置 disabled属性

label标签

1abe1标签可与表单控件相关联，关联之后点击文字，与之对应的表单控件就会获取焦点。两种与label关联方式如下：

  1. 让label标签的for属性的值等于表单控件的id。
  2. 把表单控件套在1abe1标签的里面。

fieldset与legend的使用（了解）

fieldset可以为表单控件分组、legend标签是分组的标题。

框架标签

标签名 功能和语义 属性 单/双标签
iframe 框架（在网页中嵌入其他文件） name：框架名字，可以与target属性配合。 width：框架的宽。height：框架的高度。frameborder：是否显示边框，值：0或者1。 双

iframe标签的实际应用：

  1. 在网页中嵌入广告。
  2. 与超链接或表单的target配合，展示不同的内容。
Buy me a coffee please.