【汇总】HTML 常用知识点

一、W3C --- web标准

• W3C标准 即万维网联盟标准。 在线教程

• W3C 表针 对 web 开发，进行一系列的标准化定义

• 网页的三层结构：html（结构）、css（表现）、javaScript（行为）

符合 W3C 标准的页面是什么样的？

后续更新

二、HTML 基础

1. HTML 是一门 超文本标记语言，运行在浏览器上，由浏览器解析

• 全拼：HyperText Markup Language

• .htm .html 都是静态网页文件的扩展名

推荐使用 html 后缀名
htm 是历史遗留的 8.3 文件格式，DOS 操作系统只能支持长度为三位的后缀名

• HTML 是一种标记语言，而不是一种编程语言

• HTML 是使用标签来描述网页的一种语言

• web浏览器来读取HTML文件，并将其作为网页显示

2. HTML 结构

• 一个简单的 html 文档

  



  文档的内容... ...

• html5 文档

             声明文档类型
                      页面根元素





 
    
我的第一个标题
     
    
我的第一个段落。
 

(1) 标签 声明是 html5 文档类型

• 声明为 HTML5 文档，html5只有一种声明方式

• HTML4 有三种声明格式（ 不再使用 ）

(2) 标签 根元素

(3) 标签 定义文档的头部，是所有头部元素的容器

