HTML小记

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

HTML( Hyper Text Markup Language )是用来描述网页的一种标记语言HTML 标签标记标签通常被称为 html 标签( tag )


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;