Web前端学习：HTML基础【入门宝典】

街三仔

已于 2022-09-14 09:41:21 修改

阅读量4.5k

点赞数 26

分类专栏： Web前端学习文章标签：学习

于 2022-03-11 17:05:01 首次发布

本文链接：https://blog.csdn.net/Oh_Python/article/details/123415920

版权

Web前端学习专栏收录该内容

9 篇文章 28 订阅

订阅专栏

一、HTML简介

什么是HTML？

HTML(HyperText Markup Language) 超文本标记语言，是一种用于创建网页的标准标记语言。

HTML有什么作用？

用于创建网页

1、HTML的特点

HTML不是编程语言，而是标记语言。
HTML使用标签的形式来标识网页的不同组成部分
HTML文档包含了HTML标签和文本
HTML文档又叫做Web页面
HTML文档的后缀：html 或 htm

2、HTML元素语法

HTML 元素以开始标签起始
HTML 元素以结束标签终止（双标签）
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（单标签）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

3、示例

在python编辑器中创建一个HTML文件，下图是新创建HTML文件中自动生成的内容。

然后在HTML文件中写入一些数据，注意：斜杠表示结束的意思

写入数据后，点击运行，会生成一个网页

二、HTML文档注释

html文档代码中可以插入注释﹐注释是对代码的说明和解释﹐注释的内容不会显示在页面上﹐ html代码中插入注释的方法是︰

运行结果

三、HTML标签

1、HTML的标签的认识

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

成对出现的标签就是双标签，单个出现的就是单标签

标签在页面上会显示成一个方块，分为两类：

块元素：在布局中默认会独占一行，块元素后的元素需换行排列。
内联元素：元素之间可以排列在一行，设置宽高无效，它的宽高由内容撑开。

双标签：开始标签和结束标签

例如：<h1></h1>~<h6></h6>、<p></p>、<a></a>、<span></span>

单标签：只有开始标签

例如：<img>

块元素（会进行换行）

例如：<h1></h1>~<h6></h6>、<p></p>、列表标签

行内元素（不会换行）

例如：<a></a>、<span></span>、<img>

2、HTML常用标签的使用

标题标签：<h> </h>

表示文档的标题，除了具有块元素的基本特性外，还含有默认的外边距和字体大小。

在HTML文件中写入标题标签以及内容

运行结果

段落标签：<p></p>

<p></p>表示一个文档中的文字段落

运行结果：

换行标签：<br>

换行标签一般和段落标签一起使用：

<p>第一行<br>第二行</p>

运行结果和解析：

超链接标签：<a></a>

<a></a>链接到另一个网页的href

演示如下：

运行结果如下：

鼠标点击”跳转到百度“就会执行页面跳转

通用内联容器标签：<span></span>

演示如下：

运行结果：

图片标签（单标签）：<img>

<img>在网页中插入图片：src（图片的路径）,alt（当图片不存在时，用来说明）

演示如下：

（1）在HTML文件的目录下放置一张图片

（2）在HTML文件中写入内容

（3）运行结果：

（3）演示图片不存在时的情况

运行结果：

3、HTML文本格式化

标签	描述
<b> / <strong>	定义粗体文本
<i> / <em>	定义斜体文本
<sub> / <sup>	定义下标字与上标字
<small> / big	定义小号字与大号字
<ins>	定义插入字
<del>	定义删除字

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML文本格式化</title>
</head>
<body>
    北京
    <!--定义粗体文字-->
    <b>北京</b>
    <strong>北京</strong>

    <!--定义斜体文字-->
    <i>故宫</i>
    <em>故宫</em>

    <!--定义上标字-->
    h<sup>+</sup>
    <!--定义下标字-->
    h<sub>2</sub>o

    <!--定义小号字与大号字-->
    <small>A</small>
    <big>A</big>

    <!--定义插入字-->
    <ins>插入字</ins>

    <!--定义删除字-->
    <del>删除字</del>
</body>
</html>

运行结果：

4、HTML列表——无序与有序

HTML列表——无序

无序列表默认属性是disc，disc定义一个实体圆，所以disc不用刻意去设置这些属性都是通过type来定义的。

circle是定义一个空心圆

square定义实体方块

演示如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML列表</title>
</head>
<body>
    <ul type="square">
        <li>A</li>
        <li>B</li>
        <li>C</li>
    </ul>
</body>
</html>

运行结果：

HTML列表——有序

有序列表默认是数字往下计数的

type：规定列表的序号类型（1,A,a,I,i）

演示如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML列表</title>
</head>
<body>
    <ol>
        <li>第一</li>
        <li>第二</li>
        <li>第三</li>
    </ol>
