Web 前端之HTML

Web 前端之HTML

块级元素

• 特点

  • 独占一行
  • 高度 、行高及内外边距都是控制的
  • 宽度缺省默认就是 100 %

• 功能

  ​ 主要就是用来搭建网络建构，页面布局，承载内容

• 代表元素

  • div ： 结构

  • p:段落

  • h1,h2,h3,h4,h5,h6： 标题

  • ol：有序列表

  • ul：无序列表

  • hr：水平线

  • noscript：浏览器禁止了 javascript 脚本运行里的代码

  • table：表格

  • form：表单

  • pre：定义预格式文本

         一般和code 配合使用
    

行级元素

• 特点

  • 不独占一行
  • 高度 、 行高及顶部和底部边距不可更改
  • 宽度就是文本的宽度，不可修改

• 功能

  主要用于文本内容的显示

• 代表元素

  • span:文档中的节
  • a：超链接（跳转页面默认在本窗口打开，打开新的窗口target = “_blank”)
  • code:代码文本
  • em：文字斜体（语义化更强）
  • i：文字斜体
  • strong：加粗（语义化更强）
  • b：加粗
  • label：聚焦（与input使用）

行内块元素

• 特点

  • 不独占一行
  • 高度，行高 及内外边距 可以更改
  • 默认宽度由文本撑开，可以修改

• 功能

  用户加强内容显示

• 代表元素

  • input ：定义输出控件
    • type=“text”
    • type=“password”
    • type=“radio”
    • type=“checkbox”
    • type=“file”
    • type=“button”
    • type=“submit”
    • type=“reset”
  • textarea：文本域
  • select：选择列表，配合option 标签 使用
  • img：定义图像

html 标签的企业级规

• 块级元素 与块级元素平级，行内元素 与 行内元素平级

• 块级元素可以包含行内元素或块元素，行内元素只能包含行内元素

• 有几个特殊的行内元素只能包含行内元素

  如 h1,h2 , h3 , h4 ,h5,h6,p,dt

• p 标签不能包含块级元素

• li 标签可以包含div