你好赵伟

这个屌丝很懒，什么也没留下！

热门标签

【前端】HTML（常用的HTML标签）

作者：你好赵伟 | 2024-04-08 08:34:50

踩

【前端】HTML（常用的HTML标签）

HTML

前端

1.什么是前端

Web前端，用来给用户呈现网页
一个软件通常由后端+前端组成

2.常见的前端页面

web页面
PC端程序页面
移动端APP页面、小程序等等

一、什么是HTML

HTML超文本标记语言

超文本：文本、声音、图片、视频、表格、连接
标记：由许多标签组成

HTML页面运行在浏览器上面（推荐Chrome）

软件：VSCode

推荐插件：自动补全、浏览器显示、同步更新

在这里插入图片描述

](https://img-blog.csdnimg.cn/direct/d5809a5b95ba40ebac4a2e996dc1cc76.png)

<>括起来的，都是HTML当中的标签

双标签：有头有尾单标签

<html>
    <head>
        <title>这是页面标题</title>
    </head>
    <body>
        这是页面内容
    </body>
</html>
1
2
3
4
5
6
7
8

html:html文件根标签
head:编写页面相关的属性
title:页面的标题
body:页面内容展示信息

DOM树： Document Object Mode (文档对象模型) 的缩写

所有的标签都是html的子标签

head和body是兄弟标签、head和title是父子标签

每一个标签相当于一个对象，相当于通过标签得到对象，进行增删查改

1.快速生成代码

VSCode 快速生成代码框架：！+ enter

IDEA 中创建文件 xxx.html , 直接输入 ! , 按 tab 键

<!DOCTYPE html>
//HTML5的文档类型声明，它告诉浏览器当前页面是使用 HTML5 规范编写的-->
<html lang="en">
//指定当前页面内容是英文
<head>
    <meta charset="UTF-8">
    //浏览器解码规则
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    //移动端适配
    <title>标题</title>
</head>
<body>
    这是页面内容 
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

二、HTML标签

0.注释

ctrl+/

  <!-- 这是注释 -->
1

在浏览器中 fn+f12,查看

1.标题

    <h1>h1</h1>
    <h2>n2</h2>
    <h3>n3</h3>
    <h4>h4</h4>
    <h5>h5</h5>
    <h6>h6</h6>
1
2
3
4
5
6

大——>小

整理快捷键：shift+alt+F

2.段落

 <P>段落</P>
1

另起一行

回车==空格
多个空格等于空格

3.换行

<br/>
1

比段落间隙小
单标签
break的缩写

4.格式化标签

企业通常借住CSS实现

前者对文本进行了强调（让爬虫获取到当前的文本）

加粗

<strong>css</strong>
<b>单位</b>
1
2

倾斜

<em>但实际情况却并非如此</em>
<i>像素</i>
1
2

删除线

<del>但实际情况却并非如此但实际情况却并非如此</del>
<s>像素</s>
1
2

下划线

<ins>面浏览器</ins>
<u>网页</u>	
1
2

5.图片标签：img

必须带有 src 属性. 表示图片的路径
alt属性

      <img src="../image/kai.jpg" alt="加载失败">
1

图片加载失败才会显示alt中的内容

title属性

    <img src="../image/kai.jpg" alt="加载失败" title="这个是我的图片">
1

鼠标悬浮显示文本

widtn/height属性：控制宽度和高度

 <img src="../image/kai.jpg" alt="加载失败" title="这个是我的图片"width=500px>
1

一般只用修改一个，另一个会自动等比例修改。不然会失衡

border属性：添加边框

  <img src="../image/kai.jpg" alt="加载失败" title="这个是我的图片"width=500px border="10px">
1

一般用CSS

目录结构

1.绝对路径：一个完整的磁盘路径, 或者网络路径

磁盘路径 D:\rose.jpg
网络路径 https://imagesX.cnblogs.com/blog/13XXX623/201407/300958470402077.png

2.相对路径：以 html 所在位置为基准, 找到图片的位置

同级路径: 直接写文件名即可 (或者 ./)
下一级路径: image/1.jpg
上一级路径: …/image/1.jpg

6.超链接标签：a

href属性: 点击后会跳转到哪个页面

    <a href="http://www.baidu.com">百度</a>
    <a href="html01.html">跳转到html01</a>
    <a href="#">当前页面</a>
    <a href="http://www.baidu.com">
        <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" 
             title="跳转到百度"> 
    </a>
1
2
3
4
5
6
7

href必须要有

target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开.

没有target:默认在当前页面打开连接，覆盖当前页面

  <a href="http://www.baidu.com" target="_blank"> 
1

7.表格标签

table:整个表格
tr:表格的一行
td:一个单元格
th:表头单元格，会居中加粗
thead:表格的头部区域（范围比th大）
tbody(内容)

复制快捷键：shift+alt+↓

表格默认边框是0px

cellspacing: 单元格之间的距离. 默认为 2 像素
cellpadding: 内容距离边框的距离, 默认 1 像素
border 表示边框. 1 表示有边框(数字越大, 边框越粗), “” 表示没边框.
align 是表格相对于周围元素的对齐方式. align=“center” (不是内部元素的对齐方式)

    <table border="1" width="200" height="300" 
    cellspacing ="0" cellpadding ="30" align="center">
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td> 年龄</td>
        </tr>
        <tr>
            <td>小明</td>
            <td>男</td>
            <td>12</td>

        </tr>
        <tr>
            <td>小红</td>
            <td>女</td>
            <td>15</td>
        </tr>
        <tr>
            <td>小黄</td>
            <td>男</td>
            <td>11</td>
        </tr>
    </table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

单元格合并

跨行合并:

  <td rowspan="2">男</td>
1

跨列合并:

  <td colspan="2">小黄/女</td>
1

合并完要检查内容,删除多余的单元格

8.列表标签

1.无序列表

    <h1>无序列表</h1>
    <ul type ="disc">//默认实心圆
        <li>新闻1</li>
        <li>新闻2</li>
        <li>新闻3</li>
    </ul>
    <ul type = "square">//方块
        <li>新闻1</li>
        <li>新闻2</li>
        <li>新闻3</li>
    </ul>
    <ul type ="circle">//空心圆
        <li>新闻1</li>
        <li>新闻2</li>
        <li>新闻3</li>
    </ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

2.有序列表

    <ol type="1">//默认数字
        <li>有序列表1</li>
        <li>有序列表2</li>
        <li>有序列表3</li>
    </ol>
    <ol type="A" start="4">大写，从第四个字母开始
        <li>有序列表1</li>
        <li>有序列表2</li>
        <li>有序列表3</li>
    </ol>

    <ol type="a">//小写
        <li>有序列表1</li>
        <li>有序列表2</li>
        <li>有序列表3</li>
    </ol>

    <ol type="I">//罗马大写
        <li>有序列表1</li>
        <li>有序列表2</li>
        <li>有序列表3</li>
    </ol>
    <ol type="i">//罗马小写
        <li>有序列表1</li>
        <li>有序列表2</li>
        <li>有序列表3</li>
    </ol>
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

3.自定义列表

    <dl>//总标签
        <dt>自定义列表显示的内容 //小标题
        <dd>//围绕标题来说明
            自定义列表1
        </dd>
        <dd> 自定义列表2

        </dd>
        <dd>
            自定义列表3
        </dd>
        </dt>
    </dl>

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

9.表单标签

用表单标签，完成服务器的一次交互
表单是让用户输入信息的重要途径

1.表单域

包含表单元素的区域

<form action="test.html">
   ... [form 的内容]
</form>
1
2
3

描述了要把数据按照什么方式, 提交到哪个页面中.

2.表单控件

各种输入控件, 单行文本框, 按钮, 单选框, 复选框.

input 标签（单标签）

    <form action="html03.html">
        <!-- 文本框 -->
        姓名<input type="text"><br> <!-- 单行输入 -->

        <!-- 密码框 -->
        密码<input type="password"><br>
        <!-- 单选框 -->
        性别
        <input type="radio" name="sex">男
        <input type="radio" name="sex" checked="checked">女 
        <!-- checked默认选择 -->
        <!-- 单选框之间必须具备相同的 name 属性, 才能实现 多选一 效果 -->
        <br>
        <!-- 复选框 -->
        爱好
        <input type="checkbox">睡觉
        <input type="checkbox">码字
        <input type="checkbox">弹吉他
        <br>
        <!-- 普通按钮 -->
        <input type="button" value="按钮" onclick="alert('hello')">
        <!-- 点击弹出hello -->
        <br>
        <!-- 提交按钮 -->
        <input type="submit" value="提交">
        <!-- 提交按钮必须放到 form 标签内. 点击后就会尝试给服务器发送 -->
        <br>
        <input type="reset">
        <!-- 清空按钮必须放在 form 中. 点击后会将 form 内所有的用户输入内容重置 -->
    </form>
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

type(必须要有)取值种类很多，进行对应取值：button, checkbox, text, file, image, password, radio 等.
name: 给 input 起名。对于单选按钮, 具有相同的 name 才能多选一.
value: input 中的默认值
checked: 默认被选中. (用于单选按钮和多选按钮)
maxlength: 设定最大长度.

label 标签

搭配 input 使用. 点击 label 也能选中对应的单选/复选框, 能够提升用户体验

    性别 <input type="radio" name="sex" id="male">
    <label for="male">男</label>
    <!-- for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应 -->
    <input type="radio" name="sex" id="female">
    <label for="female">女</label>
1
2
3
4
5

select 标签

下拉菜单
option 中定义 selected=“selected” 表示默认选中

        <select name="" id="">
            <option>Java<object>
            <option>Python<object>
            <option selected="selected">C<object>
            <option>C++<object>
        </select>

1
2
3
4
5
6
7

textarea 标签

文本域中的内容, 就是默认内容,

空格也会影响.

   <textarea name="" id="" cols="30" rows="10"></textarea>
1

10.无语义标签 div & span

没有固定的用途
进行布局设计
div独占一行，是大盒子（可以嵌套）
span不独占一行，小盒子

11.特殊标签

空格:

&nbsp;
1

小于号:

&lt;
1

大于号:

 &gt; 
1

按位与:

 &amp;
1

点击移步博客主页，欢迎光临~

偷cyk的图

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/384162

【前端】HTML（常用的HTML标签）

文章目录

HTML

一、什么是HTML

1.快速生成代码

二、HTML标签

0.注释

1.标题

2.段落

3.换行

4.格式化标签

5.图片标签：img

目录结构

6.超链接标签：a

7.表格标签

复制快捷键：shift+alt+↓

单元格合并

8.列表标签

1.无序列表

2.有序列表

3.自定义列表

9.表单标签

1.表单域

2.表单控件

10.无语义标签 div & span

11.特殊标签