首页 > 其他分享 >02-Html中的常用标签

02-Html中的常用标签

时间:2023-05-11 20:13:36浏览次数:53  
标签:02 文件 行内 HTML 标签 元素 Html 字体

HTML 常用的标签

新建一个 Html 文件

基础代码搭建、解释以及快捷键
快捷键 默认情况下 英文状态下的 ! + enter 快速生成

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!-- 设置网页的编码格式为utf-8, 其他的还有gb2312、gbk、unicode、utf-8 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 兼容IE浏览器,现在不考虑 
	X-UA-Compatible 是针对 IE8版本的一个特殊文件头标记,用于为 IE8 指定不同的页面渲染模式 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 主要针对移动端 --- 后期课程 -->
    <title>Document</title>
  </head>

  <body></body>
</html>

面试题:有什么作用?
告诉浏览器,当前的文档类型是一个 html 文件, 它不属于 HTML 标签,而是一条指令

DOC document 文档 TYPE 类型
HyperText Markup Language 超文本 标记 语言
超文本:文本内容 和 非文本内容(图片、 音频、 视频)
标记:<单词>
语言:编程语言

页面中的基础标记【标签、 元素、 盒子】

<html></html>
<!-- 根元素,在根元素之中包含两大块主要内容 -->
<head></head>
<!-- 用于放置网页的元信息。它的内容不会出现在网页上,而是为网页渲染提供额外信息 -->
<body></body>
<!-- 网页的主体内容 body,用于书写浏览器中展示的所有内容 -->
<meta />
<!-- 元标签,用来表示网页的基础配置 -->
<title></title>
<!-- 定义网页的标题,标题内容会显示在浏览器的标签栏上 文件快捷键 Ctrl + / 注释文本,
	被注释的文本,不会体现在网页之中  -->

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<!-- 定义网页的小logo,logo内容会显示在浏览的标签栏之上 
      制作 .ico文件网站 https://www.bitbug.net/ -->

HTML 的语法

 标记:<单词> , 也叫做 标签,也叫做 元素,也叫做盒子
  单标签 : 非封闭类型标签
        只一个 <>
        / 可带可不带 , 建议带上
        <meta /> <img /> <br/> <hr/>

  双标签 : 封闭类型标签
        有两个<> ,开始标签和结束标签
        / 必须带上
        <html></html> <div></div> <p></p>

  HTML 提示:使用小写标签
        HTML 标签对大小写不敏感:<P> 等同于 <p>。许多网站都使用小写的 HTML 标签。
        因为万维网联盟(W3C)在 HTML 4 中推荐使用小写,而在未来 (X)HTML 版本中强制使用小写

 <标签名  属性名="属性值" 属性名="属性值"></标签名>
        标签名字和属性之间需要有空格,键值对
        属性和属性值之间需要 = 连接
        每一组键值对 之间需要有空格
        属性值需要带引号
        常见的属性值 id="",class="",

 <meta charset="utf-8">

        人的体貌特征,eg: 身高, 体重
        体貌特征的值,eg: 178cm, 75kg

