HTML基础

孤光
663 阅读6分钟 
了解HTML已经很长时间了，之前也在不停地查漏补缺。但是，并没有形成体系，对HTML中的很多元素并不是很熟悉。又一次HTML的学习，但是还是有很多地方没有扫到。

网页三大元素

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

HTML简介

        HTML(HyperTextMarkupLanguage,超⽂本标记语⾔)，⽤于构建⽹⻚基本结构及其内容的标记语⾔。

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

HTML结构

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>test site</title>
</head>
<body>
  <p>Hello World!</p>
</body>
</html>

上面就是一个简单的页面，其中，<p> 是开始标签，</p> 是结束标签，Hello World! 就是内容，整个构成一个元素。

下面是一些规则：

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

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

HTML 页面结构

<link>

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

当前⻚⾯的favicon

<linkrel="stylesheet"href="my-css-file.css">

链接到样式表

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

可替换的样式表

<script> 可执⾏脚本

<scripttype="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>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>

行内块级元素

  • 元素在⾏内排列，不会独占⼀⾏
  • ⽀持设置宽⾼以及垂直边距、边框
  • 常⽤的内联元素：<img>、<input>、<td>

语义化

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

<header>

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

<nav>

  • 在当前⽂档或其他⽂档中提供导航链接，如菜单、⽬录、索引等
  • ⽤来放置⼀些热⻔的链接，不常⽤的链接通常放到<footer>⾥置于底部

<article>

  • 独⽴的⽂档、⻚⾯、应⽤、站点
  • 可独⽴分配的或可复⽤的结构，如论坛帖⼦、新闻⽂章、博客、⽤户提 交的评论、交互式组件等

<section>

  • 按主题将内容分组，通常会有标题
  • 通常出现在⽂档的⼤纲中
  • 不要把作为普通容器来使⽤，⽐如说⽤于美化⽚段样式，此时⽤<div>更合适
  • 如果元素⾥边是独⽴的整块的内容，可以单发布，则更适合⽤<article>

<aside>

  • 表示⼀个和其余⻚⾯内容⼏乎⽆关的部分，或者说单独拆出来不会影响整体的内容
  • 通常放在侧边栏，⽤于展示⼴告、tips、引⽤内容等

<footer>

  • 表示最近⼀个章节的⻚脚
  • 通常包含该章节作者、版权数据或者⽂档链接等信息
  • <footer>内的元素不属于章节内容，不包含在⼤纲中

语义化-分组

<figure>/<figcaption>

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

<blockquote>

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

<dl>/<dt>/<dd>

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

语义化-文本

<time>

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

<cite>

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

<address>某个⼈或组织的联系信息 <mark>在引⽤中使⽤，表示需要引起注意 <code>代码⽚段 <small>免责声明、注意事项等

多媒体元素

图片

<img>

  • src属性是必须的，嵌⼊图⽚的⽂件路径
  • alt属性包含⼀条对图像的⽂本描述，⾮强制。屏幕阅读器会将这些描述读给需要使⽤阅读器的使⽤者听，让他们知道图像的含义。图像⽆法加载时(⽹络错误、内容被屏蔽或链接过期时)，浏览器会在⻚⾯上显示alt属性中的⽂本
  • decoding解码⽅式：异步、同步
  • loading懒加载

<picture>

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

音视频

<video>/<audio>

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

HTML解析

DOM(⽂档对象模型)：对节点结构化表述，并定义了⼀种⽅式可以使程序对该结构进⾏访问，将web⻚⾯和脚本语⾔连接起来

1.构建DOM树

2.样式计算，构建CSSOM树

3.将DOM和CSSOM组合成⼀个Render树

4.布局计算

5.绘制

avatar
文章
阅读
粉丝