HTML基础

FixEcho
155 阅读5分钟

网页三大元素

  • HTML网页的基本结构
  • CSS网页的展现效果
  • JS网页的功能与行为

HTML简介

  • HTML(HyperText Markup Language，超文本标记语言)，用于构建网页基本结构及其内容的标记语言
    • 超文本文本中包含指向其他文本的链接
    • 标记语言将文本以及文本相关的其他信息结合起来，展现出关于文档结构，如：HTML，XML，KML，Markdown等
  • 发展历史
    • 1989年，伯纳斯-李提出了基于互联网的超文本系统
    • 1993年IETF发布首个HTML提案，由此HTML语言第一版诞生
    • 1995年HTML2.0诞生，包含了基于表单的文件上传、表格、国际化等功能
    • 1994年W3C成立，随后接管了HTML的标准化工作，在1997年发布HTML3.2
    • 2014年HTML5发布

HTML结构

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的站点</title>
    </head>
    <body>
        <h1>我是一级标题</h1>
        <p>我是段落</p>
    </body>
</html>
  • <!DOCTYPE html>放在HTML文档最前面的位置，加上之后就会按照W3C的HTML5标准来解析渲染页面
  • <html>根元素，包含整个页面的内容
  • <head>对用户不可见，包含面向搜索引擎的关键字、页面描述、字符编码声明、CSS样式等
  • </body>包含能够呗用户访问到的内容，包含文本、图像、视频、音频等

<meta>

  • <meta charset="utf-8">定义文档字符编码
  • <meta name="keywords" content="我的站点，专注博客、开源、交流">关键字
  • <meta name="description" content="我的站点是个人专属站点，能够在此交流很多内容">页面描述

<link>

  • <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">当前页面的标签页图标
  • <link rel="stylesheet" href="style.css">链接到样式表
  • <link rel="alternate stylesheet" href="fancy.css" type="text/css" title="Fancy">可替换的样式表，只有firefox支持

<script>

  • <script type="text/javascript" src="base.js"></script>引入外部行为脚本

    • 在浏览器继续解析页面之前，立即读取并执行脚本

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

    • **defer:**立即下载，延迟执行，表示脚本可以等到dom被完全解析和显示之后再执行，只对外部脚本有效。

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

    • **async:**脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）

    image-20211010100258044

常用元素

内联元素

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

块级元素

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

行内块元素

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

语义化

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

语义化-区块

<header>

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

<nav>

  • 导航链接，如菜单、目录、索引等
  • 用来放置一些热门的链接，不常用的链接通常放在footer里置于底部

<article>

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

<section>

  • 按主题将内容分组，通常会有标题
  • <section>通常出现在文档的大纲中

<aside>

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

<footer>

  • 页脚，通常包含作者、版权数据或文档链接信息
  • footer内的元素不属于章节内容，不包含在大纲中

image-20211010102032319

语义化-分组

<figure>/<figcaption>

  • <figure>包裹被独立引用的内容：图表，插图，代码等，通常会有一个标题

  • <figcaption>与其相关联的图表的说明/标题，通常位于<figure>的第一行或最后一行

    <figure>
    <img src="cat.jpg" alt="">
    <figcaption>我的猫</figcaption>
</figure>

<blockquote>

  • 块级引用元素

  • cite属性表示该来源的url

    <blockquote cite="https://baike.baidu.com/item/%E6%BE%B3%E5%A4%A7%E5%88%A9%E4%BA%9A/146759#hotspotmining">
     <p>澳大利亚联邦（英语：Commonwealth of Australia），简称“澳大利亚”（Australia），</p>
</blockquote>

<dl>/<dt>/<dd>

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

语义化-文本

<cite>

  • <cite>元素通常用于引用作品标题

  • 包含论文、文件、书籍、电影等的引用

    <div>
    Aldous Huxley <cite>Brave New World</cite>
</div>

<time>

  • 机器可读的时间和日期

  • datetime表示此元素关联的时间日期，若不指定则该元素不会被解析为日期

     <p>开饭时间<time datetime="2021-05-15 19:00">May 15</time></p>

<address>某个人或组织的联系信息

<mark>在引用中使用，表示需要引起注意

<code>代码片段

<small>免责声明、注意事项等

多媒体元素

图片

<img>

  • src属性是必须的，嵌入照片的文件路径

  • alt属性包含一条对图像的文本描述，非强制，屏幕阅读器或者无法加载图片时显示

  • decoding 解码方式：异步、同步

  • loading 懒加载

    <img src="cat.jpg" alt="猫咪照片" decoding="async" loading="lazy">

<picture>

  • 元素通过包含零个或多个<source>元素和一个<img>元素来显示/设备场景提供相应的图像版本

  • media属性一句的媒体条件渲染对应的图片，类似媒体查询

  • type属性MIME类型，根据浏览器支持性渲染对应的图片

    <picture>
    <source srcset="xxx.webp" type="image/webp">
    <img src="xxx.jpeg" alt="">
</picture>

音视频

<video>/<audio>

  • src属性是必须的，嵌入视频文件路径

  • controls是否展示浏览器自带的控件，可以创建自定义控件

  • autoplay是否自动播放

  • source元素表示视频的可替代资源(不同格式、清晰度，读取失败或无法解码时可以一次尝试)

    <video controls>
	<source src="flower.webm" type="video/webm">
    <source src="flower.mp4" type="video/mp4">
    Sorry,your browser doesn't support embedded videos
</video>

HTML解析

构建DOM树——>样式计算，构建CSSOM树——>将DOM和CSSOM组合成一个Render树——>布局计算——>绘制

avatar
文章
阅读
粉丝