HTML 常用标记/标签/元素/盒子

 1. 注释
 <!--  -->
        可以将注释插入 HTML 代码中,这样可以提高其可读性,使代码更易被人理解。
        浏览器会忽略注释,也不会显示它们
        合理地使用注释可以对未来的代码编辑工作产生帮助
        快捷键 Ctrl + /

 2. 标题元素
 <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>
        特点:  字号由大到小,h1最大,h6最小
        自动加粗
        有默认的间距
        自动换行(独占一整行的意思)
        应用: h1作为一级标题应用在文章标题或者是布局logo区域
              h2,h3作为的文章内部的标题
              h4,h5,h6 根据实际情况进行使用

 2. 段落元素
 <p></p>
        包裹一段描述性的文本
        有默认的间距
        在一个段落里面想使用空格
              方式一:&nbsp;所占位置没有一个确定的值,这与当前字体字号都有关系.
              方式二:&emsp;所占位置就是当前字体的一个字体大小

 3. 换行的标签
 <br/>
     强制换行

 4. 水平分割线
 <hr/>
     应用:分割区域内容

 5. 字体加粗的标签
 <b></b>
 <strong></strong>有强调的意思

 6. 字体倾斜的标签
 <i></i>
 <em></em>有强调的意思

 7. 加下划线的标签
 <u></u>

 8. 加删除线的标签
 <s></s>
 <del></del>有强调的意思

 9. 加上角标的标签
 <sup></sup>

 10. 加下角标的标签
 <sub></sub>

 11. 字体标签
 <font color="" size="" face=""></font>
        color : 设置字体的颜色
              1、直接颜色的英文名称  skybule pink red ...
              2、十六进制颜色 #_ _ _ _ _ _    [0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f,]
        size : 设置字体的大小
              从 1 到 7 的数字、浏览器默认值是 3
        face : 设置字体的种类
        		楷体、宋体、...
              
 12. 图片标签
 <img src="" alt="" title="" width="" height=""/>
        src : 引入图片的路径 !!!路径: 绝对路径和相对路径
        绝对路径: 指是某个目录或者网站的绝对位置,可以直达想要的目标位置
              1、某目录的直达位置
              2、某完整的网站地址
              3、必须是以本地直接打开的,不然无法显示,路径是无法匹配的

        相对路径: 以引用文件所在位置为参考基础,而建立的目标路径
        1、同级:目标文件和当前文件是同级
                    路径书写===>   目标文件的名字.扩展名
        2、下级:目标文件位于当前文件的下级
                    路径书写===>   目标文件所在文件夹名字/目标文件.扩展名
        3、上级:目标文件位于当前文件的上级
                    路径书写===>   ../目标文件的名字.扩展名

        alt : 图片不显示时显示的文本,给用户提示,做图片优化
        title : 鼠标移入时显示的文本
        面试题:img标签中alt与title的区别?

        width、height : 设置图片的宽度与高度

        面试题:网页上常用的图片格式有哪些?  (像素点组成的,像素点越多会越清晰)
              1)jpg :有损压缩格式,靠损失图片本身的质量来减小图片的体积,适用于颜色丰富的图像;
              2)gif:无损压缩格式,支持透明,支持动画,适用于颜色数量较少的图像;
              3)png:无损压缩格式,支持透明,不支持动画,适用于颜色数量较少的图像;
              4)webp!!!WebP是一种有损压缩格式。不同的是,WebP格式的压缩效率更为出色
              在同等质量下,WebP格式图像的体积要比JPEG格式图像小40%。浏览网页的速度将大幅提升
              
 13. 超链接标签
 <a href="" target="" id="">给用户点击的链接的文字</a>
        href : 链接指向的页面的 URL
              暂时不知道将要跳往哪里 可以 <a href="#"></a> 作为一个空标签
        target : 在何处打开链接文档
              _self : 在当前窗口打开 (默认的)
              _blank : 在新的窗口打开
        title : 为链接添加描述性文字, 有利于SEO

  百度词条案例 !!!

        id : 特殊标识,可用于 href 的直接跳转(用于锚点)
        锚点链接,可以在同一页面内的不同位置进行跳转
              第一步:在标签内加上 id = "命名锚点名称"
              第二步:<a href="#命名锚点名称"></a>
              特殊性使用: <a href="#top">返回顶部</a> --- h5新增
              
              也可以去其他网页:<a href="mine.html#name">

        其他特殊性使用,可以利用 a 标签实现 打电话、发邮件等特殊功能
              <a href="文件所在地址" download="文件名">点击下载</a>
              <a href="tel:187****3232">拨打电187****3232</a>
              <a href="sms:187****3232">发送短信给187****3232</a>

 14. 列表标签

 + 有序列表
 <ol type="1 / A / a / i / I ">
  	<li></li>
 </ol>

 - 1数字 / A大写英文字母 / a小写英文字母 / i小写罗马数字 / I大写罗马数字
 有序列表独有属性 start="number"  规定有序列表的开始是从第几个开始的

 + 无序列表
 <ul type="disc / circle / square ">
  	<li>无序列表1</li>
 </ul>

 - disc实心圆 / circle空心圆 / square实心方块

 + 自定义列表
 <dl>
        <dt>名词</dt>
        <dd>名词解释</dd>
 </dl>
        应用:大多是网页最下方区域

 15. 容器标签
 <div></div>        无实际意义
        应用:主要是用来划分区域的

 16. 容器标签
 <span></span>      无实际意义
        应用:更改一段文本中的一部分字体样式,优点是span本身没有任何样式,span前后不换行

常用的转义字符

  空格 :&nbsp; &emsp;
  小于号 < : &lt;
  大于号 > : &gt;

  注册:&reg;
  商标:&trade;
  版权标识:&copy;

  Q: 了解其他的转义字符
  https://www.w3school.com.cn/html/html_entities.asp

标签的简单分类

  HTML元素一般分为块级元素和行内元素两种类型
  1、块级元素:<div>、<h1> ~ <h6>、<p>、 <ol>、<ul>、<li>等
        特点: 1:独占一行
              2:高度、行高、外边距以及内边距都可以控制
              3:宽度默认是父级容器宽度的100%
              4:内部可以放块级或行内元素

    注意:文字类的元素内不能存放块级元素
    <p>标签主要存放文字,因此<p>标签不能放块级,如:div

   2、行内元素(内联元素):<span>、 <b>、 <i>、 <a> 等
        特点: 1:相邻行内元素在一行上,一行可以显示多个
              2:高度、行高直接设置是无效的,
              3:水平方向的padding和margin可以设置,垂直方向的无效
              4:宽度默认是它本身内容的宽度
              5:行内元素只能容纳文本或则其他行内元素

