关于HTML（Hyper Text Markup Language）

Posted 2021-10-16 Tap? taq

术语

w3c组织定义的语言标准（https://www.w3.org/）
用于描述页面结构的语言 （超文本标记语言）
可参考文档：MDN

常用的元素

1. 文本元素：
h（h1~h6）1级标题~6级标题 （块级元素）`<h1></h1>`
p 段落 （块级元素）`<p></p>`
span （无语义,仅用于设置样式,行内元素） `<span></span>`
pre （预格式化文本元素,不会被空白折叠）  `<pre></pre>`
（空白折叠：在源代码中的连续空白字符（空格,换行,制表）会被折叠为一个空格）
还有其他文本元素如：b,i,em,s等


2. a元素：
超链接 `<a></a>`
href属性：通常表示跳转地址
作用：普通链接
      锚链接（利用id）
      功能链接（执行js代码：\'javascript:\'。发送邮件：\'mailto:\'。拨号：\'tel:\'）
 target属性：表示跳转窗口的位置
 target取值： _self：在当前页面窗口中打开
             _blank：在新窗口中打开
 
 路径的写法：
 路径有 绝对路径 和 相对路径
 站内资源可使用相对路径和绝对路径
 站外资源使用绝对路径
 
 绝对路径书写格式：协议名://主机名:端口号/路径
                  schema://host:port/path
 协议名:http,https,file
 主机名:域名,IP地址
 端口号:若协议为http,默认端口号为80。若为https,默认端口号为443
 
 相对路径书写格式：以./或者../开头（./可省略）, （./表示当前资源所在目录 , ../表示返回上一级目录）   
 
 
 3. 图片元素（img）
 `<img src="" >`
 src属性：source
 alt属性：当图片资源失效时，会使用该属性的文字替代图片
 
 和a元素联用：a标签包裹img标签
 和map元素联用：map使用name属性
               img标签则使用usemap属性
 map的子元素：`<area shape="" coords="" href=""  target="">`
              shape:区域形状（圆形,矩形,多边形）
              coords:形状的关键点坐标（衡量坐标时可使用专业的衡量工具:pxcook,ps,...）
 和figure元素(html5新增)联用：figure包裹a元素和img元素（使用场景：图片有其他的文字信息）
 
 
 4. 多媒体元素（HTML5新增）
 视频：`<video src=\'\'></video>`（格式：mp4，webm）
 音频：`<audio src=\'\'></audio>`
 （可在其子元素source中写属性src）
 一些属性取值：controls（显示控件），autoplay（自动播放）,muted（静音播放），loop（循环播放）
 兼容性：旧版本的浏览器不支持这两个元素（以前多数使用flash）
         不同的浏览器支持的音视频格式可能不一致
   
   
  5. 列表元素
  有序列表：ol，li（ol的type属性：可选择排序序号的类型）
  无序列表（较常用）：ul，li（ul同样有type属性）
  定义列表：dl，dt，dd（通常用于一些术语的定义）
  
  关于type属性：除非列表中序号很重要（比如，在法律或者技术文件中条目通常被需要所引用），否则请使用 CSS 属性 list-style-type 可以设置列表元素的 marker（比如圆点、符号、或者自定义计数器样式）。) 属性替代。
  
  
  6. 容器元素（该元素代表一个块区域，内部用于放置其他元素）
  div：`<div></div>`
  header：通常用于表示页头
  footer：通常用于表示页脚
  article：通常用于表示整篇文章
  section：通常用于表示文章章节
  aside：通常用于表示侧边栏
 （其中header,footer,article,section,aside都为语义化容器元素，是HTML5的元素）
 
 
 7. 表单元素（主要用于收集用户数据）
 input：`<input type=\'\' value=\'\'>`  （输入框）
        type属性：输入框类型。可选text,passwprd,file,date,range(滑块),search,color,checkbox(多选框),radio(单选框),reset(重置按钮),button(普通按钮),submit(提交按钮),...
        value属性：输入框的值
        placeholder属性：显示提示的文本，文本框没有内容提示
        
 select：`<select><option></option></select>`（通常和option元素配合使用）
 可进行分类选择：select与optgroup配合使用
 
 textarea：`<textarea name=\'\' cols=\'\' rows=\'\'></textarea>`  （文本域）
            cols:列数
            rows:行数
            
 button：`<button type=\'\'></button>` （按钮）
         可于img配合使用
 
 配合表单元素使用的一些元素：label（label的for属性与input的id属性关联）
                           datalist（该元素本身不会显示到页面,通常和普通文本配合。datalist的id属性与input的list属性关联）
                           form（通常会将整个表单元素放置到form元素的内部，作用是当提交表单时会将form元素的表单内容以合适的方式提交到服务器。有action和method属性）
                           fieldset（表单分组。子元素：legend（分组标题））
                           
 表单状态：readonly（是否只读）,disabled（是否禁用）
 
 一些有关表单的伪类元素：focus（聚焦样式）,checked（单选框或多选框被选中的样式）
 
 
 8. 表格元素
 现在很少用，后台管理系统可能会使用表格元素
 表格外层：`<table></table>`
 表头：thead
 表体：tbody
 表尾：tfoot
 行：tr
 单元格：th/td （在tr里）
 td里的属性：colspan（合并列）
             rowspan（合并行）
 
 

关于块级元素和行内元素：

以前：独占某一行的元素为块级元素，行内元素不会。
现在：HTML5已经弃用这种说法
（为什么？根据w3c官方标准的描述,元素代表的含义与显示无关）

元素包含关系：
以前：块级元素可包含行级元素，行级元素不可包含块级元素（a元素除外）
现在：元素的包含关系由元素的内容类别决定

容器元素可以包含任何元素
a元素几乎可以包含任何元素
某些元素有固定的子元素（ul>li,ol>li,dl>dt+dd）
标题元素和段落元素不能相互嵌套，并且不能包含容器元素

其他元素

iframe：`<iframe src=\'\'></iframe>`（通常用于一个页面嵌入另一个页面）

页面使用flash：利用object和embed元素
               object的子元素param（可设置flash的参数）
 
 abbr：`<abbr></abbr>` （缩写词）
 time：`<time datetime=\'\'></time>` （提供给浏览器或搜索引擎阅读的时间）
 b：`<b></b>` （加粗字体）
 q：`<q></q>` （短引用）
 blockquote：`<blockquote></blockquote>` （长引用）
 br：`<br>` （换行）
 hr：`<hr>` （分割线）
 meta：`<meta>` （搜索引擎的优化）
 link：`<link>`（连接外部资源：css,图标）  

可替换元素

 特点：通常为行盒。
       通常显示的内容取决于元素的属性。
       CSS不能完全控制其中的样式。
       具有行块盒的特点。
 常见的可替换元素:iframe,video,embed,img,textarea,...

实体字符

实体字符常用于在页面中显示一些特殊符号
如：&单词（<>...）
    &#数字（<...）
大于符号(&gt)，小于符号(&lt)，空格符号(&nbsp),版权符号(&copy)...

以上是对HTML的部分整理和总结，希望有用，有什么建议欢迎提出哦！
大家一起进步~