前端开发入门 HTML5

发表于 更新于 分类于 阅读次数： 本文字数： 5.8k
前端开发从入门到入土之HTML。

初识HTML：两步完成一个网页程序

HTML5即超文本标记语言，用来描述网页，是一种标记语言，是一套标记标签（用尖括号包围的关键字），包括双标签和单标签，没有特殊声明，默认为双标签。

Step1

使用记事本，保存文件名 Welcome.html，写入：

1
2
3
4
5
6
7
8
<html>
  <head>
  	<title>我的第一个网页</title>    
  </head>  
  <body>
    欢迎来到王者荣耀
  </body>
</html>

Step2

使用浏览器打开你的html文件。可以看见标题出现在网页上方，body出现在正文。

前端工具

浏览器

使用 Chrome 即可，F12即可打开开发者工具。

开发者工具与常见快捷键

选择 VSCode 即可。

在VSCode中， 生成 html 内容可以输入 “! + enter”。

常用快捷键：(Windows / MacOS)

  • 代码格式化： shift + alt + F / shift + option + F
  • 将当前代码行向上或向下移动一行：alt + up/down / option + up/down
  • 将当前代码行向上或向下复制一行：alt + shift + up/down / option + shift + up/down
  • 快速保存：ctrl + s / cmd + s
  • 快速搜索：ctrl + f / cmd + f
  • 快速替换：ctrl + h / cmd + option + f

常用拓展

  • Chinese
  • open in browser（快速打开浏览器），效果为右键代码部分选择 open in default browser

HTML基本骨架

DOCTYPE声明

DOCTYPE是 document type 的缩写，处于标签最前，是网页必备的组成部分，避免浏览器的怪异模式。

1
<!DOCTYPE html>

基本骨架

html标签

定义 HTML 文档，用于浏览器识别出 HTML 文档，其他元素要包括在它里面

head标签

定义文档的头部，描述文档的各种属性和信息，包括标题、在Web中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

body标签

body 元素定义文档的主体，直接显示在页面上，给用户看到。

title标签

title 标签可定义文档的标题，显示在浏览器窗口的标题栏或状态栏上，是 head 标签中唯一必须包含的东西，即 head 里必须有 title。

meta标签

meta 标签描述 HTML 网页文档的属性，关键词等，例如：charset="utf-8" 描述编码格式。注意 meta 是一个单标签。

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="vieewport" content="width=device-width, initial-scale=1.0">
    <title>这是一个标题</title>
  </head>
  <body>
    欢迎来到王者荣耀
  </body>
</html>

HTML基本语法

标题标签 h

标题（Heading）是通过<h1>~<h6>进行定义的。

1
2
3
<h1>
  这是一级标题
</h1>

快捷键：自动生成 h1～h6：h$*6 + enter

属性：

  • align="left / center / right" 调整标题位置

段落标签 p

段落是通过 <p> 标签进行定义的。虽然显示上与不要标签直接输入文字相同，但是不要把文字写在没有标签的地方，不利于调整。

两个 p 标签自带换行。

1
2
3
4
5
6
<p>
  这是一个段落
</p>
<p>
  这是另一个段落
</p>

换行标签 br

如果希望在不产生一个新段落的情况下进行换行，使用 <br> 标签（单标签）。

1
2
3
<p>
  这个<br>段落<br>演示了分行的效果
</p>

水平线标签 hr

<hr/> 标签在 HTML 页面中创建水平线，是一个单标签。

1
<hr color="green" width="300px" size="100px" />

属性

  • color ： 设置水平线的颜色
  • width ： 设置水平线的长度
  • size ： 设置水平线的高度
  • align ： 设置水平线的对齐方式（默认居中），可取值 left / right

图片标签 img

<img> 标签定义 HTML 界面中的图像，是单标签。

1
<img src="1.webp" alt="" title="" width="" height="">

属性

  • src ： 路径（图片地址与名字，采用相对路径或绝对路径或网络路径）。
  • alt ： 规定图像的替代文本，即图片不能正确显示时的替代。
  • width： 规定图像的宽度，规定宽度是长宽等比例的改变，因此一般只改变宽度而不改变高度。
  • height ： 规定图像的高度。
  • title： 鼠标悬停在图片上给予提示。

超文本链接标签 a

HTML 使用标签 <a> 来设置超文本链接。

使用属性 href 来给定链接，必须完整（https://...）

1
<a href="url">链接文本</a>

文本标签

  • em ： 定义着重文字
  • b ： 定义粗体文字
  • i ： 定义斜体字
  • strong ： 定义加重语气
  • del ： 定义删除字
  • span ： 元素没有特定的含义

