HTML文档结构与常用标签介绍

最新推荐文章于 2022-11-19 14:23:23 发布
最新推荐文章于 2022-11-19 14:23:23 发布
阅读量182 收藏
点赞数
分类专栏： HTML 文章标签： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gh13462231994/article/details/100170894
版权

1.HTML文档结构

实例

<!doctype html>

<!--    title是显示在浏览器标签页内的文本内容,用来提示用户当前页面的基本信息-->
<title>html文档的结构</title>

小伙伴们,大家好！

运行实例 »
点击 “运行实例” 按钮查看在线实例

2.标题与段落标签

实例

Document

第一个标题

最大

第二个标题

稍微小一点

第三个标题

再小一点

第四个标题

再小一点

第五个标题

再小一点

第六个标题

h1为最大，h6为最小

</article>

运行实例 »
点击 “运行实例” 按钮查看在线实例

3.链接标签

实例

链接标签 php中文网 php中文网 php中文网 php中文网

运行实例 »
点击 “运行实例” 按钮查看在线实例

4.图像标签

实例

图像 狗 
<img src="https://img.php.cn/upload/course/000/000/001/5d1c6dfc9eb09885.jpg" alt="php.cn">

运行实例 »
点击 “运行实例” 按钮查看在线实例

5.列表标签
分为三大类，有序，无序，自定义。

实例

列表

购物车

  • 1. 先学习前端
  • 2. 再学习后端
  • 3. 最后学习框架
<!-- 2.有序列表 -->
<h3>购物车</h3>
<ol>
    <li>先学习前端</li>
    <li>再学习后端</li>
    <li>最后学习框架</li>
</ol>

<!-- 导航 -->
<ul>
    <li><a href="">先学习前端</a></li>
    <li><a href="">再学习后端</a></li>
    <li><a href="">最后学习框架</a></li>


    <!-- 3. 定义列表 -->
    <dl>
        <dt>第一步</dt>
        <dd>先学习前端</dd>

        <dt>第二步</dt>
        <dd>再学习后端</dd>

        <dt>第三步</dt>
        <dd>最后学习框架
            <dd>
    </dl>

运行实例 »
点击 “运行实例” 按钮查看在线实例

6.表格标签

实例

表格

购物车

  • 伊利纯牛奶，1箱，35元
  • 雕牌洗衣粉, 2袋, 50元
  • 海天酱油, 1瓶, 26元
<hr>

<table border="1" width="500" cellspacing="0" cellpadding="5">
    <caption>
        <h3>购物车</h3>
    </caption>
    <!-- 表头 -->
    <thead>
        <tr bgcolor="lightblue">
            <th>超市名称</th>
            <th>编号</th>
            <th>名称</th>
            <th>单价</th>
            <th>数量</th>
            <th>金额</th>
        </tr>
    </thead>
    <!-- 主体 -->

    <tr>
        <td rowspan="5">星星超市</td>
        <td>1</td>
        <td>伊利纯牛奶</td>
        <td>35</td>
        <td>1</td>
        <td>35</td>
    </tr>
    <tr>

        <td>2</td>
        <td>雕牌洗衣粉</td>
        <td>25</td>
        <td>2</td>
        <td>50</td>
    </tr>
    <tr>

        <td>3</td>
        <td>海天酱油</td>
        <td>26</td>
        <td>1</td>
        <td>26</td>
    </tr>
    <!-- 底部 -->

    <tr>

        <td colspan="3" align="center">合计:</td>
        <td>4</td>
        <td>111</td>
    </tr>
</table>

运行实例 »
点击 “运行实例” 按钮查看在线实例

7.表单与常用控件标签

.实例

表单以及表单中的控件元素

用户注册

            <optgroup label="前端">
                    <option value="">请选择</option>
                    <option value="">HTML5</option>
                    <option value="">CSS3</option>
                    <option value="">JavaScript</option>
            </optgroup>
            
            <optgroup label="后端">
                    <option value="">php</option>
                    <option value="">mysql</option>
                    <option value="">laravel</option>
            </optgroup>
            
        </select>
    </p>
    <p>
        <label for="">爱好:</label>
        <input type="checkbox" name="hobby[]" value="game" id="game" checked><label for="game">玩游戏</label>
        <input type="checkbox" name="hobby[]" value="programme" id="programme"><label for="programme">撸代码</label>
        <input type="checkbox" name="hobby[]" value="movies" id="movies"><label for="movies">看片</label>
    </p>
    <p>
        <label for="secrecy">性别:</label>
        <input type="radio" name="gender" id="male"><label for="male">男生</label>
        <input type="radio" name="gender" id="female"><label for="female">女生</label>
        <input type="radio" name="gender" id="secrecy" checked><label for="secrecy">保密</label>
    </p>
    <p>
        <input type="submit" name="submit" value="提交">
        <input type="reset" name="reset" value="重填">
        <input type="button" name="reset" value="按钮">
        <button type="button">注册</button>
    </p>

