HTML简介
HTML（HyperText Markup Language，超文本标记语言），用于构建网页基本结构及其内容的标记语言
超文本：文本中包含只想其他文本的链接
标记语言：将文本以及文本相关的其他信息结合起来，展现出关于文档结构，如：HTML、XML、KML、Markdown
语意化标签
input list=“countries” id=“countries” 这里用同名来绑定
radio互斥
link
HTML常用元素
内联元素
只占据它对应标签的边框所包含的空间
只能容纳文本或其他内联元素
只能通过修改水平边距、边框或者行高的方式改变尺寸
常用的内联元素:
<a>、 <span>. <br>、 <i>、 <em>、<strong>、<label>、 <q>. <var>、 <cite>、<code>
块级元素
占据其父元素的整行，总是从新行上开始
能容纳其他块元素或者内联元素
可以控制宽高、行高、边距、边框等改变其尺寸
常用的块级元素：<div>、<p>、 <h1>-<h6>、<ol>、<ul>、<dl>、<table>、<address> 、<blockquote> 、<form>
行内块级元素
元素在行内排列，不会独占一行
支持设置宽高以及垂直边距、边框
常用的内联元素: 、 、
语义化
标签语义化的作用：
能够便于开发者阅读和写出更优雅的代码。
同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容。
更好地搜索引擎优化。
总结：HTML的职责是描述一块内容是什么（或其意义），而不是它长什么样子；它的外观应该由CSS来决定
语义化标签
< header>
展现介绍性的信息
通常包含一组介绍性或是辅助导航的元素，比如标题、logo、搜索框、作者名称等
不能放在< footer>< address>或者另一个< header>标签内部。
< nav>
在当前文档或其他文档中提供导航链接。如菜单、目录、索引、导航栏等
用来放置一些热门的链接，不常用的链接就放在footer的底部
< article>
独立的文档、页面、应用、站点
可独立分配的或者可以复用的结构、比如论坛的帖子、新闻、博客、用户评论、交互式组件等
< section>
按主题分组，通常会有标题
通常出现在文本的大纲中
不要把section用作普通容器，div给使用与美化样式
如果元素内是独立整块的内容，可以单独发布，建议用section
< aside>
通常用于侧边栏–广告、tips、引用内容
表示一个和其余页面内容无关的部分，单独领出来对页面无影响
< footer>
表示最近一个章节的页脚
通常包含该章节的作者、版权信息或者友情链接等内容
footer中的元素不属于章节内容，不包含在大纲中
分组语义化标签
< figure>
包被独立引用的内容：图标、插图、代码等，通常会有标题
< figcaption>
与figure相关联的说明，通常位于figure的第一个或最后一个
< blockquote>
块级引用元素
cite表示该来源的URL
< dl>< dt>< dd>
用于描述一组键值对
通常用于元数据、术语定义的场景
文本类语义化标签
< cite>
常用与引用作品标题
包括论文、文件、书籍、电影的引用
< time>
机器可读的时间和日期
datatime表示与此元素相关联的时间日期，若不指定则该元素不会被解析为日期
< address>
某人或组织的联系信息
< mark>
在引用中使用，表示需注意
< code>代码片段
< small> 免责声明、注意事项
多媒体元素
图片
< img>
src嵌入图片的路径
alt 图像的文本描述
decoding 解码方式：同步、异步
loading 懒加载
< picture>
picture标签内可以包含source元素和img元素来为不同设备提供相应的图像格式
media 根据媒体条件渲染图片
type 根据浏览器的支持性渲染图片
音视频
< video>/< audio>
src 嵌入视频音频文件的路径 必须
controls 是否展示浏览器自带的控件、可以创建自定义控件
autoplay是否自动播放
source 表示视频的不可替代资源：格式、清晰度
HTML解析
DOM(文档对象模型)：对节点结构化表述，并定义了一种方式可以使程序对该结构进行访问将web页面和脚本语言连接起来
1、构建DOM树
2、样式计算，构建CSSOM树
/3、将DOM和CSSOM组合成- -个Render树
4、布局计算
绘制
语义化的意义是什么？
开发者容易理解，便于维护。
机器（搜索引擎、读屏软件等）容易理解结构
有助于 SEO
与CSS3关系更和谐
扫一扫
862
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
