菜单 搜索
首页 前端知识 掌握html这一篇就够了

掌握html这一篇就够了

2024-04-29 11:04:29 前端知识 前端哥 892 511 我要收藏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

  • 前言
  • 一、HTML是什么？
  • 二、基础标签
  • 6个标题标签
    • 6级标题
    • 其他基础标签
  • 8种文本标签
  • 6种表格标签
  • 4种表格标签
    • 基础
    • 标签修饰
  • 4种媒体标签
    • a标签
    • img:图片
    • audio：声音（支持本地、网络地址）
    • video：视频
  • 1个框架
  • 1个表单标签
    • 表单域：form
    • 表单标签
    • 表单按钮
    • 扩展：表单提交到服务器
  • html5语义化标签
  • 小技巧：html快速生成
  • 总结

前言

提示：这里可以添加本文要记录的大概内容：

HTML是互联网的基础，是构建网页和应用程序的重要组成部分。它的简单语法和强大功能使其成为广泛使用的网页开发工具。

提示：以下是本篇文章正文内容，下面案例可供参考

一、HTML是什么？

HTML（Hypertext Markup Language）是一种标记语言，用于创建网页和网页应用程序。HTML使用标签描述网页的结构和内容，并使用标签间的嵌套关系来定义网页的布局和样式。

HTML的基本结构由DOCTYPE声明、HTML元素、头部元素和主体元素组成。DOCTYPE声明定义了HTML版本，HTML元素包围整个网页内容，头部元素包含了网页的元数据（如标题、链接等），主体元素包含了网页的实际内容。

HTML使用标签来表示不同的元素，标签可以包含属性，用于进一步定义元素的行为和样式。

除了基本的标签和属性，HTML还支持通过CSS（Cascading Style Sheets）来定义网页的样式和布局，以及通过JavaScript来实现动态交互和功能。

二、基础标签

  • html：跟标签

  • head：头标签

  • body：身体标签

在vscode输入英文的 ! 回车就可以生成基本的 html 代码

在这里插入图片描述
在这里插入图片描述

  • html是一系列标签嵌套 用于搭建页面的结构

  • html5 是html的一个版本
    每一个html的版本都收纳了一系列标签，标签不能自定义

  • doctype html 标识这个文件是html5标准

  • html 是网页的跟标签 所有标签都要写在html内部

  • head 是头标签 用于编写页面的修饰信息

     meta 元信息 
 charset = utf8 编码方式
 name=viewport 移动端自适应 设备宽度 初始不缩放

  • body 是身体标签 用于编写页面内容，主要工作区域

  • shift + alt + f 格式化

学习html掌握6、8、6、4、4、1、1
即：

6个标题标签、8种文本标签、6种列表标签、4种表格标签、4种媒体标签、1个框架、1个表单标签

6个标题标签

6级标题

h1-h6：铺满一行，行级元素 有上下行距，加黑、加粗、字体大小变化

其他基础标签

  • p：段落

  • span：隔离标签（可以独立选中），行内元素，子主题 1

  • div ：块标签、铺满多行，可以多重嵌套

  • br：强制换行

  • hr：水平分割线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div>
        <h1>1级标题</h1>
        <h2>2级标题</h2>
        <h3>3级标题</h3>
        <h4>4级标题</h4>
        <h5>  <span>5级</span>  标题</h5>
        <h6>  <span>6级</span>  标题</h6>

        <p>这是一个段落</p>
        <span>普通文本</span>

        <div>
            <span>12 <br> 34 <br> 5678 </span>
        </div>
    </div>

    <hr>

    <span>hr:水平分割线</span>
    
</body>
</html>

运行：鼠标右键
在这里插入图片描述

在这里插入图片描述

8种文本标签

  • span：普通文本
粗体strong、b
斜体i、em
下划线u
删除线del
上标sup
下标sub
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div>
        <span>普通文本</span> 
        
        <p>  <b>b：粗体，</b>  <strong>strong：粗体，</strong>  </p>

        <p>  <i>i：斜体</i>  <em>em：斜体</em>  </p>
        <p>  <u>u：下划线</u> <br> <del>del：删除线</del>   </p>
        <p>  <sup>sup：上标</sup>  <span>--;--</span>  <sub>sub：下标</sub>  </p>
    </div>

    <div>
        <span>例子</span> <br>
        H<sub>2</sub>CO<sub>3</sub> == 2H<sup>+</sup> + CO<sub>3</sub><sup>-2</sup>
    </div>
    
</body>
</html>

在这里插入图片描述