列表标签

  • ol ： 有序列表，外部用 ol，内部用 li ，ol 拥有 type 属性可以更改显示的选项，如 type="1/a/A/i/I"。
  • ul ： 无序列表，外部用 ul，内部用 li ，ul 拥有 type 属性可以更改显示的选项，如 type="disc（实心圆）/circle（空心圆）/square（方框）/null（无）"
1
2
3
4
5
<ul>
        <li>123</li>
        <li>456</li>
        <li>789</li>
</ul>

快捷键：快速生成 ul + li 的布局： ul>li*3（数字根据自己的需求修改）

表格标签

表格：<table>

行：<tr>

单元格（列）：<td>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
        <td>单元格3</td>
    </tr>
    <tr>
        <td>单元格4</td>
        <td>单元格5</td>
        <td>单元格6</td>
    </tr>
    <tr>
        <td>单元格7</td>
        <td>单元格8</td>
        <td>单元格9</td>
    </tr>
</table>

快捷键：table>tr*2>td*3{单元格信息}

合并单元格

  • 水平合并： colspan
1
2
3
4
5
6
7
8
9
10
11
12
13
</table>
<table border="1px">
    <tr>
        <td>table1</td>
        <td colspan="2">table2</td>
        <!-- <td>table3</td> -->
    </tr>
    <tr>
        <td>table4</td>
        <td>table5</td>
        <td>table6</td>
    </tr>
</table>
  • 垂直合并：rowspan

合并时仅保留最左上角的一个格子。

属性

  • border：设置表格的边框长度
  • width: 设置表格的宽度
  • height：设置表格的高度

表单标签 form

表单在 Web 网页中用来给用户填写信息，从而能采用户信息，使网页具有交互的功能。所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。

1
<form action="url" method="get|post" name="myform"></form>

属性

  • action ： 服务器地址
  • name ： 表单名称
  • method ： 提交方式，get 把提交的数据 url 可以看到， post 看不到， get一般用于提交少量数据，post 用来提交大量数据。
  • button ：一个可点击的按钮，用来出发某种操作（如提交表单、触发JavaScript）
  • checkbox ： 一个复选框，允许用户选择/取消，某一个布尔值，<input checked type="checkbox">默认勾选。
  • reset ： 重置按钮

表单元素

一个完整的表单包含三部分：表单标签、表单域（输入框）、表单按钮（提交按钮）。

文本域通过 <input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

输入密码选择 <input type="password">来设定，会隐藏输入的内容。

提交按钮为 <input type="submit" value="...">，value 属性可以替换文本。

1
2
3
4
<form>
  <input type="text">
  <input type="submit">
</form>

块元素与内联元素

块元素 内联元素
块元素会在页面中独占一行（自上向下垂直排列） 行内元素不会独占页面中的一行，只占自身的大小
可以设置width、height属性 行内元素设置width、height属性无效
一般块级元素可以包含行内元素和其他块级元素 一般内联元素包含内联元素不包含块级元素

常见块级元素

div、form、h1～h6、hr、p、table、ul等

常见内联元素

a、b、em、i、span、strong等

行内块级元素（特点：不换行、能够识别宽高）

button、img、input

HTML5新增标签

  • div：容器元素，细分页面各个功能模块。
1
2
3
<div id="header">
  ...
</div>

在 HTML5 之前，只能通过 div 里的 id 属性细分，而在 HTML5 中，存在新标签细化了 div 中的 id：（然而对于老浏览器可能存在兼容问题，如 ie ）

  • header：头部。
  • nav：导航。
  • section：定义文章中的节，如章节、页眉、页脚。
  • aside：侧边栏
  • footer：脚部
  • article：代表一个独立的、完整的相关内容块，例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等。

小实战：百度登录

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
</head>

<body>
    <form action="">
        <p>
            <img src="https://passport.baidu.com/passApi/img/loginlogo.png" alt="">
            <span>用户名密码登录</span>
        </p>
        <p>
            <input type="text" placeholder="用户名/邮箱/手机" name="uesr">
        </p>
        <p>
            <input type="password" placeholder="密码" name="pwd">
        </p>
        <p>
            <input checked type="checkbox" value="true">下次自动登录
        </p>
        <p>
            <input type="submit" value="登录">
        </p>
        <p>
            <a href="#">忘记密码</a>
        </p>
    </form>
    <div>
        <a href="#">扫码登录</a>
        <a href="#">立即注册</a>
    </div>
</body>

</html>

注意事项：

  1. 根据页面效果，选择合适的标签
  2. 标签要合理嵌套
  3. 双标签一定要闭合