您现在的位置是:首页 > 正文

html必要的结构标准,HTML_关于现代前端必要知识

2024-01-30 20:04:51阅读 0

由VS Code空.html文件打出html:5或!按下tab建后默认生成的.html基本框架代码说起

我是title

第一行:

很庆幸,如今我们只需要这么一个自闭合标签即可告诉浏览器,请使用html5的标准来解析下面的代码

从第二行起, 我们就需要用到前端相关知识了, 以下将知识划分四块:

普通标签

自闭合标签

标签的属性

标签的内容

普通标签

HTML中的普通标签就是形如abc这种形式的块结构, 其中为开标签, 为闭合标签简称闭标签

普通标签是可以嵌套其他标签的

自闭合标签

在最新的W3C标准中, 已经不推荐使用的形式来表明自闭合标签, 使用即可

具体表述为, 某标签只有开标签并且没有与之匹配的闭标签, 则这种标签称之为自闭合标签, 即自行闭合标签

自闭合标签是无法嵌套其他标签的

标签的属性

以下 即代表普通标签的开标签与自闭合标签, 在属性的表述上, 二者无差异

形如, 其中a与b即为标签的属性, 与之匹配的a1与b1即为属性对应的属性值, 注意属性值使用""或''括起来的, 如果没有使用""或''括起来, 也会被转换成字符串

标签不同, 其对应的属性不同, 如img标签具有src属性, 即xxx, 而input具有value属性等等, 即

所有标签都具有的属性即为通用属性, 如: class, id, style等, 即

标签的内容

注意标签的内容根据普通标签与自闭合标签不同而表现不同

形如abc, 开标签与闭标签之间的内容即为标签的内容, 即本例中的abc.

若是自闭合标签, 则内容体现在其相关属性上, 如input标签的内容则体现在属性value上, 即

那么现在再看文章头部的代码:

我是title

则从第二行可以分析如下:

一个html普通标签, 其属性lang的属性值是en, 这个html标签包裹了head与body两个普通标签, 其中body普通标签内容为空, 属性也是空; 而head普通标签属性为空, 但是内容是包裹了三个meta自闭合标签与一个title普通标签, 三个meta自闭合标签各自有各自的属性值, title普通标签没有属性, 内容是"我是title"

一下介绍四种常见标签(HTML5标准的标签种类百来种)

div

块标签, 主要负责包裹作用, 形式如下:

```

other...

```

a

锚点或链接标签, 用来前往本页某点或前往其他页面

`我是前往百度的锚点`

input

文本输入标签

``

img

图片标签

`当图片链接无效时候我会显示出来`

将例子融合成最终代码

我是title

other...

我是前往百度的锚点

当图片链接无效时候我会显示出来

效果如下:

AAffA0nNPuCLAAAAAElFTkSuQmCC

源码相关

网站文章

  • centos7 安装git_centos7搭建H1ve环境

    centos7 安装git_centos7搭建H1ve环境

    H1ve是一款开源的ctf平台,具备解题和攻防对抗模式,并且还有可视化战况界面.是个很不错的平台,我们今天来搭建一下,顺便解决一下搭建的各种问题.系统版本:centos7需要环境:dockerpython2 pipdocker-composemariadb开始搭建,先重新安装一个centos7的虚拟机.(mini最小化安装,安装过程不表).1.先安装docker依赖环境yum insta...

    2024-01-30 20:04:23
  • CSS中修改ul标签的样式

    在我们使用li标签的时候,ul样式经常会错乱 ul标签样式设置如下: ul { list-style: none; padding: 0px; margin: 0px; }

    2024-01-30 20:04:17
  • aop执行模版

    aop执行模版

    【代码】aop执行模版。

    2024-01-30 20:04:09
  • 用计算机怎么算sin30,计算器sin30怎么按

    大家好,我是智能客服时间君,上述问题将由我为大家进行解答。以OPPO手机为例,在计算器上按sin30的方法如下:1、打开计算器。2、将手机横屏,并点击右下角的小图标,使手机屏幕变成横向。3、点击sin...

    2024-01-30 20:03:40
  • JVM参数-Xms和-Xmx的作用是什么

    JVM参数-Xms和-Xmx的作用是什么

    2024-01-30 20:03:33
  • Flask框架---路由相关

    路由 现代 web 应用都使用有意义的 URL ,这样有助于用户记忆,网页会更得到用户的青睐, 提高回头率。 使用 route() 装饰器来把函数绑定到 URL: @app.route('/&...

    2024-01-30 20:03:26
  • Android学习|布局—— FrameLayout 悬浮

    Android学习|布局—— FrameLayout 悬浮一、常见属性二、前景属性Demo      FrameLayout 与 RelativeLayout 类似。 都是布局包含多个子 FrameL...

    2024-01-30 20:03:19
  • 18.文本处理命令sed

    18.文本处理命令sed

    sed主要是用来将数据进行选取,替换,删除,新增的命令。sed通过一次仅读取一行内容来对某些指令进行处理后输出。首先sed通过文件或管道读取文件内容,但sed默认并不输出直接修改源文件,而是将读入的内...

    2024-01-30 20:02:51
  • mysql集群搭建

    mysql集群搭建

    mysql集群

    2024-01-30 20:02:43
  • 2019西安邀请赛游记

    第8场,湘潭是最后两小时选择了一道1个队过的题,没去想过得多点的题,这次是过得多的题没想出来,耗费大量时间,没时间调明明会做但是封榜前只有2队过的题。菜哭.jpg热身赛最先发现多组多组数据输入,然后我...

    2024-01-30 20:02:36