6种表格标签

  • ul：无序列表，默认使用小圆点

  • ol：有序列表

    有序号、铺满一行、有上下行距
    左侧有内补、内补可以使用多个li

  • li：列表项，一般不单独存在（铺满一行）

  • dl：自定义列表(外框架)

  • dt：自定义列表项，顶格出现

  • dd：自定义列表项目说明，可以没有，缩进出现

自定义列表项和自定义列表项目说明的区别：有无缩进

 <!DOCTYPE html>
 <html lang="wl-en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 </head>
 <body>

    <ol>
        <li>有序列表</li>
        <li>html</li>
        <li>css</li>
        <li>javascript</li>
    </ol>

    <hr>

    <ul>
        <li>无序列表</li>
        <li>html</li>
        <li>css</li>
        <li>javascript</li>
    </ul>

    <hr>

    <dl>
        <dt>自定义列表</dt>
        <dt>html</dt>
        <dd>html是网页的骨架</dd>
        <dt>css</dt>
        <dd>css是网页的骨架</dd>
        <dt>javascript</dt>
    </dl>
    
 </body>
 </html>

在这里插入图片描述

4种表格标签

基础

  • table：表外框

  • tr：其中一行

  • th：表头单元格

  • td：普通单元格

注：表头使用th、td都可以（th 加粗居中）

标签修饰

  • boreder：边框

  • cellspacing：单元格与单元格之间的宽度

  • cellpadding：单个单元格中文本与边框的宽度

  • width：单元格宽度，可以写在里面（表头 td 标签）

  • align：居中center、靠右right、left靠左，写在table标签中

  • td属性：

     rowspan：合并行（上下合并）
  colspan：合并列（左右合并）

表格之间可以多个嵌套

 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 </head>
 <body>

    <table>

        <!-- <tr>
            <th>ID</th>
            <th>name</th>
            <th>age</th>
        </tr> 
        表头使用th、td都可以（th 加粗居中）
        -->

        <tr>
            <td>ID</td>
            <td>name</td>
            <td>age</td>
        </tr>

        <tr>
            <td>101</td>
            <td>萧寒</td>
            <td>21</td>
        </tr>

        <tr>
            <td>102</td>
            <td>墨白</td>
            <td>18</td>
        </tr>

    </table>

    <hr>


    <table border="5" cellspacing="5" cellpadding="5" width="5%">

        <!-- 
            标签修饰
            boreder：边框
            cellspacing：单元格与单元格之间的宽度
            cellpadding：单个单元格中文本与边框的宽度
            width：单元格宽度，可以写在里面（表头标签）
            align：居中center、靠右right、left靠左
        -->

        <tr>
            <td width="10">ID</td>
            <td>name</td>
            <td>age</td>
        </tr>

        <tr>
            <td>101</td>
            <td>萧寒</td>
            <td>21</td>
        </tr>

        <tr>
            <td>102</td>
            <td>墨白</td>
            <td>18</td>
        </tr>

    </table>

    <hr>

    <table border="5" cellspacing="5" cellpadding="5" width="5%" align="left">

        <!-- 
            td属性
            rowspan 合并行（上下合并）
            colspan 合并列（左右合并）
            
        -->

        <tr>
            <td width="10">ID</td>
            <td>name</td>
            <td>age</td>
        </tr>

        <tr>
            <!-- 与102的萧寒合并（上下合并） -->
            <td>101</td>
            <td rowspan="2">萧寒</td>
            <td>21</td>
        </tr>

        <tr>
            <td>102</td>
            <!-- <td>萧寒</td> -->
            <td>21</td>
        </tr>

        <tr>
            <!-- 与后面的年纪18合并（左右合并） -->
            <td>103</td>
            <td colspan="2">墨白</td>
            <!-- <td>18</td> -->
        </tr>

    </table>
    
 </body>
 </html>

在这里插入图片描述

4种媒体标签

a标签

a标签 ：超级连接

  • href连接地址，支持外部（本地）服务器地址

  • target

      _blank：新空白标签页打开
  _self：当前页打开(默认)

  • 锚点：href要以#开头
    例子：设置顶部锚点
    <span id=“top”>顶部</span>
    使用
    <a href=“#top”>回到顶部</a>

img:图片

  • src：图片地址，支持本地、网上图片

  • alt：图片加载失败后显示的内容

  • 例子：图片–连接网址：点击图片可以跳转到网址
    <a href=“https://www.baidu.com”> <img src=“/图片/背景1.jpg” alt=“”> </a>

audio：声音（支持本地、网络地址）

  • controls：控件（音乐播放栏（简单的 一般不使用，复杂的需要使用自己绘制皮肤，通过gs完成控制））

  • auto-play：自动播放

