【青训营】- HTML-一一网

【青训营】- HTML

4年前更新

1750

HTML简介

HTML（HyperText Markup Language，超文本标记语言），用于构建网页基本结构及其内容的标记语言

超文本：文本中包含只想其他文本的链接
标记语言：将文本以及文本相关的其他信息结合起来，展现出关于文档结构，如：HTML、XML、KML、Markdown

HTML结构

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>测试HTML</title>
  </head>
  <body>
    <p class="one">这是p标签</p>
    <div id="one">这是div标签</div>
  </body>
</html>
复制代码

<!DOCTYPE html>：放在HTML文档最前面的位置，加上之后就会按照W3C的HTML5标准来渲染界面
<html>：根元素，包含整个页面内容
<head>：对用户不可见，其中包括例如面向搜索引擎的关键字、页面描述、字符编码声明、CSS样式等
<body>：该元素能够被用户访问到的内容，包括文本、图像、视频、游戏、音频等

HTML页面结构

meta

定义文档字符编码
<meta charset="utf- -8"> 

关键字
<meta name="keywords" content="HTML">

页面描述
<meta name="description" content="HTML基础">

主要用于移动端，定义设备屏幕上用来显示网页的区域
<meta name="viewport" content="width=device -width,initial- scale=1.0, maximum- scale=1.0, user - scalable=0">

http头部自定义meta,用于向特定网站提供一些信息
<meta "http-equiv="expires" content="31 Dec 2021">
复制代码

link

当前页面的favicon
<link rel="shortcut icon" href="https://juejin.cn/post/favicon.ico" type="image/x-icon">

链接到样式表
<link rel="stylesheet" href="https://juejin.cn/post/my- CcSs file.css">

可替换的样式表
<link href-"fancy.css" rel="alternate styleshet" type="text/css" title="Fancy">
复制代码

script

可执行脚本
<script type="text/javascript" src="">
复制代码

script属性

defer：立即下载，延迟执行，表示脚本可以等到dom被完全解析和显示之后在执行，只对外部脚本有效。有defer属性的脚本会阻止DOMContentL oaded事件，直到脚本被加载并且解析完成。
async：立即下载脚本，不妨碍其他操作，比如下载其他资源或载其他脚本，只对外部脚本有效

HTML常用元素

内联元素

只占据它对应标签的边框所包含的空间
只能容纳文本或其他内联元素
只能通过修改水平边距、边框或者行高的方式改变尺寸
常用的内联元素: <a>、 <span>. <br>、 <i>、 <em>、<strong>、<label>、 <q>. <var>、 <cite>、<code>

块级元素

占据其父元素的整行，总是从新行上开始
能容纳其他块元素或者内联元素
可以控制宽高、行高、边距、边框等改变其尺寸
常用的块级元素：

<div>、<p>、 <h1>-<h6>、<ol>、<ul>、<dl>、<table>、<address> 、<blockquote> 、<form>

行内块级元素

元素在行内排列，不会独占一行
支持设置宽高以及垂直边距、边框
常用的内联元素: <img>、 <input>、 <td>

语义化

标签语义化的作用：

能够便于开发者阅读和写出更优雅的代码。
同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容。
更好地搜索引擎优化。

总结：HTML的职责是描述一块内容是什么（或其意义），而不是它长什么样子；它的外观应该由CSS来决定。

非语义化

carbon (1).png

语义化

carbon (2).png

语义化-区块

header

展现介绍性信息
通常包含一组介绍性或是辅助导航的元素，如标题、Logo、搜索框、作者名称等
不能放在、或者另-个元素内部

carbon (3).png

nav

在当前文档或其他文档中提供导航链接，如菜单、目录、索引等
用来放置一些热门的链接，不常用的链接通常放到footer里置于底部

carbon (4).png

article

独立的文档、页面、应用、站点
可独立分配的或可复用的结构，如论坛帖子、新闻文章、博客、用户提交的评论、交互式组件等

carbon (5).png

section

按主题将内容分组，通常会有标题
通常出现在文档的大纲中
不要把作为普通容器来使用，比如说用于美化片段样式，此时用
更合适 – 如果元素里边是独立的整块的内容，可以单发布，则更适合用

© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
阅读

喜欢就支持一下吧

相关推荐