嚎羸的博客

因为Hexo是静态博客，部署多有不便，建议查看我的语雀文档

0%

03、HTML

发表于 更新于 分类于 ，
HTML

前言

感谢

基本概念

HTML的基本概念

HTML：Hyper Text Markup Language：超文本标记语言

  • 超文本：使用超链接的方法，将不同空间的信息组合到一起的网状文本
  • 标记语言：由各个标签组成的语言，标记语言不是编程语言

MDN

前端开发非常有名的网站。

几乎所有前端开发的知识在前面都可找到，而且更加细致和权威

JavaScript高级程序设计（第四版）

推荐这本书，前端入门非常好的一本书

快速入门

基础

  1. HTML文本的后缀是.html或者.htm
  2. 标记语言基本形式
    • 基本形式：<div></div>：有开始标签，有结束标签
    • 自闭合形式：<br/>：开始和结束标签在一起
  3. 标签可以进行嵌套，但是只能是父子关系，不可以是平行关系，比如：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    父子关系，允许
    <body>
        <div>
        </div>
    </body>
    平行关系，不允许
    <body>
        <div>
    </body>
    	</div>
  4. html标签不区分大小写

语法

文件标签

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    
</body>
</html>

以上标签构成了基本的html，分为：

  • ：html的根标签，所有的标签都要写在根标签内
  • ：html的头标签，一般用于指定一些属性，引入外部资源
  • ：标题，指定了标题
  • ：内容体，我们一般写在这里

文本标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- 1. 注释 -->

<!-- 2. 标题
    <h1></h1>
    <h2></h2>
    <h3></h3>
    <h4></h4>
    <h5></h5>
    <h6></h6>
    
    以上的六个标题从h1-》h6依次减小

    标题占用一整行，人称块级标签
-->

<!-- 3. 换行
    <br/>，也可以写为<br>
-->

image-20200821145721101

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- 4. 水平线（分割线）
    <hr>
-->

<!-- 5. 加粗
    <b></b>
-->

<!-- 6. 字体，现在不建议使用了，使用css
    <font></font>
-->

<!-- 7. 文本居中，现在不建议使用了，使用css
    <center></center>
-->

image-20200821145836064

image-20200821145905961

段落标签

p

使用p标签包裹的标签，都会形成一个段落，段落与段落之间有一个空隙，这是因为p标签会在下方加入一个边距

pre

pre和p的区别，或者说其他标签和pre的区别就是：

  • p中的折行和多个空格只会看为一个空格，这是HTML本身的特性：自动忽略多余一个的空格
  • pre会保留HTML中写的样式，不用使用 br 标签和转义字符 & nbsp;

图片标签

1
2
3
<!-- 图片标签，src是图片路径，alt是当不显示图片的时候显示的内容
    <img src="" alt="">
-->

假如我想要让图片保持长宽比，只写width或者height属性即可

H5有一些属性可以让图片自动进行裁切，比如：

object-fit（css的属性）

  • fill：拉伸
  • contain：缩小以适应外面盒子的长宽，保证图片是完整显示的，会留下缝隙
  • cover：裁剪
  • none：不变

列表和链接

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!-- 1. 列表
    有序列表
        <ol>
            <li></li>
            <li></li>
        </ol>

    无序列表
        <ul>
            <li></li>
            <li></li>
        </ul>
-->


<!-- 2. 链接
    <a href="" target=""></a>
    - href：路径
    - target：打开资源的方式
        - _self：默认值，在当前页面打开
        - _blank：新建页面打开
-->

image-20200821150020092

image-20200821150113032

1
2
3
4
5
6
7
8
<!-- 自定义列表 -->
<dl>
    <dt>列表</dt>
    <dd>1</dd>
    <dd>2</dd>
    <dd>3</dd>
    <dd>4</dd>
</dl>

自定义列表，非常重要，dl中编写dt和dd

dt指的是列表项，dd指的是列表项内容

容器

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

<!-- 1.容器 
    <div></div>
    <span></span>

    容器是比较重要的东西，它本身并不代表任何东西，但正因为这种属性，才表明了它什么东西都可以放进去

    div：它本身占满一整行，和它平级的标签都得靠下走或者向上走，人称块级标签
    span：在一行显示，可以和别的标签共存，人称行内标签，或者叫内联标签

