Web前端学习(四)HTML5语义化标签

2023-11-13

语义化

语义化实际上就是将用一些标签使浏览器能够识别到标签含义,比如什么时候使用标题标签,什么时候使用段落标签,适当的使用这些标签使浏览器能够识别到标签的含义,并作出相应的响应。

语义化标签

段落标签

<p> </p>

<p>段落文本</p>

新开始一段文字时,使用段落标签,段落文本在段落标签中间显示。

span标签

使用<apan> 标签来设置自定义文字样式。

此标签是没有语义的,它的作用就是为了设置单独的样式用的。
在这里插入图片描述
span写在head里,相当于给某些字体设置设置了全局的样式,段落中某文字需要这样的设置,就在该文字前后添加上span标签。

标题标签

<h1> </h1>   <!-- 1级标题 -->
<h2> </h2>  <!-- 2级标题 -->
<h3> </h3>  <!-- 3级标题 -->
<h4> </h4>
<h5> </h5>
<h6> </h6>

标题标签一共有6个,h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。
在这里插入图片描述

div标签

据说这是个万能标签。用来自定义某块。

在网页制作过程过中,可以把一些独立的逻辑部分划分出来,放在一个<div>标签中,这个<div>标签的作用就相当于一个容器。

语法:

<div>…</div>

header标签

header标签即头部标签

<body>
    <header>头部标签</header> <!--头部标签-->
    <p>段落</p> <!--段落标签-->
</body>

footer标签

<body>
    <header>我是头部标签</header>
    <footer>尾部标签</footer>
</body>

secton标签

<body>
    <header>我是头部标签</header>
    <secton>我是一个区域</secton>
    <footer>我是底部标签</footer>
</body>

aside标签

aside标签,定义一个侧边栏区域。

序列标签

