Html小记

1. Html简介

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

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

HTML 标签

  • 附：标签元素之间的互转 ( display属性 )
  • display:block ( 标签按照块级元素的方式显示 )
  • display:inline ( 标签按照行内元素的方式显示 )
  • html标签通常是成对出现的，另外也包含自闭合的标签
  • 成对标签分为开放标签和闭合标签


  1. 块级元素 ( block )

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

    特点：

  2. 行内元素 ( inline )

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

    特点：

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

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

    特点：

  4. 一个块级元素独占一行
  5. 元素的高度、宽度、行高、顶和底边距都可设置
  6. 元素宽度在不设置的情况下，是它本身父容器的100%，即默认和父元素宽度一致
  7. 和其他元素都在一行上
  8. 元素的高度、宽度、行高、顶和底边距不可设置
  9. 元素的宽度就是其包含文字或图片的宽度，不可改变
  10. 行内块元素即同时具备行内元素、块级元素的特点
  11. 行内块元素在一行上显示

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

  13. 特点

  14. 标签元素类型

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

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

link

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

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

style

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

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

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>

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"></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 分别在什么情况使用

表格

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

样式/节

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

编程

标签描述
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;