html框架-----标签(上)

2023-11-16

 

目录

前言:

标签简介

1. HTML的基本结构

(1)html标签

 (2)head标签

 (3)body标签

2. 标题标签

3. 段落标签

4. 文本格式化标签


前言:

        现在学前端工程师的都很难找工作,懂的都懂了,因为学前端一般去做那些页面可视化处理,而学后端的话不仅仅要了解前端的相关知识,还得对后端服务器和操作系统玩得顺溜,说不定以后前端可能会并入后端的一部分。当然,也不能因为说前端没钱途而说完全不学前端,如果你能学得特别好的话,说不定也可以去找一个非常好的工作。今天我们就开始一起来学习一些前端基础知识,学会了之后你基本上就可以做一些个人网页。

标签简介

        上了这么多年网了,网页的架构基本上就是一种标签语言,常见的都是html文件, 如果你想查看网页的代码框架的话,鼠标右键点击检查就行了,然后显示出来的就是你这个网页的代码骨架了,如图所示:

 

 学习html其实就是学习标签,标签是一种超文本标签语言(html),这些文本包括.html文件、图片、视频、文字等等……我们可以去通过这些标签语言来实现我们想要组成的效果,去做出我们想要的可视化界面。

 标签的组成

单标签:<关键字>

双标签:<关键字>  …… </关键字>   (开始标签   标签体(文本)   结束标签)

 一般编译软件的话我个人建议去用VScode会比较好,其实你用一个txt文件都可以去写代码,写好了之后把尾缀改成.html就行了,看个人喜好吧。

1. HTML的基本结构

(1)html标签

结构:<html> </html>

说明:这是一个根标签,也是最大的网页结构

 (2)head标签

 结构:<head>  </head>

说明:这是一个头部标签,是用于设置相关信息的,或者导入某些资源等等(不可视部分)

 (3)body标签

  结构:<body>  </body>

说明:这是一个可视部分的标签,我们在里面就可以去写入一些可视化处理的代码或者导入一下文件资源等。

<!-- 告诉浏览器 按照html5的文档规范去解析  -->
<!DOCTYPE html>
<!-- 所有网页最大的结构 网页中所有的标签存放在html标签中 -->
<html lang="en">
<!-- 头部  不可视部分 存放页面相关的关键配置 或者 引入资源-->
<head>  
	<!-- meta标签:提供有关页面的元信息,用来设置网页的基本信息 -->
    <!-- charset:表示网页编码格式浏览器打开网页的时候会使用charset指定的编码读取整个HTML文档 -->
    <meta charset="UTF-8">
    <!-- 网页的标题信息,它会显示在浏览器标签页的标题栏中。主要用来告诉用户和搜索引擎这个网页的主要内容是什么,搜索引擎可以通过网页标题,迅速的判断出当前网页的主题。-->
    <title>Document</title>
</head>
    
<!-- 可视部分的标签内容 全部放到body标签内 -->
<body>  
    
</body>
</html>

以上这些就是一个html网页的基本标签框架了,其实就跟写作文差不多,分开头和主题还有结尾。

2. 标题标签

网页这里就分为6个标题的标签,分别是h1~h6

<h1>1级标题(主标题)</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>

在一个网页中h1标签最好是有且仅有一个,其他h标签可以根据需要出现多次。在页面中用来表示某块内容的主题。

h1标签对关键词排名有很大的推动作用,但是不能贪婪地把很多关键词都放在h1标签中,这样会分散权重,不仅不能提升排名,反而会影响主词的排

 示例:

<html>
    <head>
        <meta charset="UTF-8">
        <title>myhtml</title>
    </head>
    <body>
        <h1>一级标题   </h1>
        <h2>二级标题   </h2>
        <h3>三级标题   </h3>
        <h4>四级标题   </h4>
        <h5>五级标题   </h5>
        <h6>六级标题   </h6>
    </body>
</html>

效果:

3. 段落标签

结构:<p>  </p>

说明:段落标签由开始标签<p>和结束标签</p>组成,开始和结束标签之间的内容会被视为一个段落。段落之间存在间隙,要用户的体验会更好。段落标签会独占一整行的,在网页当中我们有单独显示的一行文字我们是可以使用到p标签的。

 示例:

<html>
    <head>
        <meta charset="UTF-8">
        <title>myhtml</title>
    </head>
    <body>
        <p>人生得意须尽欢,莫使金樽空对月。</p>
        <p>天生我材必有用,千金散尽还复来。</p>
    </body>
</html>

效果:

4. 文本格式化标签

