1

术语

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="" alt="">`
 src属性:source
 alt属性:当图片资源失效时,会使用该属性的文字替代图片
 
 和a元素联用:a标签包裹img标签
 和map元素联用:map使用name属性
               img标签则使用usemap属性
 map的子元素:`<area shape="" coords="" href="" alt="" 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,...

实体字符

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

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


Tap? taq
19 声望1 粉丝

想跟上前端大佬步伐的小虫...