HTML小记

  • A+
所属分类：Web前端
摘要

HTML（ Hyper Text Markup Language ）是用来描述网页的一种标记语言HTML 标签标记标签通常被称为 html 标签（ tag ）
便宜好用的国外VPS推荐

Html小记

1. Html简介

  1. HTML（ Hyper Text Markup Language ）是用来描述网页的一种标记语言

    • html 不是一种编程语言，而是一种标记语言
    • 标记语言是一套标记标签；使用标记标签来描述网页
    • html 文档也被称为网页，其包含 html 标签和纯文本

  2. HTML 标签

    1. 标记标签通常被称为 html 标签（ tag ）

    2. 特点

      • html标签通常是成对出现的，另外也包含自闭合的标签
      • 成对标签分为开放标签和闭合标签

    3. 标签元素类型

      1. 块级元素 ( block )

        简介：在html种 div 、p 、 hn 、ul 、li 标签元素属于块级元素

        特点：

        1. 一个块级元素独占一行
        2. 元素的高度、宽度、行高、顶和底边距都可设置
        3. 元素宽度在不设置的情况下，是它本身父容器的100%，即默认和父元素宽度一致

      2. 行内元素 ( inline )

        简介：在html中 a 、span 、 br 、i 、 em 、 strong 、 label 等属于行内元素

        特点：

        1. 和其他元素都在一行上
        2. 元素的高度、宽度、行高、顶和底边距不可设置
        3. 元素的宽度就是其包含文字或图片的宽度，不可改变

      3. 行内块元素 ( inline-block )

        简介：在html 中 img 、input 属于行内块元素

        特点：

        1. 行内块元素即同时具备行内元素、块级元素的特点
        2. 行内块元素在一行上显示
      • 附：标签元素之间的互转 ( display属性 )
        • display:block ( 标签按照块级元素的方式显示 )
        • display:inline ( 标签按照行内元素的方式显示 )

2. Html 结构

html文档结构分为 文档声明、头部 、身体 三部分

1. 文档声明 ( DOCTYPE )

  1. 简介：html文档通常以类型声明开始，该声明将帮助浏览器确定其尝试解析和显示的 html 文档类型

    特点：文档声明必须是 html 文档的第一行、且顶格显示，对大小写不敏感；此类型不是标签

    版本：

    1. XHTML 1.0 (2000年)

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   # 严格型  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> # 过渡型  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> # 宽松型

    2. HTML 5 (2014年)

      <!DOCTYPE html>

2. 头部分 ( head )

  1. 相关元素

    标签 描述
    head 定义关于文档的信息（必需）
    title 定义文档标题（必需）
    base 定义该页面上所有链接默认指向的地址或目标（target）
    link 定义该文档与外部资源的联系
    meta 定义关于html的元数据
    script 定义客户端脚本
    style 定义该文档的样式

  2. title

    • 定义浏览器工具栏中的标题
    • 提供页面被添加到收藏夹时显示的标题
    • 显示在搜索引擎结果中的页面标题

  3. link

    此标签 最常用于连接样式表（CSS）

    <head> 	<link rel="stylesheet" type="text/css" href="mystyle/css" /> </head>

  4. style

    此标签 是CSS的另一种引入方式

    <head>     <style type="text/css">         body {             background-color:red         }         p {color:blue} </head>

  5. meta

    此标签 提供关于html文档的元数据；元数据不会在页面上显示，但对于机器是可读的

    典型的情况是，meta元素常被用于规定页面的描述(如何显示内容或重新加载页面)、关键词、文档的作者、最后的修改时间以及其它元数据

    <head> 	<meta charset="UTF-8">        									<!--定义显示的字符集-->     <meta name="description" content="Free Web tutorials on HTML,XML,CSS">		<!--定义页面描述-->     <meta name="keyword" content="HTML,CSS,XML">								<!--定义关键词-->     <meta  name="viewport" content="width=device-width inital-scale=1.0">		<!--禁用溶放，兼容手机-->     <meta http-equiv="X-UA-Compatible" content="ie=edge" >						<!--告诉IE使用最新--> </head>

  6. script

    此标签 最常用于定义客户端脚本，比如 Javascript

    script 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件；必需的 type 属性规定脚本的MIME 类型

    Javascript 最常用于 图片操作、表单验证 以及 动态内容更新

    <head>     <script type="text/javascript">     	document.write("Hello World!")     </script>     <noscript> Your browser does not support Javascript!</noscript> <!--不支持javascript替代显示内容--> </head>

