HTML

# 笔记

# 一、前端介绍

前端是什么？
1）前端指的是网站前台部分，是运行在PC端，移动端等浏览器上展示给用户浏览的网页。
前端开发能干什么？

制作网页(https://www.bilibili.com/)

移动端软件

PC端软件

游戏（大部分50%游戏都是前端开发去实现的）

前端开发需要掌握什么技术？

核心技术：（HTML、CSS、 Javascript)

前端开发的就业前景

1）普遍比其他的行业薪资高。

2）初级

中级

高级

全栈

前端开发需要用什么软件？

vsCode（专业级）

webstrom、hbuilder（企业级）

Dreamweaver（小白入门级）

# 二、浏览器介绍

Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。

浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户

# 三、 HTML介绍

超文本标记语言（HyperText Markup Language），简称就是HTML, 是一种用于创建网页的标准标记语言.

HTML 不是一种编程语言，而是一种标记语言

标记语言是一套标记标签 (markup tag)

HTML 使用标记标签来描述网页

HTML 文档包含了HTML 标签及文本内容

HTML文档也叫做 web 页面

# 四、HTML 标签的定义

HTML 标记标签通常被称为 HTML 标签

HTML 标签是由尖括号包围的关键词，比如 **

HTML 标签通常是成对出现的，比如和

标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
<标签名>内容</标签名>
1

# 五、HTML元素的解释

“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思.

但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:

<p>这是一个段落。</p>

# 六、网页的基础配置

1. **<!DOCTYPE html>** 告诉浏览器，声明的文档类型
2. *
   ** 元素是 HTML 页面的根元素
3. *
   ** 元素包含了文档的元（meta）数据，如 **
   ** 定义网页编码格式为 **utf-8**
4. *
5. *
   ** 元素包含了可见的页面内容
6. *

1
2
3
4
5
6
7
8
9
10

元素定义一个大标题

  元素定义一个段落

#

<!DOCTYPE html><html>  <head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>
      <!--网页里面显示的内容，在这里写-->
       <h1>这是一个大标题</h1>
       <p>这是一个段落</p>
</body>
</html>

1
2
3
4
5
6
7
8
9
10

注意：只有

里的内容才会在浏览器中显示。

# 七、HTML 注释

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

注释写法如下:

<!--这是一个注释-->

# 八、常用标签

1、文本标签
    a、h1～h6、p、br、b、i、u、s、sub、sup

2、列表标签
    ul、li、ol

3、图片标签
    img

4、模块标签
    div、span

5、表格标签
    table 属性：border="1" 边框为1。cellspacing="0" 表格单元格空隙0。cellpadding="5" 表格单元格内边距为5（内容离边框的距离）
    tr
    td 属性：colspan横向合并单元格、rowspan纵向合并单元格
    thead
    tfoot

6、表单标签
    <form>
        <!-- 单行输入框 -->
        <label for="username">账号</label>
        <input id="username" type="text">
        <br/>

        <!-- 密码输入框 -->
        <label for="password">密码</label>
        <input id="password" type="password">
        <br/>

        <!-- 单选框 -->
        <label for="sex">性别</label>
        <input id="sex" type="radio" name="sex" value="男">男
        <input id="sex" type="radio" name="sex" value="女">女
        <br/>

        <!-- 多选框 -->
        <label for="hobby">爱好</label>
        <input id="hobby" type="checkbox" name="hobby" value="打游戏">打游戏
        <input id="hobby" type="checkbox" name="hobby" value="旅游">旅游
        <input id="hobby" type="checkbox" name="hobby" value="打篮球">打篮球
        <br/>

        <!-- 下拉选择框 -->
        <label for="city">城市</label>
        <select name="city" id="city">
            <option value="广州">广州</option>
            <option value="深圳">深圳</option>
            <option value="佛山">佛山</option>
        </select>
        <br/>

        <!-- 数字输入框 -->
        <label for="number">数字</label>
        <input id="number" type="number">
        <br/>

        <!-- 多行文本输入框 -->
        <label for="message">留言</label>
        <textarea style="resize: none;" name="message" id="message" cols="30" rows="10"></textarea>
        <br/>

        <!-- 普通按钮 -->
        <button>普通按钮</button>
        <br/>

        <!-- 提交按钮 -->
        <button type="submit">提交按钮</button>
        <br/>

        <!-- 重置按钮 -->
        <button type="reset">重置按钮</button>
        <br/>
    </form>

7、媒体标签
    audio 音频播放
    video 视屏播放 src=""资源地址 controls 控制器
8、嵌套标签

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
76
77
78
79
80

标签标签（h1~h6）

<!DOCTYPE html><html>  <head>
    <meta charset="UTF-8">
     <title>网页标题</title>
</head>
<body>
    <!--网页里面显示的内容，在这里写-->
    <h1>这是标题 1</h1>
    <h2>这是标题 2</h2>
    <h3>这是标题 3</h3>
    <h4>这是标题 4</h4>
    <h5>这是标题 5</h5>
    <h6>这是标题 6</h6>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

段落标签（p）
```
<p>这是一个段落。</p>
```
1

超链接（a）

1）在href属性中指定链接的地址

 <a href="https://www.baidu.com">这是一个链接</a>

图片（img）

1）src属性中指定图片路径

2）通过width和height属性可以设置图片尺寸

 <img src="/images/logo.png" width="258" height="39" />

水平线(hr)
1. hr 元素可用于分隔内容。

 <p>这是段落。</p> <hr /> <p>这是段落。</p>

文本加粗（b）

<b>加粗文本</b>

文本斜体（i）

<i>加粗文本</i>

文本的上标和下标(sup、sub)

我是<sup> 上标</sup>我是<sub> 下标</sub>

9.div 块状标签没有任何含义，仅用于划分区域

<div>块状标签</div>

10.span 行内标签没有任何含义，仅用于划分区域

<span>行内标签</span>

# 九、标签类型

块级标签，特点：独占一行，排斥其他标签。设置宽高、边距都生效。

例如：div 、p 、h1~h6、hr、ul-li

行内标签，特点：可以多个标签存在一行，不能直接设置行内标签的高度、宽度、行高以及顶和底边距，完全靠内容撑开宽高！

例如：span、i、a、br、sub、sup

行内块标签，特点：结合的行内和块级的有点，不仅可以对宽高属性值生效，还可以多个标签存在一行显示。

例如：img、input、textarea

总结：各个标签之间的区别

1）块标签：独自占领一行、可以进行宽高的数值的设定；

2 ）行标签：在一行内显示、不可以进行宽高的数值设定；

3）行内块标签：能和其他元素待在一行，能设置宽高；

# 十、类型转换

三种类型之间的转换

display:inline;      //转成行内元素
display:block;       //转成块级元素
display:inline-block;//转成行内块级元素

1
2
3

编辑

上次更新: 2022/04/24, 13:33:34

CSS→