HTML语义化案例分析|青训营

prefli
188 阅读3分钟

分析实际网站的HTML结构

HTML的工作原理

htmL(hypertext markup Language) 是一种规范（或者说是一种标准），它通过标记符（tag）来标记要显示的网页的各个部分。

通过在网页中添加标记符，可以告诉浏览器如何显示网页，即确定内容的格式。

浏览器按顺序阅读网页文件（htmL文件），然后根据内容周围的htmL标记符解释和显示各种内容，这个过程叫做语法分析

57d9c05cf23f0e6c679b89607df91dcf.png

  • HTML组成

    -HTML负责数据展示

    -CSS负责美化页面

    -JS负责页面动态效果

以一个XSS在线练习平台网站为例

xss.haozi.me/#/0x00

F12查看网页代码

d6c51a41f15e1de73a284bc7a205a869.png

  1. <!DOCTYPE html> html的版本，以此来决定浏览器的渲染模式
  2. <html></html> 根标签

fc95ae145fb1255b4f71aa949b8f7071.png

  • <head></head> 头部标签

    头部标签里的内容不在页面展示出来

  • <meta charset="UTF-8"> 告诉浏览器用utf-8编码格式解释文档

  • <title>alert(1)</title> 文档标题【设置文档标题，显示窗口的标题栏】

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

<title>元素：

<title> 标签定义了不同文档的标题。

<title> 在 HTML/XHTML 文档中是必需的。

<title> 元素:

~定义了浏览器工具栏的标题
~当网页添加到收藏夹时，显示在收藏夹中的标题
~显示在搜索引擎结果页面的标题

<style> 元素：

<style> 标签定义了HTML文档的样式文件引用地址

在 <style>元素中也可以直接添加样式来渲染HTML文档

<meta> 元素：

meta标签描述了一些基本的元数据。

<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。

META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

使用实例：

为搜索引擎定义关键词：

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

为网页定义描述内容：

<meta name="description" content="免费 Web & 编程 教程">

定义网页作者：

<meta name="author" content="Runoob">

每30秒钟刷新当前页面：

<meta http-equiv="refresh" content="30">

<script> 元素：

<script>标签用于加载脚本文件，如： JavaScript

head元素

标签描述
<head>定义了文档信息
<title>定义了文档标题
<base>定义了页面链接标签的默认链接地址
<link>定义了一个文档和外部资源之间的关系
<meta>定义了HTML文档中的元数据
<script>定义了客户端的脚本文件
<style>定义了HTML文档的样式文件

d020dd810b124cf46c318996be1aafe4.png

  • <body></body> 主体部分，内容显示区

    -topmargin 上外边距

    -leftmargin 左外边距

    -text 文字颜色

    -bgcolor 背景颜色

    -background 背景图片（和bgcolor冲突，设置了背景图片，背景颜色就不显示了）

c66c84384e2d731f9d572de3b9297174.png

• h1~h6 标题

21828913976470df1f3996fd609dfa9a.png

href 所请求的url，注意url必须写协议

非语义化标签VS语义化标签

非语义化标签

在某些情况下可能我们不知道用哪种现有语义，或者是需要用 css，js 自定义语义，那么这时就需要用一个暂不确定的元素来作为顶替

div: 分区结合css页面布局 双标签、独占一行

<div>
  div标签
</div>

span:文本标签 双标签，在一行展示

<span>你好你好</span>

a标签 用于控制页面之间跳转a标签，不算是语义化标签，他没有意义只是一个链接

<nav>
  <a>Internet</a>
  <a>other</a>
</nav>

语义化标签

语义化的标签，旨在让标签有自己的含义，让浏览器认识这个标签所传达的信息，是干什么的有什么作用。 比如：h1标题标签的语义是用它来标识网页或其他部分最重要的标题。 然而span 标签责没有独特的含义。

常见的语义化标签：

  • 段落和标题的标签

    <p></p>；<h1></h1>~<h6>

  • 列表标签

  • 重点强调标签 <em></em> <strong></strong> <i></i> <b></b> <u></u>

avatar
文章
阅读
粉丝