<ol> ... <ol> 表示在里面可以定义一个有序的列
在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Web前端学习(四)HTML5语义化标签 的相关文章

  • HTML

    HTML 下拉框和文本域 文件域 1 下拉框 在平时我们填问卷或者冲浪的时候做筛选的时候都会遇到下拉框 html写一个下拉框的方式是使用select标签 name和id是默认属性
  • html css 和 js 如何协同工作的

    html css 和 js 如何协同工作的 一个简单的登录样式的demo 在html中通过 标签引入对应的css文件 例如
  • HTML基础

    超文本标记语言 英语 HyperText Markup Language 简称 HTML 是一种用来结构化 Web 网页及其内容的标记语言 网页内容可以是 一组段落 一个重点信息列表 也可以含有图片和数据表 正如标题所示 本文将对 HTML
  • 前端src和href的区别

    src和href的作用都是用于请求资源 区别 1 请求资源类型不同 href 超文本引用 用于建立文档与资源的联系 常用的有 link a a href http www w3school com cn W3School a src 将其所
  • HTML 文件中引入高德地图

    准备工作 1 在高德开放平台 注册开发者账号 2 登陆之后 进入 应用管理 点击 我的应用 选择右上角 创建新应用 3 为应用添加 Key 在 服务平台 一项选择 Web 端 JSAPI 页面实现 1 创建一个div 作为地图的容器 2 设
  • 在html中如何使div在页面中居中显示

    在html中如何使div在页面中居中显示 最近无聊中又再温习了下html 发现好多东西都忘了 尝试着写了一个html网页 结果就连div如何在页面中居中显示都查了好久才弄出来 其实我不知道为什么这样可以实现 因为css还没仔细研究过 等我参
  • 如何使用github搭建一个属于自己的网址

    如何使用github搭建一个属于自己的网址 个人博客 前言 优点 1 现在大部分的个人网页都是通过阿里等平台租用一个域名 使用github pages可以免费拥有一个属于自己的域名 2 github中的每一个repository 库 都可以
  • HTML 取消input自动提示

    input 输入框有提示功能 当你之前输入过一些内容 你下次打入相关字符的时候 默认会有之前输入的一些相关的字符的提示 这个提示一般来说还是很好的 但是 有时候 我们想自己输入 不想要提示 如果不需要提示 则将 autocomplete设置
  • HTML怎么插入一段代码

    之前学习了点HTML的基础知识 在工作中给别人发邮件的时候 使用HTML插入超链接 这回需要插入一段代码块 语法 pre pre 将需要传入的代码放在 pre 和 pre 之间就可以了 浏览器自动识别 示例 p 这是一段代码块 p pre
  • Antv/G2 柱状图

    Antv G2 教程 G2 是一套基于图形语法理论的可视化底层引擎 以数据驱动 提供图形语法与交互语法 具有高度的易用性和扩展性 使用 G2 无需关注图表各种繁琐的实现细节 一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互
  • html form 表单

    定义 form 表单在网页中主要负责数据采集功能 属于一个容器标记 表单组成 一个表单由 form元素 表单控件 和 表单按钮 组成 1 form元素 form元素用来创建表单 语法格式如下
  • img图片加载失败?

    问题场景 在工作中经常会使用 lt img gt 标签进行图片展示 但是经常有图片加载失败的情况发生 图片地址不存在 图片已经删除等 场景再现 图片加载失败时的用户体验是很不好的 虽然 lt img gt 标签有alt属性可以展示文本 但是
  • HTML学习(二)HTML基础

    以这个为例 h1 我的第一个标题 h1 p 我的第一个段落 p DOCTYPE 前用来申明这是一个html 这里的html不区分大小写 HTML标题 HTML 标题 Heading 是通过 h1 h6 标签来定义的 h1 1级标题 h1 H
  • html 在html文件中循环遍历数组并展示

    用html文件实现一个简单的遍历数组并输出到页面上面
  • HTML在工作中的使用

    本文是在学习HTML的时候 心血来潮尝试的做法 纯属瞎玩 不可当真 示例 工作中编辑邮件 在管理系统上进行任务编辑 描述时 都可能会使用到HTML的简单知识 有一些简单的标签可以帮助我们更好的完成工作 比如字体加粗 换行等 比如我在办公系统
  • Web前端学习(四)HTML5语义化标签

    语义化 语义化实际上就是将用一些标签使浏览器能够识别到标签含义 比如什么时候使用标题标签 什么时候使用段落标签 适当的使用这些标签使浏览器能够识别到标签的含义 并作出相应的响应 语义化标签 段落标签 p p p 段落文本 p 新开始一段文字
  • web前端基础:HTML文字和段落标签

    标题标签 h1 h1 h6 h6 段落标签 p p align对齐属性值 值 描述 left 左对齐 right 右对齐 center 居中对齐 justify 对行进行伸展 每行可以有相等的长度 列表标签 有序列表 ol li 列表项 l
  • jQuery操作css方法

    目录 一 jQuery可以使用css方法来修改元素样式 二 设置类的样式方法 1 添加类 2 移除类 3 切换类 三 类操作与className区别 四 显示隐藏效果 1 显示语法 2 隐藏语法 3 切换语法 五 滑动效果 1 上滑效果语法
  • Web前端学习(二)HTML和CSS的关系

    此节 应该上手写第一个Web网页Hello World 这在之前学习HTML基础的时候已经写过了 这里不多说 本节 主要看一下HTML和CSS之间是怎么协同工作的 话不多说直接上代码 例 为Hello World添加样式
  • ThinkPHP 关闭调试模式

    ThinkPHP有专门为开发过程而设置的调试模式 开启调试模式后 会牺牲一定的执行效率 但方便了不少 同时除错功能也非常值得 开启调试模式 config app php 文件 return 应用名称 app name gt 应用地址 app

