前端学习(一）HTML

前端学习

HTML

head

• <link>标签

<link rel="stylesheet" href="my-css-file.css">
链接到样式表

• <script>可执行脚本

<script type="text/javascript" src="javascript.js">
defer：立即下载，延迟执行，脚本等到被完全解析和显示之后再执行，只对外部脚本有效。
async：立即下载脚本，不妨碍其他操作，只对外部脚本有效。

body

• 内联元素

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

• 行内块级元素

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

• 块级元素

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

语义化

• <header>

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

• <nav>

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

• <article>

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

• <section>

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

• <aside>

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

• <footer>

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

• <figure>/<figcaption>

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

• <blockquote>

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

• <dl>/<dt>/<dd>

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

• <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元素表示视频的可替代资源(不同格式、清晰度、读取失败或无法解码时可以依次尝试)

HTML解析

DOM(文档对象模型）

对节点结构化表述，并定义了一种方式可以使程序对该结构进行访问，将web页面和脚本语言连接起来

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