首页 > 其他分享 >HTML的基础标签

HTML的基础标签

时间:2024-11-08 09:50:01浏览次数:3  
标签:网页 img 标签 基础 HTML 浏览器 属性

01-基础标签

01-基础标签1. 认识HTML2. 网页基础知识3. 认识标签meta标签div标签H系列标题标签排序标签p段落标签span标签a标签 -- 超链接a标签 -- 锚点img标签其他常用标签4. 特殊符号5. 语义化√. 作业与练习

1. 认识HTML

  • HTML是Hyper Text Markup Language(超文本标记语言)的缩写,是构成Web页面的基本元素

  • HTML不是一种编程语言,而是一种描述性的标记语言,通过标识符来标识网页中内容的显示方式,例如图片的显示尺寸、文字的大小、颜色、字体等。

  • 浏览器能够对这些标记进行解释,按照要求显示出文字、图像、动画、媒体等网页内容。

  • HTML5是HTML的一个版本,该版本新增与优化了很多内容。现今,几乎所有世面流行的浏览器都能很好的支持HTML5,所以,我们后面学习的知识都以HTML5作为标准。

2. 网页基础知识

  • HTML模板的基本含义

    <!DOCTYPE html> <!--规定了浏览器文档使用哪种规范,以前需要在后面写上很长一串规范地址,现今HTML5规范无须额外指定-->
    <html lang="zh-cn"> <!--所有网页最大的结构  网页中所有的标签存放在html标签中-->
        <head> <!--网页的头部  告诉浏览器一些相关的信息-->
            <meta charset="UTF-8"> <!--表示网页编码格式 推荐UTF-8国际编码,常用的还有gbk国标-->
            <title>Title</title> <!--网页标题-->
        </head>
        <body> <!--网页的主体  我们所看的网页结构 都是在body中的-->
        </body>
    </html>
  • 标签知识

    • 由 <> 包裹的关键词称为标签

    • 标签有单标签双标签之分

    • <>之间除了标签名之外,还可以有 属性="值" 的各种属性设置

  • HTML的lang属性

    • 主要用于决定浏览器是否自动弹出翻译框

    • 常用值 en ,代表网页是一个英文网页(不管你后续写的内容是不是英文),浏览器打开该网页弹出翻译提示框

    • 常用值 zh-cn,代表网页是一个中文网页,浏览器打开该网页不会弹出翻译提示框

    • 所以,如果你网页主要服务于国内用户,值选择 zh-cn

  • 结构与样式

    • 结构:body中书写的内容会展示在浏览器可视区中,每个标签都有默认的样式

    • 样式:通过编写css代码可以改变各个内容的样式

    我们学习的路线是先学习结构部分的各种标签,再学习css改变样式。

  • 前端代码书写规范

    • 标签、属性名以及相关符号书写均在英文半角状态下的小写

    • 养成写注释的好习惯 <!--注释-->

    • 所有双标签必须闭合

    • 根据层次结构对标签进行tab缩进

    • 属性值必须带引号,单双引号都可以,根据你们团队的开发规范来

3. 认识标签

HTML规范中有很多很多的标签,常用的标签并不多。

meta标签

meta标签写在head标签中,是一个辅助标签,根据属性不一样所表示的含义也不一样,常用的有:

  • <meta charset="utf-8">

  • <meta name="keywords" content="关键词1 关键词2">

    用于表示该网页的关键词,便于搜索引擎的抓取(结合百度搜索进行理解)。

  • <meta name="description" content="网页的描述">

    对该网页的简介,搜索引擎在搜索结果中会展示出来,便于用户了解信息(结合百度搜索进行理解)。

  • <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>

    根据当前浏览器类型强制以特定内核进行渲染,如果是IE浏览器则使用最新内核,如果是双核浏览器则使用chrome内核。IE7及以下版本不支持这个属性。

  • 更多meta的作用可在对前端有一定了解后自行探索

div标签