标签的嵌套规则

  1、<h1> ~ <h6>、<p> 可以直接包含行内元素和纯文本内容,但是不能直接包含块状元素
  2、<ul>、<ol> 只能直接包含<li>元素,但是可以在<li>元素中包含其他元素
  3、<dl>只能直接包含<dt><dd>
  注意:链接内不能放链接,<a>可以放块级元素,但是给<a>转换一下块级模式最安全
  • 接课堂练习
  • 留课下练习

标签:02,文件,行内,HTML,标签,元素,Html,字体
From: https://www.cnblogs.com/fszj/p/17392076.html

相关文章

  • 2023.5.11编程一小时打卡
    一、问题描述:完成“学生cpp成绩计算”之后,修改Person和Student类,各自增加两个无参构造函数。仍以Person类为基础,建立一个派生类Teacher,增加以下成员数据:intID;//教师工号Studentstu[100];//学生数组intcount;//学生数目,最多不超过100floatcpp_average;//班......
  • 【2023.05.07 模拟赛】T3 树数树
    Description牛牛有一棵\(n\)个点的有根树,根为1。我们称一个长度为\(m\)的序列\(a\)是好的,当且仅当:\(\foralli\in(1,m],\mathrm{a}_{\mathrm{i}}\)为\(\mathrm{a}_{\mathrm{i}-1}\)的祖先或\(\mathrm{a}_{\mathrm{i}-1}\)是\(\mathrm{a}_{\mathrm{i}}\)的......
  • 2023年5月11日19:31:14
    如果不写可能自己都忘了吧。今天我终于把三更那个个人博客做完了,前面跟着他做,后面他让我们自己做,挺好的,毕竟都是一些重复的东西,自己真 正的学到了很多很多。挺开心的。下一步就是把这个项目上线,如果能够再美化一下前端就好了,所以我还要去学一点前端,但是这个计划不知道什么时候......
  • web游览器的标签页仿 ios mac 苹果的墓碑机制 (js代码)
    背景:本来项目开发系统防挂机功能,在其余游览器中均可以使用。但是呢在苹果的safair游览器中会出现几率失效,最后经过排查发现是苹果的墓碑机制导致。即:此标签页活跃,其他标签页假死。然后就导致防挂机失效了。原理:假如当前游览器中有3个标签页分别是A,B,C,每个标签页都有倒计时。正......
  • 2023.5.8
    在常见深度学习任务中,数据样本可能是图片(image)、文本(text)、语音(audio)等多种类型,在送入神经网络训练或推理前,这些数据和对应的标签均需要创建为Tensor。以下是图像场景和NLP场景中手动转换Tensor方法的介绍。对于图像场景,可使用paddle.vision.transforms.ToTensor直接将P......
  • 帆软 样式隐藏标签
    隐藏前标签样式问题说明:有系列A,B,C,D需要进行上图这种形式进行展示,但是其中有0的,不需要展示,所以需要隐藏0修改样式中标签为自定义: 修改之后的效果图如下: JS代码: function(){ if(this.value==0) { return'<tablestyle="color:'+this.color+';>'+'</table>' } el......
  • 2023年高考倒计时还有几天?支持计算倒计时天数的备忘录
    进入2023年的公历5月,对于很多家里有高三学生的网友来说,未来的一个月时间要多多关注孩子的健康、学习状况了,因为一个非常重要的考试将要来临,这就是高考。今年的高考时间依旧是公历的6月7日、8日两天时间,那么今天距离高考倒计时还有几天呢?有不少学生家长想要在手机上设置每天距离高......
  • 2023年母亲节文案怎么写?用便签提前记录
    每年公历5月的第二个星期日是母亲节,而2023年的母亲节也将在5与14日如约而至。为了表达对母亲无私付出的感恩之情,有不少网友会在这一天送给自己母亲一束鲜花、一份礼物。此外还有的人会在微信朋友圈等社交平台发表母亲节文案,来表达对母亲的感恩、祝福。不过还有一些小伙伴不知道......
  • Unity 2021.3.6f1 UnityHub 3.0.1 Win 安装图解 Unity 2021.3
     Unity2021.3.6f1UnityHub3.0.1Win安装图解Unity3D是一款跨平台的游戏引擎软件,它可用于开发2D、3D游戏以及虚拟现实、增强现实等应用程序。Unity3D提供了丰富的功能和工具,让开发者可以快速地创建高质量、交互性强的游戏和应用程序。Unity3D支持多种编程语......
  • 能粘贴Word 内容(含图片)的HTML编辑器
    ​ 图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码目前限chrome浏览器使用首先以um-editor的二进制流保存为例:打开umeditor.js,找到UM.plugins['autoupload'],然后找到autoUploadHandler方法,注释掉其中的代码。加入下面的代码://判断剪......