video：视频

  • src：本地、网络地址
  • alt：失败显示的内容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <!-- 设置顶部锚点 -->
    <span id="top">顶部</span>

    <hr>

    <!-- 图片--连接网址：点击图片可以跳转到网址 -->
    <a href="https://www.baidu.com">   <img src="/图片/背景1.jpg" alt="">  </a>

    <!-- 声音 -->
    <audio src="/声音/背景音乐.mp3" controls></audio>


    <ol>
        <!-- 放到有序列表 -->
        <li>
            <a href="https://www.jd.com">京东</a>
        </li>

        <li>
            <a href="https://www.hao123.com">hao123</a>
        </li>

        <li>
            <!-- target=_blank  新空白标签页打开 -->
            <a href="https://www.csdn.net/" target="_blank">csdn网址</a>
        </li>


        <!-- 可以跳转自己的html文件 -->
        <li>
            <a href="./5.4种表格标签.html">表格标签</a>
        </li>


        <!-- 锚点开始 -->

        <li>
            <a href="#top">回到顶部</a>
        </li>

        <li>
            <a href="#bottom">来到底部</a>
        </li>

    </ol>

    <!-- 视频 -->
    <video src="/视频/贪吃蛇.mp4" controls></video>


    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    
    <!-- 设置底部锚点 -->
    <span id="bottom">深谷低点</span>
    
    <span>  <a href="#top">一跃而上 回到顶点</a>  </span>

    
    
</body>
</html>

在这里插入图片描述
在这里插入图片描述

1个框架

  • iframe：嵌入其他页面
    src：地址路径（网络地址、本地地址）
    frameborder：引入页面的边框
    例子
    <iframe src=“./5.4种表格标签.html” frameborder=“0”></iframe>
    将本地的5.种表格标签.html引入页面中，frameborder=“0” ==》 没有边框
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div>
        <h1>自己编写内容</h1>
        <p>世界灿烂盛大，欢迎回家</p>
    </div>

    <hr>

    <div>
        <h1>使用iframe引入其他页面</h1>
        <!-- 本地文件 -->
        <iframe src="./5.4种表格标签.html" frameborder="0"></iframe>
    </div>
    
</body>
</html>

在这里插入图片描述

1个表单标签

表单域：form

  • action：服务器地址，默认当前地址
  • method：提交方法，默认get

表单标签

  • 1.input

  • label：常与input一起使用
    label的for要和input的id相同 ==》点击用户名就可以输入，不需要必须精准点到框内

  • type：类型

text文本
password密码
radio单选项
color颜色
submit提交
reset重置
checkbox多选
file文件（上传文件）

  • 2.select 下拉选项

  • 结合option 选项
    name写在select上，value写在option

  • 默认选项：selected

  • 3.textarea：通俗点就是一个大框（多行输入框）
    可以更改大小（cols：宽 row：高）

注意：1.需要提交到服务器的表单标签一定要有name
2.想要设置单选项，其 name 要一样
3.设置value使服务器知道你所选择的是什么

<input name="un" id="username" type="text"> ==》 想要设置单选项，其 name 要一样
<label for="男">男</label>  <input name="sex" id="man" type="radio">
<label for="女">女</label>  <input name="sex" id="woman" type="radio">
		
设置value使服务器知道你所选择的是什么
<label for="男">男</label>  <input name="sex" value="man" id="man" type="radio">

input的value就是需要提交给服务器的值，当type等于text、password之类的可输入内容，不需要写value，radio、checkbox需要设置value

表单按钮

结合input中的 submit 提交和 reset 重置

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   
   <h1>表单标签</h1>
   <form action="" method="get">
      <!-- 用户名 -->
      <!-- label的for要和input的id相同 ==》 点击用户名就可以输入，不需要必须精准点到框内 -->
      <label for="username">用户名</label>
      <input name="username" id="username" type="text">

      <!-- 密码 -->
      <label for="password">密码</label>
      <input name="pwd" id="password" type="password">

      <p>
         <span>性别：</span>
         <!-- radio：单选项 -->
         <!-- 想要设置单选项，其 name 要一样 -->
         <!-- checked：默认选项 -->
         <!-- input的value就是需要提交给服务器的值，当type等于text、password之类的可输入内容，不需要写value
               radio、checkbox需要设置value -->
         <!-- 性别需要自己勾选而不是填写，所以需要设置value使服务器知道你所选择的是什么 -->
         <label for="man">男</label>  <input name="sex" value="man" id="man" type="radio">
         <label for="woman">女</label>  <input checked name="sex" value="woman" id="woman" type="radio">
      </p>

      <p>
         <span>爱好：</span>
         <!-- checkbox：多选 -->
         <label for="read">看小说</label>  <input name="hobby" value="read" id="read" type="checkbox">
         <label for="music">听音乐</label>  <input name="hobby" value="music" id="music" type="checkbox">
         <label for="dance">跳舞</label>  <input checked name="hobby" value="dance" id="dance" type="checkbox">
      </p>

      <p>
         <label for="color">喜欢的颜色</label>
         <input id="color" type="color">
      </p>

      <p>
         <label for="file">上传文件：</label>
         <input id="file" type="file">
      </p>

      <p>
         <!-- select：下拉选项  结合option 选项 -->
         <!-- name写在select上  value写在option -->
         <!-- selected：默认 -->
         <label for="address">居住地</label>
         <select name="address" id="address"></select>
            <option value="zhengzhou">郑州</option>
            <option selected value="luoyang">洛阳</option>
            <option value="kaifeng">开封</option>
      </p>

      <p>
         <!-- textarea：通俗点就是一个大框（多行输入框）
                  可以更改大小
                  cols：宽   row：高 -->
         <label for="info_friend">交友宣言</label>
         <textarea name="info_friend" id="info_friend" cols="20" rows="3"></textarea>
      </p>

      <p>
         <!-- 表单按钮：提交、重置 -->
         <input type="submit">
         <input type="reset">
      </p>

   </form>