div标签用于将文档划分为独立的、不同的部分,从而构成一个完整的网页。网页的主体骨架一般由div标签搭建(HTML5标准中有很多新标签也可代替div搭建骨架),每一个单独的div模块中也可继续用div搭建局部的骨架。

Tip:结合英文单词更好理解哦! division 分开;分隔。

H系列标题标签

h1~h6标签用于表示网页内容的标题,标签中的文字默认会出现不同程度的加粗与增大。

在一个网页中h1标签最好是有且仅有一个(有利于SEO优化),其他h标签可以根据需要出现多次。

Tip:结合英文单词更好理解哦! heading (页首或章节开头的)标题。

排序标签

  • ul无序列表标签

    ul标签用于展示无序的列表内容,规范上,其子标签必须是li

    <!--举例:展示新闻信息-->
    <ul>
      <li>31省市区新增确诊15例</li>
      <li>DWG战队获得S10全球总决赛冠军</li>
      <li>拜登当选新一任美国总统</li>
      <li>2020天猫双11成交额4982亿</li>
    </ul>

    ul列表前默认有实心圆点符号,可以通过修改type属性来改变这个符号(但是更推荐通过css来对其进行修改,这样更符合结构与样式分离的理念,后续学习中再介绍通过css来改变的写法):

    <!--
    type="disc" 实心圆点
    type="circle" 空心圆点
    type="square" 实心方块
    type="none" 不显示符号
    -->
    <ul type="circle">
      <li>31省市区新增确诊15例</li>
      <li>DWG战队获得S10全球总决赛冠军</li>
      <li>拜登当选新一任美国总统</li>
      <li>2020天猫双11成交额4982亿</li>
    </ul>
  • ol有序列表标签

    ol标签用于展示有序的列表内容,规范上,其子标签必须是li

    <ol>
      <li>打开冰箱门</li>
      <li>将大象放进冰箱</li>
      <li>关上冰箱门</li>
    </ol>

    ol列表前默认有数字符号,可以通过修改type属性来改变这个符号(同上,更推荐使用css来改变):

    <!--
    type="1" 数字顺序
    type="A" 或者 type="a" 字母顺序
    type="I" 或者 type="i" 罗马数字顺序
    -->
    <ol type="A">
      <li>打开冰箱门</li>
      <li>将大象放进冰箱</li>
      <li>关上冰箱门</li>
    </ol>

各个列表之间允许互相嵌套。

p段落标签

p标签中通常用来放置一段文字。终点注意:p标签中不可以放div标签(任意块标签),这会导致在浏览器中p标签被分隔成两个

<p>被那迎面而来的温热香风吹在脸庞上,萧炎有着瞬间的失神,狠狠的甩了甩头,将心中的旖念压下,手掌拍了拍面前几乎和自己同样身高的少女的小脑袋,无奈的道:“你就不能让我说出来,也好满足一下我的虚荣心么?”</p>

Tip:结合英文单词更好理解哦!paragraph 美 [ˈpærəɡræf] 段落。

span标签

span标签通常用于包裹文字,视觉上不会产生任何变化,但是我们可以配合css添加特殊的样式:

<p>让span包裹的文字<span style="color:red">变红色</span></p>

a标签 -- 超链接

a标签最常用于形成一个可点击的超链接

<a href="https://www.baidu.com">点我跳转到百度</a>

通过添加target属性可以指定打开链接的位置

<!--
target="_blank" 新标签页打开
target="_new" 新标签页打开,但所有的new只会打开一个新标签页
target="_self" 默认,在当前标签页打开
-->
<a href="https://www.baidu.com" target="_blank">点我跳转到百度</a>

a标签 -- 锚点

a标签还常用与创建锚点链接,用于在当前页面跳转到指定位置:

(讲解标签的id命名方式)

<a href="#wrap">点我页面滚动到id为wrap的标签所在的位置</a>

锚点也可以配合name属性使用:

