前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >HTML 基础

HTML 基础

原创
作者头像
王秀龙
修改2021-08-23 18:29:09
1.3K0
修改2021-08-23 18:29:09
举报
文章被收录于专栏:云开发分享

网页三大元素

HTML:网页的基本结构

CSS:网页的展示效果

JS:网页的功能与行为

HTML 简介

HTML(HyperText MarkupLanguage 超文本标记语言),用于构建网页

超文本:文本中包含指向其他文本的链接

标记语言:将文本以及文本相关的其他信息结合

发展历时

  • 伯纳斯-李在1989年提出了基于互联网的超文本系统
  • 1993年IETF(互联网工程任务组)发布首个HTML提案,由此HTML语言第一版诞生
  • 在经历过几个草案之后HTML 2.0于1995年发布,包括了基于表单的文件上传、表格、国际化等功能
  • 1994年W3C成立,随后接管了HTML的标准化工作,并在1997年发布了HTML 3.2
  • 随后发布的HTML4.0 中采用许多特定浏览器的元素类型和属性
  • 2014年 HTML5 作为W3C推荐标准发布

HTML 结构

  • HTML 文档包含多个 HTML 元素,元素具备不同的特性
  • HTML 元素 = 开始标签 + 结束标签 + 元素内容
  • 一些元素只有一个标签,如 img、 input、 br 等
  • HTML元素标签不区分大小写
  • 元素可以嵌套在其他元素中间
  • 元素可以拥有属性,属性包含有元素的额外信息

HTML 页面结构

<!DOCTYPE html> :放在HTML文档最前面的位置,加上之后就会按照W3C的HTML .5标准来解析渲染页面

<html>: 根元素,包含整个页面的内容

<head> :对用户不可见,其中包含例如面向搜索引擎的关键字、页面描述、字符编码声明、CSS 样式等

<body>:该元素包含能够被用户访问到的内容,包括文本、图像、视频、游戏、音频等

<meta> 标签:charset / name / http-equiv

<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">主要用于移动端,定义设备屏幕上用来显示网⻚的区域

<link>:

<link rel="shortcuticon" href="favicon.ico" type="image/x-icon">

当前⻚面的favicon

<link rel="stylesheet" href="my-css-file.css">

链接到样式表

<link href="fancy.css" rel="alternatestylesheet" type="text/css" title="Fancy">

可替换的样式表

<script> 可执行脚本

<script type="text/javascript" src="javascript.js">

属性

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

常用元素

内联元素

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

块级元素

  • 占据其父元素的整行,总是从新行上开始
  • 能容纳其他块元素或者内联元素
  • 可以控制宽高、行高、边距、边框等改变其尺寸
  • 常用的块级元素::<div>、 <p>、<h1>- <h6>、<0l>、<ul>、<dl>、 <table>、<address> 、<blockquote>、<form>

行内块级元素

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

语义化

根据内容的结构,选择合适的标签构建出便于开发者阅读的可维护性更高的代码结构,同时能够让机器更好地解析。

区块

<header>

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

<nav>

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

<article>

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

<section>

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

<aside>

  • 表示一个和其余页面内容几乎无关的部分,或者说单独拆出来不会影响整体的内容
  • 通常放在侧边栏,用于展示广告、tips、 引用内容等

<footer>

  • 表示最近一个章节的页脚
  • 通常包含该章节作者、版权数据或者文档链接等信息
  • footer内的元素不属于章节内容,不包含在大纲中
分组

<figure>/ <figcaption>

  • <figure> 包裹被独立引用的内容:图表、插图、代码等,通常会有一个标题
  • <figcaption> 与其相关联的图表的说明/标题,通常位于<figure>的第一个或最后一个

<blockquote>

  • 块级引用元素
  • cite 属性表示该来源的 url

<dl>/ <dt>/ <dd>

  • 用于描述一组键值对
  • 通常用于元数据、术语定义等场景
文本

<cite>

  • <cite>元素 通常用于引用作品标题
  • 包括论文、文件、书籍、电影等的引用

<time>

  • 机器可读的时间和日期
  • datetime 表示此元素关联的时间日期,若不指定则该元素不会被解析为日期

<address>

某个人或组织的联系信息

<mark>

在引用中使用,表示需要引起注意

<code>

代码片段

<small>

免责声明、注意事项等

多媒体元素

图片

<img>

  • src属性是必须的,嵌入图片的文件路径
  • alt属性包含一条对图像的文本描述,非强制。屏幕阅读器会将这些描述读给需要使用阅读器的使用者听,让他们知道图像的含义。图像无法加载时(网络错误、内容被屏蔽或链接过期时),浏览器会在⻚面上显示alt属性中的文本
  • decoding 解码方式:异步、同步
  • loading 懒加载

<picture>

  • 元素通过包含零或多个 <source> 元素和一个 <img> 元素来为不同的显示/设备场景提供相应的图像版本
  • media 属性:依据的媒体条件渲染相应的图片,类似媒体查询
  • type 属性:MIME 类型,根据浏览器支持性渲染相应的图片
音视频

<video> / <audio>

  • src 属性是必须的,嵌入视频文件路径
  • controls 是否展示浏览器自带的控件,可以创建自定义控件
  • autoplay 是否自动播放
  • source 元素表示视频的可替代资源(不同格式、清晰度,读取失败或无法解码时可以依次尝试)

THML 解析

DOM (文档对象模型):对节点结构化表述,并定义了一种方式可以使程序对该结构进行访问,将web⻚面和脚本语言连接起来

  1. 构建DOM树
  2. 样式计算,构建CSSOM树
  3. 将DOM和CSSOM组合成一个Render树
  4. 布局计算
  5. 绘制

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 网页三大元素
  • HTML 简介
  • HTML 结构
  • 常用元素
  • 语义化
    • 区块
      • 分组
        • 文本
        • 多媒体元素
          • 图片
            • 音视频
            • THML 解析
            相关产品与服务
            容器服务
            腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档