• 下面这些标签可用在 head 部分：, , , 双标签 引入外部脚本、包含脚本代码；新增异步属性

  • 属性 src="" 规定外部脚本文件的 URL， 该属性 具有跨域请求能力

  • 属性 type = "text/javascript" 默认属性，可忽略

  • 异步属性：--- 仅适用于外部脚本

    • 属性 async 或 async="async" 被立即下载、解析、执行（异步完成，与页面渲染同时进行）；若置于顶端引入外部js脚本，有可能出现解析不到元素报错的情况

    • 属性 defer 或 defer="defer" 脚本被立即下载（异步完成，与页面渲染同时进行），但 解析、执行 是等到整个页面全部解析完成 再解析、执行

    • 不添加 异步属性：浏览器解析到 script 标签时会停止其他元素的渲染，只是下载、解析、执行 js 完成后，在继续解析渲染页面

  三、元素 类型

  1. 块级元素 （block element）

  • 块级元素 独占一行
  • 块级元素 可设置宽高
  • 可容纳块级元素、行内元素...
  • div 、 p 、 h1 、 ul 、 li 、 table 系列、 form 表单

  2. 行内元素（内联元素） (inline element）

  • 块级元素 一行可多个行内、行内块元素
  • 块级元素 不可设置宽高；但可以设置：margin左右 、 padding左右
  • 只能容纳 行内元素/行内块...
  • a 、 span 、 img 、 input 、 select 、textarea、 b、 p、i 、 sub、 sup

  3. 块级元素、行内元素的 的重要区别：

  • 块级元素单行显示；可设置宽高；

  • 行内元素一行显示；不可设置宽高；但可设置 margin左右 、 padding左右 、 line-height

  4. 行内块 元素

  • 行内块元素：行内元素转化的一种类别

  • 特性：

    • 行内块：可设置宽高
    • 行内块：一行可现实多个

  • vertical-align对齐属性：

    • 默认 以父元素的基线对齐；
    • middle值：在父元素的中部；
    • top值：以行中最高元素的顶端对齐；
    • bottom值：以行中最低元素的顶端对齐；

  5. 行内元素、行内块元素（ 都属于 内联元素 ） 及 存在间隙的bug

  • 内联元素 存在间隙原因：

    • 元素之间有空格 或 回车等

  • 解决方案：

    • 1. margin-right: -4px;
    • 2. float: left;
    • 3. 外层容器 font-size: 0px; 行内块 再单独设置 font-size;

  四、常用标签

  1. a 标签

  • 属性：

    • href=" " 页面跳转的地址

    • target=""

      • target="_self" 在本窗口中打开，【默认】
      • target="_blank" 在新窗口中打开

    • download="filename" 该属性也可以设置一个值来规定下载文件的名称

  • a 标签优化：

    • head 中写 决定了 页面中所有a标签链接 在新窗口中打开

  • 锚点链接

    • 设置锚点： id = “”
    • 链接到锚点
    • 空连接 默认的锚是#top 也就是网页的最上端

  • 下载压缩包等资源文件

    • 下载
    • 下载

  • 阻止 a 标签默认跳转 的 4种方式：

    • void是一个操作符，void(0)返回undefined，地址不发生跳转 、页面不会移动

    • 页面不跳转，但页面会移动到顶端

    • a 标签 被点击执行的函数中 return false

    • e.preventDefault() 阻止 与 事件关联的默认动作，IE 不支持，兼容代码如下：

  
        Click Me  
  
  
  

  2. img 标签

  • 必需属性：

    • src="" 图片路径: 绝对路径 / 相对路径
    • alt="" 替换文本，图片不显示的时候显示文字

  • 属性： width="" height="" 设置图片的宽高

    • 只设置一个则成比例放大缩小
    • 两个都设置图片会变形

  • 属性： align="" 图像被环绕的方式

    • left / right 多行文字环绕 图片
    • top / bottom / middle 单行文字环绕 图片
    • 但实现 文本环绕图片 的常见形式： 给图片设置 float： left

  3. ul ol dl 等 列表标签

  • 去除每一项的序号 或圆点，设置：list-style: none

  • 无序列表： ul li

    • ul 的 type 属性：
    • disc 默认值 实心小圆圈
    • circle 空心小圆圈
    • square 小方块

  • 有序列表： ol li

    • ol 的 type 属性：
    • 1 默认值 1、2、3
    • a ： a 、 b 、 c
    • A ： A 、 B 、 C
    • i ： i 、 ii 、 iii
    • I ： I 、 II 、 III

  • 无序列表：dl dt dd

  4. table 系列标签

  • table

    • thead
    • tbody
      • tr 行
        • th 列（表头）
        • td 列

  • 基本结构如下：

  
      
  
          
  
              
  姓名
              
  年龄
              
  爱好
          
      
  
      
  
          
  
              
  张新
              
  18
              
  帅
          
      
  
  

  • table 标签上的属性 （属性值 为 number 类型，不带单位）

    • cellspacing=" " 单元格 与 单元格 之间的距离，默认值为 2

    • cellpadding=" " 表格中内容距边框的距离

    • width=" " 表格宽

    • height=" " 表格高

    • border=" " 表格边框的宽度

    • align="center / left / right" 整个表格的水平对齐方式

  • th / td 标签上的属性 （属性值 为 number 类型，表示合并几个单元格）

    • colspan=" " 水平方向上 合并单元格

    • rowspan=" " 垂直方向上 合并单元格

    • align="center / left / right" 每个单元格中内容 水平对齐方式

  • 创建一个红色边框 1px 宽的表格（制作假边框：用边框间距离 当做边框的宽度）
    • 表格 边框 宽度设为0
    • 边框间距离为 1px
    • 整体table的 背景颜色 定位 红色
    • 每个单元格原色 定位 白色

  
  
  
  
      
      
      
  
  
  
      
  
          
  
              
  
                  
  姓名
                  
  年龄
                  
  爱好
              
          
  
          
  
              
  
                  
  张新
                  
  18
                  
  帅
              
          
      
  
  
  
  

  5. 易忽略标签汇总

   标题标签 --- 利于搜索引擎
  - 搜索引擎使用标题为您的网页的结构和内容编制索引
  - h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推
     一号标题 对应 6号字体，依次类推
  
  
  
   换行
  
   定义水平线
  
  引用文本                  它的语义：引用别人的话, 不单单是加了双引号
  
                             空格（分号不能少）
  
                       保留原格式（对空行和空格进行控制）
  
          加粗
  
                  斜体
  
                删除文本标签
  
                下划线
  
                       上标
                       下标
  
                   缩小
  
                     电脑自动输出
  

  五、表单控件

  1. 表单构成：表单域、提示信息、表单控件

  2. 表单标签

  • 属性：
    • action="url" 规定提交表单 向何处发送数据
    • method="get / post 等值" 规定用于发送 form-data 的 HTTP 方法
    • name=" " 表单的名称

  3. 文本输入框

  • 属性：
    • type=" " 根据不用的 type 值，输入字段有很多种形式
    • name=" " 输入内容的键名
    • value=" " 默认内容值
    • autocomplete="on / off" 是否启动自动记忆补全功能，浏览器基于之前键入过的值
    • required 必填的表单项
    • readonly 输入框，只读模式
    • disabled 未激活
    • autofocus 自动获取光标焦点
    • placeholder=" " 占位符的值，仅适用于 input 标签；此属性仅适用于：属性适用于以下的 type 类型：text, search, url, telephone, email 以及 password。设置占位符内容的样式，如下：

  4. 密码输入框

  • 文本输入框的所有属性值，对于密码输入框都有效

  5. 单选框 圆形选项

  • 属性：

    • type="radio" 单选框属性
    • checked 或 checked="checked" 默认选中项
    • name=" " 单选框名称
    • required 必填的表单项

  • 要想保证单选效果，name 属性值 必须相同

  6. 多选框 方形选项

  • 属性：

    • type="checkbox" 多选框属性
    • checked 或 checked="checked" 默认选中项
    • name=" " 多选框名称
    • required 必填的表单项

  • name 属性设置同样的值，也不能单选

  7. 提交按钮

  8. 下拉列表 tab1

  • 标签可创建：单选 或 多选下拉框

  • select 标签属性：

    • name=" " 下拉列表的名称
    • multiple 下拉列表可多选
    • size=" "
    • disabled 规定禁用该下拉列表
    • required 必填项

  • option 标签属性：

    • selected 选中项 （不设置该属性，默认选中第一个）
    • value=" " 定义送往服务器的选项值
  • 下拉列表分组显示：

  
      
          1
          2
          3
      
      
          4
          5
          6
      
  
  

  • optgroup 标签属性
    • label 分组选项组名

  9. 文本域

  • 属性：
    • rows=" " 输入的行数 ；值为 number
    • cols=" " 输入的字符数 ；值为 number ； 字符数可理解为：以阿拉伯数字个数为准

  10. 文件上传控件

  11. 隐藏域 收集 或 发送信息

  • 隐藏域的作用：
    • value=" " 属性 存储数据，可在提交表单时一起发送给服务器

  12. 标签，被点击时 出发相应表单控件

  • label 元素不会向用户呈现任何特殊效果；但 在 label 元素内点击文本，就会触发此控件
  • 属性： for=" " 关联 表单控件的 id=" " 属性

  13. 完整的表单提交代码【待实现】

  六、常用的全局属性（含h5）

  1. title=" " 显示提示信息

  • 鼠标移动到元素上时，会显示一段提示文本（title属性值）

  2. class=" " 规定标签类名

  3. style=" " 规定行内样式

  4. id=" " 规定元素id，作为唯一标识

  5. data-属性名 = " " （h5）自定义属性，用于 存储数据

  • 属性名：其中不应该含大写字母

  • 数据存储在标签DOM对象的dataset数据集中；访问数据 DOM.dataset.属性名

  • 示例：

  
  
      
          
          
      
      
          按钮
      
      
  
  

  6. draggable="true / false / auto" （h5）元素是否可以被拖动， 默认值 auto 使用浏览器默认行为

  • 拖拽示例：

  
  
  
      
      
  
  
  
      
  
      
  
      
  这是一段可移动的段落。请把该段落拖入上面的矩形。
  
  
  
  
  
  

  七、路径

  相对路径：相对当前文件所在位置的路径

  • "./"：代表目前所在的目录。

  • "../"：代表上一层目录。

  • 以"/"开头：代表根目录。

  绝对路径

  • 盘符路径：c:/apache/cgi-bin 下的 不建议使用

  • 服务器路径：以http开头的链接

  根目录

  • 是相对子目录来说的，在文件系统建立时即已被创建
  • 打开“我的电脑”，双击C盘就进入C盘的根目录，双击D盘就进入D盘的根目录；其它类推。

  八、link 标签引入 浏览器工具栏图标；制作 .ico 格式的图标

  关于网站图标favicon.ico
  favicon.ico 制作工具

  • 图标大小

    • 三种尺寸：16 × 16、32 × 32、48 × 48
    • 32*32 最佳，再大了某些浏览器会不显示

  • 引入方式