<a href="#abc">点我页面滚动到name为abc的标签位置></a>
......
<a name="abc">滚到这里</a>

Tip:结合英文单词更好理解哦! anchor 美 [ˈæŋkər] 锚。

img标签

img标签用于在网页中引入一张图片:

<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">

img是一个单标签,不需要结束标签,但是我们可以用 / 作为img的结尾:

<!--
两种写法都可以
在HTML5的新标准中,明确的指出了不需要 / 来结束单标签,所以,更推荐大家不写/
-->
<img src="xxx">
<img src="xxx" />

img标签的四个重要属性:

  • src

    用于指定图片路径,路径的写法有:

    • 相对路径

      ./ 或者 ../ 开头(详细讲解),或者直接以文件名或目录名开头。

    • 绝对路径

      一个从根目录出发的路径或者一个完整的网络地址。

    所有写路径的地方都适用相对路径和绝对路径的写法,比如上面讲过的a标签herf属性。

  • width与height

    用于指定img显示的大小,书写了这两个属性之后,网页加载时能够为img图片预留对应的空间从而不会影响其他布局。

    <img src="xxx" width="200" height="100">

    width与height一般情况下和图片原始尺寸保持一致(像素单位的简单介绍),不过不一致也是允许的,但是即使使用width和height缩小图片,也仅仅是视觉上的缩小,浏览器还是需要加载原始的图片资源(并不能减轻请求压力),所以当我们有图片缩放的需求时,应当提前用图片处理软件处理好了之后,再引入图片。

  • alt属性

    <img
        href="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605197183333&di=087c5c556d4151b324e5485ad280d29a&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180705%2F142fb8fac6f846a995bf9951bc604e92.jpeg"
        alt="新垣结衣"
    >

    主要用于告知搜索引擎当前图片表示的意思。

    同时当img的src地址出错时,alt属性的值能够显示出来,以至于让用户得到一个相对来说不那么糟糕的体验。

除上述四条属性之后,img中常用的属性还有 title ,当鼠标指针移动到图片上时,title能够显示出提示文字,增强用户体验。title属性并不仅仅用于img标签,其他常见的标签都可以使用title

Tip:结合英文单词更好理解哦! image 美 [ˈɪmɪdʒ] 图像。

其他常用标签

  • b标签 strong标签

    文字加粗,b标签仅为视觉上的加粗,strong还能够被搜索引擎检索。

  • i标签 em标签

    文字斜体,i标签仅为视觉上的斜体,em还能够被搜索引擎检索。

  • br标签

    用于文本换行。

  • hr标签

    横线分隔。

  • del标签

    删除线。

4. 特殊符号

在HTML书写某些特殊字符的时候,可能会遇到问题,比如要在网页里面显示出字符 < >,就有可能和我们的标签冲突,所以有些特殊字符需要用对应代替的写法(字符实体)表示:

< > 使用 &lt;&gt; 代替

连续的空格会被忽略,如果确实需要连续空格,使用 &nbsp; 代替

更多符号请参考:HTML实体符号手册

很多特殊字符即使不用实体符号也不会出错,但是在键盘上打出这些符号有点困难,实体符号存在的意义就是为这些字符提供替代的输入方式。

5. 语义化

通过上面标签的学习,我们发现每个标签其实对应的都有英文原单词,也就是说HTML的标签具备对应的单词的意思与作用,这就称之为HTML标签的语义化。

HTML为何要语义化?

  • 在没有添加样式的情况下也能看出网页大致的结构

  • 有利于SEO

  • 增强用户体验

  • 有利于团队协作

  • ......

所以我们在编写HTML代码的时候,也要遵循语义化,不能随性而为。比如要放置一段文字,就应该用p标签而不是div标签。要展示某个有先后顺序的步骤文本,就应该使用ol标签而不是ul标签。

√. 作业与练习

  • 使用编辑器创建一个HTML文档,书写一遍已经学习的各种标签案例。