-->

<!-- 2.页眉和页脚
    <header></header>：页眉
    <footer></footer>：页脚
-->

与DIV相似的其他标签

  • div
  • section
  • header
  • footer
  • nav
  • article

上面都可以看作div的别名，区别就是你看到这个标签知道是什么意思，自己开发的时候比较好理解

表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- 表格
    <table>
        <caption>表格标题</caption>
        <thead>表头</thead>
        <tbody>
            <tr>
                <td>hello</td>
            </tr>
        </tbody>
        <tfoot>表格脚</tfoot>
    </table>    

    table：表格
    caption：表格标题
    thead：表头
    tfoot：表格脚
    tr：行
    td：列
        - colspan：占用几列
        - rowspan：占用几行
-->

image-20200821150232745

视频音频

1
2
3
4
5
6
7
8
<!-- 视频音频
    <video src="" controls loop autoplay></video>

    src：地址
    controls：播放和暂停
    loop：循环
    autoplay：自动播放
-->

内联框架

1
2
3
4
<!-- 内联框架
    <iframe src="" name=""></iframe>
    src：引用页面地址
-->

image-20200821151945361

表单

form

1
2
<form action="" method="">
</form>

from表单，一般用来提交，基本上可以和任意标签进行联动，现在来讲解一下

  • action：要跳转的路径
  • method：提交的方式
    • get：直接把参数放到网址上明文显示，安全性很差，但是胜在简洁
    • post：把参数放到请求中发送过去，比get安全，比get略微麻烦一些

input

  • 前言

开始之前要说明一下。

如果真的要上传表单，input中的值是key-value形式的

name是key，value是value

  • 文本框
1
<input type="text" name="text" value="文本框" size="30" maxlength="20">
  • name：文本框名字
  • value：文本框初始值
  • size：文本框长度
  • maxlength：最多可以输入的字符

image-20200821152953156

  • 密码框
1
<input type="password" name="password" value="密码框" size="30">

image-20200821153101168

  • 单选按钮
1
2
<input type="radio" name="radio" checked value="男"/>
<input type="radio" name="radio" value="女"/>
  • type=“radio”：类型是单选按钮
  • name：同一组的name必须相同
  • checked：选中的属性
  • value：值
  • 复选框
1
2
<input type="checkbox" name="checkbox" checked value="男"/>
<input type="checkbox" name="checkbox" value="女"/>
  • checkbox：多选框
  • name：同一组的name必须相同
  • value：值
  • checked：选中的状态
  • 按钮
1
2
3
4
<input type="button" value="button">
<input type="submit" value="submit">
<input type="reset" value="reset">
<input type="image" src="" alt="">
  • button：按钮
  • submit：表单提交的按钮
  • reset：重置页面

默认是submit，也就是说默认是表单的提交

input中button的区别和button组件的区别是button是后出现的，其余没有什么区别

  • 文件
1
2
3
<form action="" method="" enctype="multipart/form-data">
    <input type="file" name="file" id="">
</form>
  • 上传文件时必须让form表单为enctype="multipart/form-data"
  • file：文件
  • 邮箱
1
<input type="email" name="email"/>
  • 网址
1
<input type="url" name="userUrl"/>
  • 数字
1
<input type="number" name="num" min="0" max="100" step="10"/>
  • 滑块
1
<input type="range" name="range" min="0" max="10" step="2"/>
  • min：最小值
  • max：最大值
  • step：步长
  • 搜索框
1
<input type="search" name="search"/>

多行文本域

1
<textarea name="showText" cols="x" rows="y">文本内容 </textarea>
  • cols：列
  • rows：行

下拉框

1
2
3
4
<select name="列表名称" size="行数">
    <option value="选项的值" selected="selected">1</option >
    <option value="选项的值">2</option>
</select>

selected：选中

HttpServer

HttpServer安装：npm i -g http-server

HttpServer可以让任何一个目录变成一个Http服务的根目录，安装完成之后使用终端直接输入http-server即可

变为Http服务就可以代表着使用HTTP协议去进行服务的提供

image-20201218101338925