HTML基础
- HTML->HyperText Markup Language 超文本标记语言
<!doctype html>: doctype标记当前HTML文件是什么样的HTML版本，决定了最终浏览器的渲染模式<html></html>: 根标签<head></head>: 放些页面原数据，但不需要直接呈现给用户，有页面标题（显示在标签上），编码方式等<body></body>: 呈现给用户的内容 浏览器拿到html文件后会将其解析成一个DOM树
- html基本结构
- html标签是由 <> 包围的关键词。
- html标签通常成对出现，分为标签开头和标签结尾。
- 有部分标签是没有结束标签的，为单标签，单标签必须使用 / 结尾。
- 页面所有的内容，都在 html 标签中。
- html标签分为三部分：标签名称，标签内容，标签属性。
- html标签具有语义化，可通过标签名能够判断出该标签的内容，语义化的作用是网页
- 结构层次更清晰，更容易被搜索引擎收录，更容易让屏幕阅读器读出网页内容。
- 标签的内容是在一对标签内部的内容。
- 标签的内容可以是其他标签。
- 标签属性
-
class属性：用于定义元素的类名
-
id属性：用于指定元素的唯一 id，该属性的值在整个html文档中具有唯一性
-
style属性：用于指定元素的行内样式，使用该属性后将会覆盖任何全局的样式设定
-
title属性：用于指定元素的额外信息
-
accesskey属性：用于指定激活元素的快捷键
-
tabindex属性：用于指定元素在 tab 键下的次序
-
dir属性：用于指定元素中内容的文本方向，属性只有 ltr 或 rtl 两种
-
lang属性：用于指定元素内容的语言
HTML语法
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合，如input,meta
- 属性值推荐用双引号""包裹
- 某些属性值可以省略，如required,readonly
标题
<h1>~<h6>: 一级到六级标题，字体大小粗细依次减小，表示重要性依次减弱
列表
<ol>: 有序列表，列表项通过<li>表示，展示效果前自动补充1. 2. 3.
<ul>: 无序列表，列表项通过<li>表示，展示效果前自动补充·
<dl>: 定义列表,key-value形式，<dt>表示title,<dd>存放具体值。<dt>与<dd>是多对多的关系。
链接
<a>：href属性指定超链接，target属性指定链接的打开位置,title属性指定鼠标悬停在超链接上时显示的文字内容
<img>: src属性指定图片的地址，alt属性指定图片不被加载时显示的内容 <audio> <video>: src属性指定音频/视频内容的地址，controls属性表示需要显示浏览器默认播放控件
输入
<input>: type属性可选range number date text等，number模式可以设定最小值与最大值，date模式可以指定最晚日期与最早日期, file模式可以上传文件,checkbox radio模式可以指定是多选还是单选, placeholder属性指定默认显示内容
<textarea>: 文本域，用户可自由输入.cols属性设置可视高度，rows属性设置可输入文本行数 <select>: 下拉选择,选项写在<option>里
<dataList>: 对<option>里的内容在用户输入时有提示效果，之外的内容用户可自由输入
引用及其他文本内容处理
<blockquote>: 直接引用的较长的一段文字，cite属性表示该段文字来源地址
<cite>: 短引用，常为章节，标题，书名的引用
<q>: 将标签中内容用双引号""引起来
<code>: 代码引用，可以后续给出具体代码
<strong>: 内容重点强调，页面显示字体加粗
<em>: 通常用于英文内容，表示需要重读的部分,斜体
网页布局标签
<nav> 网页的导航
<header> 网页的头部 <main> 网页的主体部分（一般就一个） <article> 网页中的文章内容部分 <aside> 和主体相关的、在侧边显示的内容 <section> 独立的区块 <footer> 网页的底部
如何做到语义化
- 了解每个标签和属性的含义
- 思考什么标签最适合描述一个内容
- 不使用可视化工具生成代码
语义化
-
HTNL中的元素、属性及属性值都拥有某些含义
-
开发者应该遵循
语义来编写HTML-
有序列表用ol；无序列表用ul
-
lang属性表示内容所使用的语言
-