通过文本标签我们可以格式化文本(为文本添加样式),例如使文本加粗、倾斜或者添加下划线等。

标签 说明
<b>...</b><strong>...</strong> 加粗
<u>...</u><ins>...</ins> 下划线
<i>...</i><em>...</em> 倾斜
<s>...</s><del>...</del> 删除线

 默认情况下,<strong><b>标签都可以使文本以粗体展示标签中的文本,但是<strong>标签的语义是标签中的内容具有很高的重要性,而<b>标签的语义仅仅是加粗文本以引起用户的注意,并没有特殊的意思。

        当然,这些标签也是可以嵌套去所以的,比如我要一段文字既加粗又要又下划线就可以嵌套<b>和<u>标签实现

 示例:

<html>
    <head>
        <meta charset="UTF-8">
        <title>myhtml</title>
    </head>
    <body>
        <p><b>这是加粗标签</b></p>
        <p><u>这是下划线标签</u></p>
        <p><i>这是倾斜标签</i></p>
        <p><del>这是删除线标签</del></p>
        <p><b><u>这是既加粗又有下划线嵌套</u></b></p>
    </body>
</html>

效果:

 好了,以上就是今天的全部内容了,你们是不是觉得有点意思呢?

 分享一张壁纸:

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

html框架-----标签(上) 的相关文章

  • 如何解决此错误:属性 rel 的原始源值错误

    我正在尝试使用 w3c 验证我的网站 但出现错误 Bad value original source for attribute rel on element link The string original source is not a
  • 理解 z-index:该元素如何出现在其父级同级元素的前面?

    为什么当我删除时红色 div 位于绿色 div 前面z index from wrapperRed 感觉像z index是沿着链条向上继承的 如果我改变z index将绿色 div 更改为 6 即使删除第一句中描述的行后 它仍保留在红色 d
  • save_and_open_page 已停止提供我的 CSS

    我的测试设置工作得很好 每当我打电话时 都能提供正确格式的 css 页面save and open page从测试中 然后 我设置了一些 javascript 测试 并对我的设置进行了一些更改 抱歉 我无法详细说明所有内容 我没有足够详细地
  • 多语言标记验证器

    是否有免费的在线多语言标记验证服务可以正确识别和验证多语言标记 我确实找到了totalvalidator和htmlvalidator 但这些是 付费 非基于网络的解决方案 Use http validator w3 org nu http
  • 使用 python 在一个 html 页面中显示分割数据框的 HTML 代码

    我是 html css 新手 所以对以 html 格式显示的数据有疑问 我有一个很长的列表 我想将其拆分并以 html 格式显示为两个单独的列 例如 而不是 Col1 Col2 1 a 2 a 3 a 4 a 5 b 6 b 7 b 8 b
  • 在 HTML5 Javascript 中将 BlobBuilder 转换为字符串

    function blobToString blob var reader new FileReader var d reader onloadend function d callback reader result console lo
  • 在 Angular html 模板中访问常量枚举

    假设我有一个常量枚举 export const enum MyConstEnum Value1 Value1 Value2 Value2 Value3 Value3 现在我想在我的 Angular 模板中使用它 span This has
  • 在 ember-cli 中安装 Foundation 5

    我对 ember 相当陌生 对构建工具也很陌生 我目前正在使用通常的基础安装以及基础 cli 和指南针来编译我的 css 这有点痛苦 并且对于团队工作来说非常糟糕 我认为用 Bower 安装文件并使用会更好ember cli compass
  • 将鼠标悬停在原点时会触发translateY()

    当您将光标移动到按钮底部时 是否可以无限期地不触发动画 它看起来是这样的 gif https i stack imgur com QwdHW gif and codepen https codepen io jaeyson pen GwwJ
  • VueJS 中数据无法正确显示

    我的 VueJS 代码有一个小问题 在 输出 压缩的 GS1 数字链接 URI 部分中 When there is no result it should have nothing display like this I have remo
  • HTML W3C 有效元素 - DIV 在 TD 内有效吗?

    我正在和一位同事争论 但找不到证据证明我们俩都是对的 我之前已经看过给定标签的有效元素列表 但只是无法再次找到它 有人能指出我正确的方向吗 我对 XHTML 很好奇 但分歧具体在于 DIV 标签在 HTML 4 01 中的 TD 标签内是否
  • 导航栏下拉菜单(折叠)在 Bootstrap 5 中不起作用

    我在尝试使用以下命令创建响应式菜单或下拉按钮时遇到问题Bootstrap 5一切似乎都正常 导航图标和下拉图标出现 但它不起作用 当我单击nav图标或dropdown按钮 无dropdown menu apears 我想特别提到的是 我还包
  • 如何使用 Scrapy 从网站获取所有纯文本?

    我希望在 HTML 呈现后 可以从网站上看到所有文本 我正在使用 Scrapy 框架使用 Python 工作 和xpath body text 我能够获取它 但是带有 HTML 标签 而且我只想要文本 有什么解决办法吗 最简单的选择是ext
  • 删除 IE9 边缘周围的 2px 灰色边框

    我正在尝试对这个网站进行编码 尝试关键字 并且我正在尝试找出如何删除这个阴影2px灰色边框延伸到 IE9 窗口的内部 至少顶部 左侧和底部 我的边距设置为零 因此所有页面元素都到达页面的最边缘 但使用 IE9 它们会停在这个灰色边框处 我没
  • 合并 2 个大型 CSS 文件的有效方法

    我正在寻找一个可以合并 2 个大型 CSS 文件的工具 到目前为止我尝试过的所有方法 例如CSSMerge 都没有成功 其中一些只是随机删除属性 其他人则因 webkit 和 moz 等非标准属性而窒息 并给我错误 我还需要保留每条规则大小
  • -webkit-box-shadow 与 QtWebKit 模糊?

    当时有什么方法可以实现 webkit box shadow 的工作模糊吗 看完这篇评论错误报告 https bugs webkit org show bug cgi id 23291 我认识到这仍然是一个问题 尽管错误报告被标记为RESOL
  • CSS 到底如何计算相对尺寸

    我想更好地理解某些 CSS 行为 这与具体问题无关 我只是在调试网站时遇到的 让我们在固定位置的 div 中放置一个全宽图像 div img style width 100 src https via placeholder com 150
  • 如何在模态打开时防止主体滚动

    我在用着W3schools 模态脚本 https www w3schools com howto tryit asp filename tryhow css modal我想添加一个功能 防止模型打开时整个主体滚动 我根据我的需要对原始脚本做
  • 为什么我的交互式图像仅在 Internet Explorer 上出现故障?

    我的问题 我为自己制作了一个图像地图 交互式图像 它在 Chrome safari 和 Firefox 上完美运行 然而 当我在可怕的互联网浏览器上尝试它时 它真的很糟糕 这些小点应该扩展到更大的盒子中 在互联网浏览器上它要么不起作用 要么
  • 如何从浏览器向服务器发送“页面将关闭”消息?

    我想向每个 html 文档添加一个脚本 JavaScript 该脚本向服务器发送两条消息 页面确实打开了 页面将关闭 此消息包含页面打开的时间 打开消息应在文档加载时 或加载完成时 发送 这是简单的部分 The close message

