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框架-----标签(上) 的相关文章

  • ASP.Net 控件的 InnerHTML 和 InnerText 属性之间的区别?

    例如 在使用 ASP NET 控件时 h1 text h1 如果我们想更改标题的文本 我们可以通过两个属性来完成InnerHTML and InnerText 我想知道这两个属性之间的基本区别是什么 InnerHtml让您直接输入 HTML
  • 将单选按钮放置在图像上

    我试图在图像上的确切位置放置一些单选按钮 我已将两者都放在 Div 中 但我不知道下一步该怎么做 这是我想要放置单选按钮的位置 红色圆圈 到目前为止 这是我的代码 center display block margin left auto
  • 禁用输入中的空格,并允许后退箭头?

    我试图禁用用户名文本字段中的空格 但是我的代码也禁用后退箭头 有什么办法也允许后退箭头吗 function var txt input UserName var func function txt val txt val replace s
  • ReactTable 修复了最后一行

    我正在使用 ReactTable 最后我需要创建一些摘要 当分页存在时 它每次都应该可见 可以用react table来实现吗 我可以通过创建下一个表来部分解决这个问题 但我没有找到如何隐藏标题的方法 另一个问题是调整列宽度时 它不会应用于
  • @Font-face 不适用于 IOS

    我正在开发一个 WordPress 网站 并且在每个页面上都有一个 H1 标签作为该页面的标题 我正在使用 font face 的特殊字体 它在每个浏览器的 Windows 上都运行良好 但是当我切换到 Mac 时 它不会显示 h1 标签
  • 如何观察包含许多 sass 文件的整个目录/文件夹的变化

    我如何跟踪包含许多 sass 文件的整个目录的更改 我正在使用以下命令来观察 sass 的变化 file sass watch style scss style css 但是如何观察包含许多 sass 文件的整个目录 文件夹的变化 只需使用
  • 在导航栏下方添加背景图片

    我想在导航栏下方添加背景图像 具有完整窗口大小的宽度 它不应覆盖整个页面长度 而是从导航栏菜单下方开始 一直向下直到特定的指定高度 但宽度是满的 我参考了以下内容 但仍然没有结果 在 Twitter Bootstrap 中的导航栏下方启动背
  • 具有最大高度和滚动的动态内容的对话框+页脚CSS

    我有一个dialog with 位置 绝对 and a 最大高度放 这最大高度财产是set从外面by a javascript框架 jQuery UI 对话框 所以我无法控制它 里面有 2 个 div 其中一个充满了动态内容 and a 静
  • React JS - 单击时更改颜色并将默认颜色放在所有其他颜色上

    我有 x 个渲染数文章预览依赖于 API 调用的组件 div div Object keys images map index i gt return div div
  • 使用 bootstrap 将搜索图标放入文本框中

    我默认使用引导程序 文本框占据列的全宽 我想将搜索图标放在文本框的末尾 我的代码是这样的 div class container div class row div class form group col lg 4 div div div
  • 如何使用 css 在标题的两侧放置实线? [复制]

    这个问题在这里已经有答案了 可能的重复 如何在标题文本上制作字段集图例样式的 背景线 https stackoverflow com questions 5985009 how can i make a fieldset legend st
  • 使用php表单更改href链接

    我正在制作一个带有搜索栏的网站 我想让搜索栏在 搜索 并显示结果后具有交互性 所以我希望 href 根据正在使用的 Id 进行更改 例如 有人搜索 Pinecones 如果它在数据库中 它将有一个 ID 在本例中是 4 一旦他们搜索它 它就
  • 使用 PHP 获取 2 个同名 HTML 输入标签的值

    假设我有下表
  • 如何创建自定义元素扩展类的新实例

    我正在尝试以下示例谷歌开发者网站 https developers google com web fundamentals getting started primers customelements extendhtml我收到错误 Typ
  • Menu.Item 中的 Antd 自动换行

    可以在 Menu Item 组件中应用自动换行吗 示例不起作用
  • 使用本机 JavaScript 获取过渡中的 CSS 值

    这个问题之前被问过 但答案使用了 jQuery here https stackoverflow com q 8920934 3186555 因此 我将调整问题以专门询问native解决方案 to 最小化依赖关系 假设您有一个 div 然后
  • 水平平滑滚动 100px

    Heyjo problem 一周以来我一直在寻找 javascript 或 jQuery 代码 以便在我的网站上实现滚动按钮 我失败的那一刻是按钮应该多次工作的时候 他的任务不是滚动到专用元素 而是应该向左滚动 例如 100px 此外 滚动
  • javascript:window.print() 打印 2 页,而我有 1 页

    我有一个简单的 HTML 文档 其中仅包含图像标签 我想在文档加载后打印图像 我的代码 img src form1 jpg alt form1 style margin 0 auto display block 它可以工作 但问题是它打印图
  • 如何修复“没有这样的文件或目录,lstat 'scss/'”?

    我正在尝试遵循 youtube 上的简单教程他尝试使用终端运行 npm 脚本 sass 文件 当我执行命令时npm 运行 sass显示错误消息错误 ENOENT 没有这样的文件或目录 lstat scss 我认为问题在于文件的路径或文件的权
  • 更改javascript nodejs中所有页面的href url

    我已经实现了具有多种语言下拉菜单的引导导航栏 当我选择语言时 它将翻译页面 如何更改其他页面的 url 和按钮文本 当我选择french 将所有网址更改为 fr about and fr contact 如何使用 JavaScript 进行

随机推荐

  • 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 文本格式化标签 前言 现在学前端工程师的都很难找工作 懂的都懂了 因为学前端一般去做那些页面可视化处理 而学