</form>

运行实例 »
点击 “运行实例” 按钮查看在线实例

总结：

    本节简单介绍了HTML文档结构与标题‘<h+数字>’、段落<p>、链接<a>、图像<img>、列表<ui>,<ol>,<dd>、表格标签‘<table>’、表单以及常用控件‘<form>,<lable>,<input>,<button>​’,其中<input>标签的type属性值较多，硬着重记忆。
gh13462231994
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML基本结构标签以及常用标签
qq_52341981的博客
08-23 2910
我们常用的开发工具：VScode 首先我们先看到的是HTML的基本结构标签 由上图我们依次解释其用途 <html></html>作为页面中一个最大的标签，包裹住其他小标签，称其为根标签 <head></head>文档的头部，在这其中必须包含tilte标签 <title></title>文档的标题，给页面设置标题 <body></body>文档发主体，页面中的内容基本都放在改标签里。 接着我们来.
html文档的基本结构和常用标签
吃瓜群众的博客
08-17 4657
HTML一、HTML简介1.什么是HTML2.标签、元素3.html文档的基本结构二、HTML中常用标签1.标题标签<h1>--<h6>2.段落标签<p>3.常见的转义字符4.<i>和<em>5.<b>和<strong>6.<u>7.<br> <hr>8.<img>图...
HTML结构； 常用标签
Star_kang的博客
08-01 362
1， 超文本标记语言，超文本：既有文本的特性，已有超越文本的特性，比如：插入图片，多媒体等 标记：由标签组成，不同标签的所有笔筒展示效果或功能 2， html文件的后缀 。html 或 ，htn 3， HTNL文档的结构 二，常用标签 1， 多媒体标签 音频： 视频： 2,超链接 Href:要打开的连接地址路径 Target：设置打开连接的方式 ...
HTML的常用结构标签(详细)
前端开发,HTML5,css3,JavaScript,node.js,vue
11-19 954
html常用结构标签,文本,标题,加粗,切斜,换行,上标,下标,删除线,下划线,水平线,无序列表,有序列表,自定义列表,插入图片
html中属于结构标签的是什么,html基本标签结构
weixin_33498081的博客
06-20 285
简单的html5的基本架构HTML全称为HyperText Markup Language，一款写给浏览器的语言。HyperText：超文本(文本，图片，视频，音频，链接)Markup Lanuage：标记语言早在1993年起，html就开始问之于世，一直发展到今天的html5，在html5版本中，不仅保留前面版本的功能，还加入了新的功能，新的语法特征，如video、audio、canvas等标记...
HTML5之结构标签
nicolelili1的专栏
01-30 1147
在h5中可以通过结构标签将界面划分为不同的区域 1、:功能容器，将功能相同的标签放到里面 ①、 ② section标签不仅仅是一个标签容器，它带有明显的语义。section标签最好带有一个标题标签，就是h1到h6的标签，从而表达更加清晰的语义 ③ article标签是一种特殊的section标签，它比section标签更具有明确的语义
HTML常用标签代码
05-07
在本资源中，我们看到的"HTML常用标签代码"显然是一个帮助初学者或开发者学习和练习HTML标签的资料。下面将详细介绍一些常见的HTML标签及其用法。 1. `<html>`: 这是每个HTML文档的根元素，包含整个网页的代码。...
20.2 HTML 常用标签
07-28
在“20.2 HTML 常用标签”这个主题中，我们将深入探讨一些HTML中不可或缺的核心标签，这些标签对于创建功能性且结构清晰的网页至关重要。 1. **文档类型声明（<!DOCTYPE html>）**：这是每个HTML文档的开头，用于...
HTML中的常用标签
09-18
HTML文档的基本结构通常由`<html>`标签包裹，内部包含`<head>`和`<body>`两大部分。 1. **`<html>`标签**：定义整个HTML文档的根元素。 2. **`<head>`标签**：包含了关于文档的信息，但不直接显示在页面上，如标题...
HTML中常用的结构标签
王春燕的博客
04-09 1348
布局标签（结构化标签） header 网页的头部 main 网页的主体部分（一般就一个） footer 网页的底部 nav 网页的导航 aside 和主体相关的内容，侧边栏 article 文章之类的 section 独立的区块，上面的标签都不合适，就用这个 div. 没有语义，就用来表示一个区块，目前来讲div还是主流的布局元素 span 行内元素 ，也是没有任何语义，一般用于在网页中选中文字 <!DOCTYPE html> <html lang="en"&gt.
HTML的结构标签
g960526的博客
03-24 2483
HTML的结构标签 结构便签，顾名思义，大多数是没有太多特殊的作用的，但是它是构建一个网页基本结构的主要元素，此次会列出大家经常用来搭建结构的基本标签。 div 盒子标签 没有任何的样式 双标签 P 段落标签 默认有上下外边距 双标签 h1~h6 标题标签 字体逐次减小 双标签 默认上下边距 字体加粗 字体变大 h1为主标签 其余为副标签 主标签一个网页只能出现一次 s...
01 HTML网页骨架以及Hbuilder的使用
Zhang_Ting0020的博客
03-01 1766
Web自动化测试 Web基本介绍 Web就是world wide web的缩写，俗称www web可以理解为就是当前的一种互联网，对于我们来说就是网站服务 网站我们可以认为是由多个网页组合在一起形成的一种服务 web前段就是负责一个网站中前台页面的内容 网页就是由前端工程师使用HTML语言编写的一种文件，它里面保函文字图片超链接声音视频等 HTML的基本介绍 HTML是超文本标记语...
H5 新增页面结构标签
weixin_45974687的博客
05-17 467
1.之前的布局全部使用div来布局 基本网页结构 ： 头部 logo 搜索框 导航栏 主体部分 商品展示 左右结构 左中右结 尾部 赞助商信息 友情链接 版权信息 合作商 <div class="header"> <div class="nav"></div> </div> <div class="main"> <div class="section
html5结构标签_新HTML5结构标签
cuxiong8996的博客
07-02 672
什么是HTML5？ HTML5是超文本标记语言（HTML）的最新版本，是迄今为止该语言最彻底的修订。 它在各个领域引入了许多新功能。 一些更值得注意的补充包括： 内置的音频和视频多媒体标签 用于在浏览器中绘制内容的画布标签 更智能的表单，可让您通过使用必填属性来执行诸如验证之类的操作 有了一组新的结构标签，HTML5修改了HTML文档的结构方式。 新的结构标签集中于将H...
HTML结构及常用的标签
Mr_fengzi的博客
08-01 2050
HTML(Hyper Text Mark-up Language )即是超文本标记语言，通过使用标记标签来描述页面文档结构和表现形式的一种语言，再由浏览器进行解析，然后把结果展示在网页上。 这里的超文本指的是超链接，标记指的是标签。
结构标签(struct tag)与类型定义(typedef)的区别
shengabc的专栏
03-24 4391
问题1：两种声明有什么不同？ struct x1 {...}; typedef struct {...} x2; 答：第一种形式声明了一个结构标签，第二种声明了一个“类型定义”。主要区别在于第二种声明更抽象一些，用户不必知道它是一个结构，且在声明它的实例时也不需要使用struct关键字。例如： x2 b；//是OK的 但是使用结构标签声明的结构就必须用这样的形式定义：
基于python贫困生资助管理系统带vue前后端分离设计源代码+文档说明+数据库文件
最新发布
09-01
基于python贫困生资助管理系统带vue前后端分离设计源代码+文档说明+数据库文件，含有代码注释，新手也可看懂，个人手打98分项目，导师非常认可的高分项目，毕业设计、期末大作业和课程设计高分必看，下载下来，简单部署，就可以使用。 基于python贫困生资助管理系统带vue前后端分离设计源代码+文档说明+数据库文件，含有代码注释，新手也可看懂，个人手打98分项目，导师非常认可的高分项目，毕业设计、期末大作业和课程设计高分必看，下载下来，简单部署，就可以使用。 基于python贫困生资助管理系统带vue前后端分离设计源代码+文档说明+数据库文件，含有代码注释，新手也可看懂，个人手打98分项目，导师非常认可的高分项目，毕业设计、期末大作业和课程设计高分必看，下载下来，简单部署，就可以使用。 基于python贫困生资助管理系统带vue前后端分离设计源代码+文档说明+数据库文件，含有代码注释，新手也可看懂，个人手打98分项目，导师非常认可的高分项目，毕业设计、期末大作业和课程设计高分必看，下载下来，简单部署，就可以使用。基于python贫困生资助管理系统带vue前后端分离设计源代码+文档
基于YOLOv8的路面桥梁墙体裂缝识别python源码+项目说明.zip
09-01
经导师指导并认可通过的高分设计项目。主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者，也可作为课程设计、期末大作业。 <资源说明> 不懂运行，下载完可以私聊问，可远程教学 该资源内项目源码是个人的毕设或者课设、作业，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96.5分，放心下载使用！ 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。
弹性力学基础：应力：应力集中现象.docx
09-01
弹性力学基础：应力：应力集中现象.docx
HTML基础学习：文档结构与常用标签
在学习HTML基本标签时，首先要了解HTML文档的基本结构。一个标准的HTML文档通常包含以下几个部分： 1. **文档声明**：<!DOCTYPE html>，告知浏览器文档使用的是HTML5标准。 2. **HTML根元素**：<html>，整个HTML...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值