随机推荐

  • Android 13 - Media框架(9)- NuPlayer::Decoder

    这一节我们将了解 NuPlayer Decoder 学习如何将 MediaCodec wrap 成一个强大的 Decoder 这一节会提前讲到 MediaCodec 相关的内容 如果看不大懂可以先跳过此篇 原先觉得 Decoder 部分简单
  • CNCF 官方大使张磊:什么是云原生?

    作者 张磊 阿里云容器平台高级技术专家 CNCF 官方大使 编者说 从 2015 年 Google 牵头成立 CNCF 以来 云原生技术开始进入公众的视线并取得快速的发展 到 2018 年包括 Google AWS Azure Alibab
  • 关于使用MSYS2安装mingw-win64下载两组包中出现ERROR导致升级全部失败的解决方案

    MSYS2网站操作 在最后一步阶段出现ERROR错误 导致升级全部失效 即使是多次重复尝试也不能解决 进行如下操作 pacman S mingw w64 x86 64 toolchain pacman S mingw w64 x86 64
  • jmeter实战案例

    一 前言 以前做了个抽奖活动的需求 需要做压测 只是简单帮助测试去做过压测 但没有自己从头到尾做过 最近再次碰到需要做压测 百度了一下使用教程 现在做个记录 以便以后做压测 直接借鉴教程 二 流程 1 启动jmeter 下载jmeter后
  • 阿里云云数据MongoDB版连接

    阿里云MongoDB连接 一 MongoDB Serverless版 1 登录进入阿里云控制台之后在搜索栏搜索mongodb进入MongoDB控制台 2 选择你所购买的资源区域 点击左侧server less实例列表找到自己的资源 如果是刚
  • 代码检查、走查与评审

    桌上检查 桌上检查是一种程序员检查自己的原程序的方法 桌上检查的目的是发现程序中的错误 桌上检查的检查项目主要有检查变量 标号的交叉引用表 检查子函数 宏 函数 等价性检查 常量检查 标准检查 风格检查 比较控制流 选择 激活路径 补充文档
  • 覆盖 Safari、Edge,主流浏览器几乎均已实现 WebGL 2.0 支持

    从 Firefox 到 Safari 所有的主流浏览器现已经全部支持 WebGL 2 0 近日 专注于制定开放标准的行业协会Khronos Group 重磅宣布当下所有主流浏览器均已实现了对WebGL 2 0的支持 简单来看 无需使用插件即
  • 照片的35x45,300dpi怎么弄

    做技术的难免会遇到一些杂活 一个35x45的照片 300dpi 要改为34x39 300dpi的图片 好像不太会 不过这样子弄 叫对方不要用微信发照片 微信强制会把照片改为96dpi 宽高都变了1个像素 因此照片压缩后再让其发过来 收到照片
  • LeetCode 108. 将有序数组转换为二叉搜索树Golang版

    LeetCode 108 将有序数组转换为二叉搜索树Golang版 1 问题描述 给你一个整数数组 nums 其中元素已经按 升序 排列 请你将其转换为一棵 高度平衡 二叉搜索树 高度平衡 二叉树是一棵满足 每个节点的左右两个子树的高度差的
  • 华为OD机试真题-积木最远距离【2023Q1】

    题目描述 小华和小薇一起通过玩积木游戏学习数学 他们有很多积木 每个积木块上都有一个数字 积木块上的数字可能相同 小华随机拿一些积木挨着排成一排 请小薇找到这排积木中数字相同且所处位置最远的2块积木块 计算他们的距离 小薇请你帮忙替她解决这
  • React & JSX 入门

    React JSX 入门 div div
  • 1600*D. Road Map(数学

    解析 记录每个点的父节点和子节点 从新的根节点开始遍历 遍历所有的非父结点即可 include
  • (一)大彩屏幕 进行串口通信

    一 简介 大彩屏幕通过串口收发信息 主要用来显示 装好软件 官网有或找技术人员要 VisualTFT 虚拟串口驱动 USB驱动 1 大彩屏幕来自大彩科技 使用该屏幕时 需要注意获取最新的软件版本 最新的Demo 这一点 你可以直接联系客服或
  • Vue刻度尺组件

    1 安装刻度尺组件 npm install cs ruler 2 在main js中全局引入组件 import CsRuler from cs ruler 刻度尺组件 Vue use CsRuler 3 组件使用
  • C#序列化和反序列化(json)

    一 什么是Json json是存储和交换文本信息的方法 类似xml 但是json比xml更小 更快 j更易于解析 并且json采用完全独立于语言的文本格式 即不依赖于各种编程语言 这些特性使json成为理想的数据交换语言 json使用Jav
  • UE4 命令工具打包

    用cmd进入UE4引擎的目录 Engine Build BatchFiles找到RunUAT bat cmd中输入以下命令 RunUAT BuildCookRun project F VidaUpdater VidaUpdater upro
  • QT 语言的学习 day10 数据库的学习 增删改 (QT 自带的数据库 QSqlDatabase数据库)

    1 基本知识的学习 Qt 提供了 QtSql 模块来提供平台独立的基于 SQL 的数据库操作 这里我们所说的 平台独立 既包括操作系统平台 有包括各个数据库平台 另外 我们强调了 基于 SQL 因为 NoSQL 数据库至今没有一个通用查询方
  • 1分钟让您的.NET WinForm应用程序变成现代互联网浏览器

    目录 前言 一 WebRuntime是什么 二 使用步骤 三 具体案例 总结 前言 让自己的应用拥有对接互联网的能力 应该是绝大多数开发者的愿望 这里给大家推荐一个开源项目 WebRuntime 通过这个项目 开发者可以在完全保留自己应用架
  • ISO/IEC技术标准-RFID

    ISO IEC技术标准规定了RFID有关技术特征 技术参数和技术规范 主要包括ISO IEC 18000 空中接口参数 ISO IEC 10536 密耦合 非接触集成电路卡 ISO IEC 15693 疏耦合 非接触集成电路卡 和ISO I
  • html框架-----标签(上)

    目录 前言 标签简介 1 HTML的基本结构 1 html标签 2 head标签 3 body标签 2 标题标签 3 段落标签 4 文本格式化标签 前言 现在学前端工程师的都很难找工作 懂的都懂了 因为学前端一般去做那些页面可视化处理 而学