3. 主体 ( body )

此部分 包含所有网页需要显示的文本内容

1. 标签元素（按结构）

  1. 格式

    标签 描述
    abbr 定义缩写
    address 定义文档作者或拥有者的联系信息（通常为斜体）
    bdi 定义文本方向，脱离周围的文本发方向（左→右;右→左）
    bdo 定义文字方向
    blockqoute 定义块引用（自动缩进）
    del 定义被删除的文本
    ins 定义被插入的文本
    mark 定义有记号的文本(字体亮色)
    meter 定义度量给定范围(gauge)内的数据
    pre 预定义格式化文本(常用于源代码)
    定义任何类型的任务进度(进度条) progress
    q 定义行内引用(“内容”)
    sup 定义上标文本
    sub 定义下标文本
    time 定义时间文本
    wbr 定义可能的换行符

  2. 表单

    表单用于向服务器传输数据

    标签 描述
    form 定义供用户输入的HTML表单
    input 定义输入控件
    textrea 定义多行的文本输入控件（评论）
    button 定义按钮
    select 定义选项列表
    optgroup 定义选项组（列表组）
    option 定义选项列表中的选项
    label 为 input 元素定义标注（标记）
    fieldset 定义围绕表单中元素的边框
    legend 定义fieldset元素的标题
    datalist 定义下拉列表（与 input 配合 表示可能出现的值）
    keygen 定义生成密钥（当提交表单时，私钥存储本地，公钥发送到服务器）
    output 定义不同类型的输出，例如脚本输出

    1. select

      此标签 可创建单选或多选菜单

      <select>   <option value ="volvo">Volvo</option>   <option value ="saab">Saab</option>   <option value="opel">Opel</option>   <option value="audi">Audi</option> </select>

    2. datalist

      此标签 定义选项列表，与input标签配合使用该元素，来定义input可能的值

      datalist及其选项不会被显示出来，它仅仅是合法的输入值列表

      <input id="myCar" list="cars" /> <!--用input元素中的list属性来绑定datalist--> <datalist id="cars">   <option value="BMW">   <option value="Ford">   <option value="Volvo"> </datalist>

  3. 框架

    标签 描述
    frame 定义框架集的窗口或框架（不能与标签一起使用）
    frameset 定义框架集
    noframes 定义针对不支持框架的替代内容
    iframe 定义内联框架（行内框架）

    1. frame

      此标签 定义 frameset中的一个特定的窗口（框架）

      <html>     <frameset cols="25%,50%,25%">       <frame src="frame_a.htm" />       <frame src="frame_b.htm" />       <frame src="frame_c.htm" />     </frameset> </html>

    2. iframe

      此标签 会创建包含另外一个文档的内联框架（即行内框架）

      <html>     <body>         <iframe src="/i/eg_landscape.jpg" alt="HTML小记"></iframe>         <p>一些老的浏览器不支持 iframe。</p>         <p>如果得不到支持，iframe 是不可见的。</p>     </body> </html>

  4. 图像

    标签 描述
    img 定义图像
    map 定义一个客户端图像映射；映射（image-map）指带有可点击区域的一幅图像
    area 定义图像映射中的区域（总是嵌套在

    中）
    canvas 定义图形（图形容器）
    figure 定义独立的流内容（图像、图表、照片、代码等等）
    figcaption 定义 figure 元素 的标题

    1. canvas

      此标签 定义图形 比如图标和其它图像

      此标签 只是一个图形容器，必须用脚本来绘制图形

      <canvas id="myCanvas"></canvas> <script type="text/javascript">     var canvas=document.getElementById('myCanvas');     var ctx=canvas.getContext('2d');     ctx.fillStyle='#FF0000';     ctx.fillRect(0,0,80,100); </script>

  5. 音频/视频

    标签 描述
    audio 定义声音内容
    source 定义媒介资源（audio和video）
    track 定义在媒体播放器中的文本轨道（字幕）
    video 定义视频

  6. 链接

    标签 描述
    a 定义锚（超链接）
    link 定义文档与外部的资源的联系
    nav 定义导航链接

  7. 列表

    标签 描述
    ul 定义无序列表
    ol 定义有序列表
    li 定义列表的项目
    dl 定义定义列表
    dt 定义定义列表中的项目
    dd 定义定义列表中项目的描述
    menu 定义命令的菜单/列表
    1. ul ol dl 分别在什么情况使用
      • 无序列表在列表项目对顺序没要求时使用，可以是任何一系列项目
      • 有序列表在列表项目对顺序有要求的时候使用
      • 定义列表在对项目有描述要求时使用

  8. 表格

    标签 描述
    table 定义表格
    caption 定义表格标题
    th 定义表格中的表头单元格
    tr 定义表格中的行
    td 定义表格中的列
    thead 定义表格中表头的内容
    tbody 定义表格中主体的内容
    tfoot 定义表格中表注内容（脚注）
    col 定义表格中一个列或多个列的属性值
    colgroup 定义表格中供格式化的列组

  9. 样式/节

    标签 描述
    style 定义文档的样式信息
    div 定义文档的节（块级）
    span 定义文档的节（行内）
    header 定义section或page的页眉
    footer 定义section或page的页脚
    section 定义文档中的节（section、区段）;比如章节、页眉、页脚或文档中的其他部分
    article 定义文章
    aside 定义页面内容之外的内容（如：文章侧栏）
    details 定义元素细节（如描述文档、文档某个部分的细节）
    summary 为details定义可见的标题

  10. 编程

    标签 描述
    script 定义客户端脚本
    noscript 定义客户端不支持脚本的替代内容
    embed 为外部内容(非html)定义容器
    object 定义嵌入的对象
    param 定义参数