</body>
</html>

运行结果：

5、html表格

常用表格属性

属性名	属性
border	边框属性，如果不定义边框属性，表格将不显示边框
cellspacing	单元格间距，设置单元格与单元格之间的距离
width	设置表格的宽度
height	设置表格的高度
align	设置表格在网页中的水平对齐方式

构建表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML列表</title>
</head>
<body>
    <table border="1" style="width:200px;height:100px">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr>
            <!--align="center"表示将文本信息放在正中央-->
            <td align="center">张三</td>
            <td>18</td>
            <td>男</td>
        </tr>
    </table>
</body>
</html>

运行结果如下：

6、HTML属性

HTML 元素可以设置属性

属性可以在元素中添加附加信息属性一般描述于开始标签

属性总是以名称/值对的形式出现，比如：name="value"。

HTML常用属性

属性	描述
id	规定元素的唯一id
name	规定元素的唯一名字
style	规定元素的行内样式（inline style)
class	规定元素的类名（classname）
hidden	hidden 属性规定对元素进行隐藏
type	规定元素的类型

注意：id具有唯一性，而class是可以声明多个的，图解如下：

四、div元素和flex布局

1、div元素简介

<div> 可定义文档中的分区或节（division/section）。

<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。

<div> 是一个块级元素，也就是说，浏览器通常会在 div 元素前后放置一个换行符。提示：请使用

<div> 元素来组合块级元素，这样就可以使用样式对它们进行格式化

2、div元素使用案例

案例一

使用<div>元素来组合块级元素（这样就可以使用格式对它们进行格式化）

格式化：一个<div>元素中设置其内容的颜色格式：red，div元素中的<h1>和<p>标签的内容都变成了红色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML列表</title>
</head>
<body>
    <div id="div1" style="color:red">
        123
        <h1>123</h1>
        <p>123</p>
    </div>
</body>
</html>

运行结果：

案例二：flex布局

使用<div>元素，做出红、黑、蓝这三个正方体

下面的代码可以理解为农民分地问题

三个村民通过：<div id="div1" style="width:300px;height:300px;display:flex">申请得一个高为300px，宽为300px的地，然后开始平分，每一位村民得到的地为高100px，宽100px的地，并分别用红、黑、蓝三种颜色进行区分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML列表</title>
</head>
<body>
    <div id="div1" style="width:300px;height:300px;display:flex">
        <div style="width:100px;height:100px;background-color:red"></div>
        <div style="width:100px;height:100px;background-color:black"></div>
        <div style="width:100px;height:100px;background-color:blue"></div>
    </div>
</body>
</html>

运行结果：

五、input及from标签

1、input标签类型和基本使用

text类型

输入的是一个文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML列表</title>
</head>
<body>
    <input type="text" name="name">
</body>
</html>

运行结果

password类型

输入的是一个不可见的文本

<!--name可随便设置-->
<input type="password" name="pwd">

运行结果：

button类型

设置一个可点击的按钮

<!--value是显示在按钮上的信息-->
<input type="button" name="btn" value="点我">

运行结果：

file类型

定义输入字段和”浏览“按钮，供文件上传

<input type="file" name="uploadFile">

运行结果：

点击”选择文件“后弹出文件夹，供文件上传

radio类型

定义单选按钮

<input type="radio" name="radio">

运行结果：

生成一个按钮，点击变蓝

checkbox类型

定义复选框

<input type="checkbox" name="checkbox">读书
<input type="checkbox" name="checkbox">写字
<input type="checkbox" name="checkbox">画画
<input type="checkbox" name="checkbox">运动

运行结果：

生成一个复选框，点击后变蓝

2、from标签

<form> 标签用于创建供用户输入的 HTML 表单。

<form> 元素包含一个或多个的表单元素

action属性：表单提交URL

method属性：表单提交方式（get/post）

<!--例-->
<form action="" method="get"></form>

运行结果：

出现网页后，点击网页检查，进行抓包，会看到网页的请求方式是get请求

街三仔

关注

26
点赞
踩
157

收藏

觉得还不错? 一键收藏
打赏
2
评论
Web前端学习：HTML基础【入门宝典】

一、HTML简介什么是HTML？HTML(HyperText Markup Language) 超文本标记语言，是一种用于创建网页的标准标记语言。1、HTML的特点（1）HTML不是编程语言，而是标记语言。（2）HTML使用标签的形式来标识网页的不同组成部分（3）HTML文档包含了HTML标签和文本（4）HTML文档又叫做Web页面（5）HTML文档的后缀：html 或 htm2、HTML元素语法（1）HTML 元素以开始标签起始（2）HTML 元素以结束标签终止
复制链接

扫一扫