标签:网页,img,标签,基础,HTML,浏览器,属性
From: https://blog.csdn.net/2302_79986066/article/details/143594554

相关文章

  • HTML5的文本样式
    HTML5的文本样式文本样式 1文字样式   1字体颜色color   2字体大小font-size:px   3字体粗细font-weight:px     范围100到900之间     bold[粗] bolder[加粗] 2字体效果   1字体效......
  • (附项目源码)Java开发语言,基于HTML5的智慧养老服务平台的设计与实现 46,计算机毕设程序开
    摘 要随着社会老龄化程度的不断加深,智慧养老发展成为当今社会关注的焦点之一。家庭与社区资源的有限性,使得需要提供更加便捷、贴心的养老服务来满足老年人的需求。基于HTML5技术的智慧养老服务平台的设计和实现,为老年人提供了一个全新的智慧养老服务方式,便于家属和管理员......
  • css基础知识
    css基础知识css基础知识1.认识css概念写在哪如何写2.选择器初级id与class命名选择器分类(初级版)选择器权重3.基础知识介绍1.认识css概念CSS(英文全称:CascadingStyleSheets),层叠样式表。它是网页的装饰者,用来修饰各标签排版(大小、边距、背景、位置等)、改变字体的样式(......
  • Html5QRCode扫描条形码+二维码
    代码:<html><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"&......
  • 【YOLOv11[基础]】实例分割Seg | 导出ONNX模型 | ONN模型推理以及检测结果可视化 | py
    本文将导出YOLO-Seg.pt模型对应的ONNX模型,并且使用ONNX模型推理以及结果的可视化。话不多说,先看看效果图吧!!!目录一导出ONNX模型二推理及检测结果可视化1代码2效果图......
  • PbootCMS增添同tag标签文章数目显示
    修改文件:文件路径:/apps/home/controller/ParserController.php添加代码:在找到的代码段下方添加:php $tags=implode(',',$rs);//把栏目tags串起来$tagsArrSum=array_count_values(explode(',',$tags));//@mk-tags_one_sum把所有tags组成数组并计算每个......
  • 移动Web前端高效开发实战:HTML 5 + CSS 3 + JavaScript + Webpack + React Native + Vu
    书:pan.baidu.com/s/1tIHXj9HmIYojAHqje09DTA?pwd=jqsoHTML5新特性与应用:介绍HTML5的新特性,包括语义化标签、本地存储、设备兼容、连接特性等,并讲解如何在移动Web前端开发中充分利用这些特性提升用户体验。CSS3样式与动画设计:详细讲解CSS3的样式设计和动画效果,包括选择器、盒......
  • 商品链接查询淘宝商品信息接口,淘宝天猫宝贝信息采集、淘宝商品历史最低价格数据接口、
    商品链接查询淘宝商品信息接口,淘宝天猫宝贝信息采集、淘宝商品历史最低价格数据接口、优惠信息数据、单日领券销量最高销量数据接口,淘宝联盟ck延期方案|接口+html前端UI界面PHP完整代码:<?php//定义API接口地址和参数$apiUrl="https://api.taolale.com/api/Tb_union......
  • 查询三网话费余额接口,移动话费余额接口、电信话费余额接口、联通话费余额的接口+html
    PHP是直接请求的接口,HTML代码也是直接请求的接口。如果HTML想上线运行,还是需要做下安全的。下边是PHP代码<?php//定义API接口地址和参数$apiUrl="https://api.taolale.com/api/Inquiry_Phone_Charges/get";//API文档地址:https://api.taolale.com/doc/13$api......
  • Linux基础 -- (1)
    声明:本文的学习内容来源于B站up主“泷羽sec”的公开分享,所有内容仅限于网络安全技术的交流学习,不涉及任何侵犯版权或其他侵权意图。如有任何侵权问题,请联系本人,我将立即删除相关内容。本文旨在帮助网络安全爱好者提升自身安全技能,并严格遵守国家法律法规。任何人利用本文......