2. 属性（全局）

属性（赋予元素语境和意义） 描述
class 规定元素的一个或多个类名（引用样式表中的类）
contenteditable 规定元素内容是否可编辑
data- * 用于存储页面或应用程序的私有定制数据
dir 规定元素内容的文本方向
draggable 规定元素是否可拖动
hidden 规定元素仍未或不再相关（布尔属性）
id 规定元素的唯一id
lang 规定元素内容的语言
spellcheck 规定是否对元素进行拼写和语法检查
style 规定元素的行内css样式
title 规定有关元素的额外信息
translate 规定是否应该翻译元素内容

  1. contenteditable

    <p contenteditable="true">这是一个可编辑的段落</p>

  2. data-*

    此属性 赋予在所有HTML元素上嵌入自定义data属性的能力

    自定义数据能够被页面的 Javascript 利用，以创建更好的用户体验

    <!DOCTYPE html> <html> <head> <script> function showDetails(animal) {     var animalType = animal.getAttribute("data-animal-type");     alert(animal.innerHTML + "是一种" + animalType + "。"); } </script> </head> <body>  <h1>物种</h1>  <p>点击某个物种来查看其类别：</p>  <ul>   <li onclick="showDetails(this)" id="owl" data-animal-type="鸟类">喜鹊</li>   <li onclick="showDetails(this)" id="salmon" data-animal-type="鱼类">金枪鱼</li>     <li onclick="showDetails(this)" id="tarantula" data-animal-type="蜘蛛">蝇虎</li>   </ul>  </body> </html>

3. 常用实体

实体字符 ( ASCII Encoding Refence )是用来在代码以实体代替与HTML语法相同的字符，避免浏览器解析错误

字符 名称 实体名称
“ 双引号 &+quot;
& &符 &+amp;
< 左尖括号（小于号） &+lt;
> 右尖括号（大于号） &+gt;
空格 &+nbsp;
￥ 人民币 &+yen;
© 版权 &+copy;
® 商标 &+reg;
便宜好用的国外VPS推荐