</body>
</html>

在这里插入图片描述
下方为提交后的
在这里插入图片描述

扩展：表单提交到服务器

  • get 测试地址：http://httpbin.org/get
    将登录信息提交到args

  • required name 必填项

  • placeholder 提示信息

  • 2.post 测试地址 http://httpbin.org/post == 》 将信息提交到 form

  • 隐藏域： type=“hidden” name=“csrf_coken” value=“随便填”
    在这里插入图片描述
    提交后
    在这里插入图片描述

html5语义化标签

  • 相当于div：只是换了一个名字
  • header：头部
  • nav：导航栏
  • footer：底部栏
  • main：主体
  • section：区域
  • article：文章
  • aside：侧边栏

小技巧：html快速生成

  • >：嵌套

  • *：重复

  • +：后续（连接），同级

  • {}：内容

  • $：一个数字，从1开始向上递增
    $ ==> 1个数字，从1开始
    $$ ==》 2个数字，从01开始
    $$$ ==》 3个数字，从001开始

  • ():分组
    div>p3>{我是段落$}+span3{作业$} ==> span标签嵌套在了p标签中，但是想要分开
    所以用到分组（）
    div>(p3>{我是段落$})+span3{作业$} 成功了

注意：分组的（）不能用在最后1组

div>(p*3>{我是段落$})+(span*3{作业$})  是不行的

  • lorem:随机生成一句话当做段落

  • lorem个数 ==> orem5 随机生成5个单词

  • lorem个数-个数 ==> lorem4-10 随机生成4到10个单词

  • 超级练习
    (header>nav>ul>li5>a>{baidu$})+(main>section3>(h1>{标题$})+article>(lorem))+foorer

在这里插入图片描述
结果：
在这里插入图片描述

总结

以上就是今天要讲的内容，本文介绍了html一些标签的使用，而html提供了一系列标签和元素来描述网页的结构和语义。使用不同的标签和属性，可以控制文本的样式、添加链接和图像、创建表格和表单、嵌入媒体内容等

转载请注明出处或者链接地址：https://www.qianduange.cn//article/5923.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

AJAX和JSON

2024-05-03 19:05:37

一文读懂JavaWeb，前后端数据交互原来是这样的

2024-05-03 19:05:31

解决Object of type ‘ndarray‘ is not JSON serializable

2024-05-03 19:05:30

python webdriver 测试框架数据驱动json文件驱动的方式_webdriver json

2024-05-03 19:05:22

Golang笔记：使用json包处理JSON数据

2024-05-03 19:05:16

java使用geotools解析矢量数据kml、geojson、shp文件

2024-05-03 19:05:15

微信小程序之WXSS模板样式、页面配置（.json）和网络数据请求

2024-05-03 19:05:04

qml 文件中 JSON的使用

2024-05-03 19:05:03

JSON比较：如何轻松判断数据格式是否相同？

2024-05-03 19:05:02

json在线格式化代码

2024-05-03 19:05:01

大家推荐的文章
1

前端vue项目使用Decimal.js做加减乘除求余运算

2024-04-23 21:04:401000
2

js数组常用方法（19种）|你会的到底有多少呢？

2024-04-08 11:04:211000
3

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000
4

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
5

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
6

移动端css布局大全

2024-02-06 15:02:421000
7

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
8

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
9

vue实现可输入可下拉选择的组件

2024-04-05 09:04:35999
10

echarts 图表，定时器实现数据实时动态

2024-03-13 00:03:28999

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！