随机推荐

  • 零信任架构简介

    2021 年被誉为网络安全元年 种种因素极大的驱动了零信任成为安全新风口 零信任也无疑成为了整个安全圈包括网络安全领域最热门的词汇之一 什么是零信任 零信任既不是单一的产品 也不是单一的技术 它是一种安全理念以及安全架构 核心原则是持续验证
  • SV中program & module

    相同之处 1 和module相同 program也可以定义0个或多个输入 输出 双向端口 2 一个program块内部可以包含0个或多个initial块 generate块 specparam语句 连续赋值语句 并发断言 timeunit声
  • GPS 的PPS

    校准RTC时间的方法 首先需要一个准确的外部信号 比如GPS来的秒信号 或者其它很准确的信号 然后通过定时器来测量RTC的晶振误差 然后再对该误差进行校准 面接收机GPS的秒脉冲精度 也就是相邻两个秒脉冲上升沿的间隔精度能到100ns 授时
  • HTML+CSS+JS制作【飞机大战】小游戏(键盘版和鼠标版)

    文章目录 一 效果演示 设计思路 二 鼠标版飞机大战代码展示 1 HTML结构代码 2 CSS样式代码 3 JavaScript代码 js js文件 plane js文件 三 键盘版飞机大战代码展示 1 HTML结构代码 2 CSS样式代码
  • eclipse下maven打包失败(Please ensure you are using JDK 1.4 or above and not ......

    在eclipse下用maven编译时 可能会失败 报出以下提示 ERROR Unable to locate the Javac Compiler in ERROR C Program Files Java jre1 8 0 72 lib
  • 【ABviewer从零开始教学查看器篇①】3D查看器和3D剖面板

    ABViewer是一款高质量 高效率 低成本的多功能设计及工程文档管理工具 能为您提供全面的专业的浏览及编辑功能 同时支持30多种光栅和矢量图形格式 在小编看来 ABViewer是一款非常简单且实用的CAD文档查看与编辑器 对于使用小白可能
  • 华为云计算相关知识点

    云计算离不开网络基础设施 云计算中的网络分为不同的平面 管理平面 负责整个系统的监控 操作维护 系统配置 系统加载 告警上报 和虚拟机管理 创建 删除虚拟机 虚拟机调度 等 存储平面 主要为存储系统提供通信平面 并未虚拟机提供存储资源 用于
  • 你的数据隐私值多少钱?也许已有答案了

    全文共6032字 预计学习时长12分钟 图片来源 Timo Lenzen 对于一些大型科技公司来说 这一年侵犯用户隐私付出的代价变高了 未来还会更高吗 今年7月 脸书在受到有关泄露数亿用户数据隐私的指控后 同意缴纳50亿美元的罚金 同一周内
  • 【TOOLS】Python 3利用SMTP进行邮件Email自主发送

    作者 Che Hongshu 来源 AI蜗牛车 ID AI For Car 一 前言 利用Python进行邮件的发送 这个功能自我感觉主要应用于检测或者报告之类 我两次运用这个功能 第一次用在主要发送实时的数据给一个邮箱 第二次用是检测挂在
  • VS调试:函数断点与数据断点

    断点 是Debug过程中最常用的功能 关于断点VS还有很多高级功能 本文使用的是VS2017 介绍函数断点与数据断点的使用场景以及使用方法 1 普通断点 普通断点是最常接触的断点 VS中 在代码行左边栏灰色区域点击 或者把光标放在某代码行按
  • 使用Python编写Maya脚本插件批量导入Obj文件

    最近开发中遇到需要使用Python语言编写Maya脚本 要求使用脚本选择某一磁盘路径 脚本根据路径自动导入路径与子目录下的所有OBJ文件 并重命名它们 在Maya中 有自带的脚本编辑器供我们使用 这使得我们编写代码非常轻松 打开脚本编辑器
  • Installation did not succeed. The application could not be installed: INSTALL_FAILED_USER_RESTRICTED

    当我们第一次在我们的手机上 也就是物理设备上 运行我们的写好的安卓应用程序时可能会报以下错误 Session app Installation did not succeed The application could not be ins
  • 互斥锁的实现细节

    首先 一个互斥锁要实现什么功能 一个互斥锁需要有阻塞和唤醒功能 实现阻塞和唤醒功能需要哪些要素 需要有一个标记锁状态的state变量 需要记录哪个线程持有了锁 需要有一个队列维护所有的线程 另外 state和队列中为了实现线程安全都用到了C
  • Java - 将base64编码解码成图片

    为了方便测试 我们可以使用一个图片编码网站 将图片进行base64编码 解密的代码如下 public static String generateImage String base64 String path 解密 try String s
  • 计算机视觉(十六):目标检测概述

    1 什么是目标检测 目标检测 Object Detection 的任务是找出图像中所有感兴趣的目标 物体 确定它们的类别和位置 例子 确定某张给定图像中是否存在给定类别 比如人 车 自行车 狗和猫 的目标实例 如果存在 就返回每个目标实例的
  • 配置哨兵监控Redis运行情况

    Redis的主从架构 如果master发现故障了 还得手动将slave切换成master继续服务 手动的方式容易造成失误 导致数据丢失 那Redis有没有一种机制可以在master和slave进行监控 并在master发送故障的时候 能自动
  • 动态链接库(二)--动态链接库的创建

    开发环境 系统 Win10企业版 64位 vs版本 Microsoft Visual Studio 2010 版本10 0 Dll项目创建 为从头了解dll项目中各文件的来源 这里暂不使用vs新建项目列表中的动态链接库 DLL 向导 选择创
  • OJDBC8 12.2.0.1下载

    一 进入oracle官网 注册oracle账户 登入oracle官网 二 在oracle官网找到ojdbc8的下载地址 地址如下 https www oracle com database technologies jdbc ucp 122
  • The Backus-Naur Form (BNF) & The Extended Backus-Naur Form (EBNF)

    The Backus Naur Form BNF The Backus Naur Form BNF is a notation used for formal description of the syntax of programming
  • Web前端学习(四)HTML5语义化标签

    语义化 语义化实际上就是将用一些标签使浏览器能够识别到标签含义 比如什么时候使用标题标签 什么时候使用段落标签 适当的使用这些标签使浏览器能够识别到标签的含义 并作出相应的响应 语义化标签 段落标签 p p p 段落文本 p 新开始一段文字