HTML学习笔记

HTML(HyperText Markup Language,超文本标记语言),其实可以理解为普通文本加HTML标签/标记。

XHTML(eXtensible HyperText Markup Language,可扩展超文本标记语言),是更严格、更纯净的HTML。

XML(eXtensible Markup Language,可扩展标记语言)文档是结构化文档。

HTML 4.01 -> XHTML 1.0 -> HTML 5

W3C(World Wide Web Consortium,万维网联盟)

SGML(Standard Generalized Markup Language,标准通用标记语言)是超文本格式的最高层次标准,是可以定义标记语言的元语言,甚至可以定义不必采用< >的常规方式。由于它的复杂,因而难以普及。

DTD(Document Type Definition,文档类型定义)定义HTML和XHTML的语义约束,HTML5没有DTD,在HTML5出现之前的XHTML和HTML 4.01都需要包含dtd文件的URL,浏览器一般不读取这些文件,而是只识别常见的DOCTYPE声明。

DOCTYPE声明是指HTML文档开头处的一行或两行代码,它描述使用哪个DTD。在下面的示例中,要使用的DTD是XHTML1.0 Strict的DTD.
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

HTML5 不基于 SGML,因此不需要对DTD进行引用,但是需要doctype来规范浏览器的行为;

而HTML4.01基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型。

过渡(transitional)版本仍然允许使用已经废弃的元素,比如font元素;严格(strict)版本禁止使用(为了把内容和表现分隔开)。

HTML5 中的一些新特性
新的特殊结构(更明确的语义元素)内容元素,不都是div如 header、nav、article、section(分块,标题和内容)、aside、footer、main(规定文档的主要内容);time;mark(黄色荧光笔)
新的表单控件,并对表单元素增强如 calendar、date、time、email、url、search
用于绘画的canvas元素,可用于三维、图形与特效
用于媒介回放的video和audio元素
对本地(离线)存储的更好支持
新增文件访问API、通信API,拖放API(可以让任意元素变成可拖动)
WebSocket实现Push通信
Web worker,异步执行JavaScript文件
可部分替代JavaScript
eg:document.getElementById(“×××”).focus()可变成标签的属性autofocus
还有一些输入校验的属性(支持boolean值的属性,可以不用属性值)
eg:disabled属性等价于disabled=”true”等价于disabled=”disabled”(XHTML严格的语法),类似还有checked,readonly,selected,defer(延迟),nowrap,nohref,ismap(img中,会将用户点击图片的坐标提交给服务器)等。

HTML5其实是一种妥协式的规范,不区分大小写,元素可以省略结束标签,可以省略属性值,属性值可以不使用引号。所有连续的空格或空行都会被算作一个空格。段落元素

段落内的换行符将会忽略,段落内的多个空格将被一个空格所代替。

结束后将会插入一个空白行。

XHTML的标签与属性名称必须用小写字母
在HTML中与是一样的
XHTML元素必须结束标签
在HTML中以下语句是正确的

This is an apple.

That is an egg.
XHTML的属性值必须加引号
在HTML中以下语句是正确的

XHTML必须显式定义属性值
在HTML中以下语句是正确的
改为
XHTML的元素必须正确地嵌套
要学会用工具验证XHTML文件

空元素:(不允许将开始标签和结束标签分开定义),可以不要斜线(并不要求遵守XML规范)

<meta/><br/>(换行)、<hr/>(水平线,默认3像素)、<img/><input/><link/>和area(area 元素总是嵌套在 <map> 标签中,定义图像映射中的区域)、base(所有链接的基准路径)、col、command、embed(src属性;定义嵌入的内容,比如插件swf)、keygen(name属性;规定用于表单的密钥对生成器字段;提交表单时,私钥存储在本地,公钥发送到服务器。 新元素,Internet Explorer 和 Safari不支持)、param、source、wbr(Word Break Opportunity,单词换行时机)
根元素是html元素。 head元素主要定义meta,title标题,link样式表,script脚本(经常是在标签的前面)等。 与 之间的文本是可见的页面内容。 body可指定onload、onclick、bgcolor等属性。(不提倡) eg:
<!-- This text is a comment -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Title of the document</title>
<link href=“XXX.css”rel=“stylesheet” type=“text/css”/>
<script src="XXX.js" type="text/javascript"></script> 
</head>
<body>
The content of the document......
</body>
</html>
div(division 划分,部分)
tr(table row)
th(table header)
td(table data)
table-cell(表格单元格)
data-自定义
可以使用Content-Type指定页面所用的字符集,但推荐直接使用charset。 然而,就算你把它縮減成下面,所有的浏览器還是會做出相同判定(甚至包括Internet Explorer 6): (8-bit Unicode Transformation Format,支持几乎所有字符) 还有GB2312(支持简体中文)、GBK(支持简体中文和繁体中文) 使用带有 http-equiv 属性的 标签时,服务器将把名称/值对添加到发送给浏览器的内容头部。http-equiv 属性为名称/值对提供了名称,并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。当服务器向浏览器发送文档时,服务器发送一个:content-type:text/html,告诉浏览器准备接受一个 HTML 文档。 viewport让我们的网页适配或响应各种不同分辨率的移动设备。 content=”width=device-width”是让当前viewport的宽度等于设备的宽度。设置视口等于理想视口,移动设备上的viewport分为layout viewport(布局视口) 、 visual viewport(可视视口) 和 ideal viewport(理想视口) 三类,其中的ideal viewport是最适合移动设备的viewport,ideal viewport的宽度等于移动设备的屏幕宽度。 这是一个文档兼容模式的定义。IE=edge告诉IE使用最新的引擎渲染网页(Edge 模式告诉 IE 以最高级模式渲染文档,简单的说,就是什么版本 IE 就用什么版本的标准模式渲染)。 chrome=1则可以激活Chrome Frame。与谷歌开发的Google Chrome Frame(谷歌内嵌浏览器框架GCF)有关。这个插件可以让用户的IE浏览器外观不变,但用户在浏览网页时实际上使用的是Chrome的内核,并且支持Windows XP及以上系统的IE6/7/8。指定页面默认首先使用GCF进行渲染,如果未安装GCF再使用IE内核进行渲染。 content的取值为webkit,ie-comp,ie-stand之一,区分大小写,分别代表用极速模式,兼容模式,IE模式打开。 meta标签的name属性语法格式是:<meta name=”参数” content=”具体的参数值”> 。 name属性主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。 A、Keywords(关键字) 说明:keywords用来告诉搜索引擎你网页的关键字是什么。 举例:<meta name =”keywords” content=”science, education,culture,politics,ecnomics,relationships, entertainment, human”> B、description(网站内容描述) 说明:description用来告诉搜索引擎你的网站主要内容。 举例:<meta name=”description” content=”This page is about the meaning of science, education,culture.”> C、robots(机器人向导) 说明:robots用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。 content的参数有all,none,index,noindex,follow,nofollow。默认是all。 举例:<meta name=”robots” content=”none”> D、author(作者) 说明:标注网页的作者 举例:<meta name=”author” content=”bluebox,web@7dspace.com”> http-equip其实就是有特殊意义的name,主要是向浏览器传递一些信息,通常是规定浏览器可以识别的,有特殊意义的元信息的名称。 http-equip属性值有:expires(过期时间);pragma([p’ræɡmə]编译,content=”no-cache”禁止浏览器从本地磁盘缓存中获取该页面内容,通过这个定义,浏览器一般不会缓存页面,而且浏览器无法脱机浏览);refresh(多长时间后自动刷新指定页面);set-cookie(设置cookie,如果网页过期,客户端上的cookie也将被删除);content-type(设置内容类型和所用的字符集) 为文档提供一些附加信息,可被浏览器、搜索引擎或网页制作工具使用的信息。如文档作者、网页有效期、关键字列表等 设置格式 或 例: “` 设置关键字 设置作者 设置网页生成工具 “` http-equiv和name只能二取一,name则向搜索引擎和制作工具提供信息 设置网页过期时间 告诉浏览器5秒后网页刷新到zhku网站 rel是relationship的英文缩写,它描述了当前页面与href所指定文档的关系; stylesheet就是样式表的意思;css是 Cascading Style Sheet(级联样式表)的缩写 不要在和或和或和之间插入任何内容。 段落标签内换行符会被忽略。 多个空格会变成一个。 标签类型 1. 块级标签 从左到右撑满页面,独占一行;触碰到页面边缘时,会自动换行。 如:div p ul li dl dt form table h1…
<h1 align="center">This is heading 1</h1>   还有<h2><h6>
分级标题
<h1><h2><h3><h4><h5><h6>
标题格式化显示,值越大,字越小
<h4>是默认的文本字体大小
  1. 行级元素
    能在同一行内显示,不会改变HTML文档结构。(大部分表单标签)
    如:span a strong(加粗) em sub sup img input …

//就是不会跳转
a链接是行内元素,设置width和height时要换成块元素,即display:block;

块标签不能出现在行内标签内
行内标签不能直接放在文档主体或表格

将img放a元素内可创建带链接的图片
标签
1. href=”#”; 空连接
2. 链接的4种状态
:link 初始状态
:visited 已点击状态
:hover 鼠标经过
:active 鼠标按下(激活)
强调:设置样式时需要按照以上次序设置,因为如果次序反过来,鼠标停留和激活样式就不起作用了。
3. 去掉下划线
text-decoration: none;

span不换行,div换行,p会有更大的间距。p会自动地在段落的前后添加空行。(

是块级元素)
span不能包含p。
b粗体
strong强调粗体
i斜体
em强调斜体
big 变大号
small
sup上标
sub下标
bdo标签 dir属性的属性值只能是ltr(从左向右正常排列)或rtl(从右向左逆向排列)指定文本的排列方向
abbr缩写
address地址
blockquote文本块引用 浏览器在 blockquote 元素前后添加了换行和外边距,可使用cite属性指定该引用文本所引用的网址 URL或出处。
q短的引用文本,会添加(双)引号
del被删除的文本,中划线,不赞成使用元素和 元素
ins插入的文本,下划线
pre包含的文本已预格式化
code代码
dfn专业术语,粗体或斜体
cite书、电影、歌曲的标题,斜体
var变量,斜体
kbd键盘文本
samp示范文本

<b>This text is bold</b>
<br/>
<strong>This text is strong</strong>
<br/>
<big>This text is big</big>
<br/>
<em>This text is emphasized</em>
<br/>
<i>This text is italic</i>
<br/>
<small>This text is small</small>
<br/>
This text contains
<sub>subscript</sub>
<br/>
This text contains
<sup>superscript</sup>
<br/>
<del>二十</del> 删除线
<br/>
<ins>十二</ins>下划线
效果: This text is bold
This text is strong
This text is big
This text is emphasized
This text is italic
This text is small
This text contains subscript
This text contains superscript
二十 删除线
十二下划线 标签与属性: a href; target;download属性(新增)指定了目标资源另存为的文件名;name属性可以做命名锚点(另一个用URL资源#加锚点名,当前页面省略URL资源) img src;alt;height;width;usemap(下面用 定义图片映射) ul ol type(A与a;I与i); start; reversed(浏览器不支持) li dl术语列表 dt标题 dd对标题的说明 table border(不建议) tr td colspan; rowspan thead tbody tfoot caption标题 colgroup col span cellpadding内容与单元框的间距 (不建议) cellspacing单元格之间的间距 (不建议) style可以设置背景色和宽度 每个表格由 table 标签开始。 每个表格行由 tr 标签开始。 每个表格数据由 td 标签开始。
两行三列:
<table border="1">
<tr>
      <td>100</td>
      <td>200</td>
      <td>300</td>
</tr>
<tr>
      <td>400</td>
      <td>500</td>
      <td>600</td>
</tr>
</table>
URL(Uniform Resource Locator,统一资源定位器)
<img src ="planets.gif" alt="Planets" usemap ="#planetmap" />
<map name="planetmap">
  <area shape="rect" coords="0,0,110,260" href="sun.htm" alt="Sun" />
  <area shape="circle" coords="129,161,10" href="mercur.htm" alt="Mercury" />
  <area shape="rect" coords="75,75,99,99" nohref="nohref"> // nohref 属性指定一个区域没有相关链接.
  <area shape="circ" coords="50,50,25" href="http://www.fkjava.org">
  <area shape="poly" coords="188,28,185,50,200,74,224,72,246,51" href="http://www.crazyit.org">
</map>
area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。 coords 属性规定区域的 x 和 y 坐标。 coords 属性与 shape 属性配合使用,来规定区域的尺寸、形状和位置。 图像左上角的坐标是 “0,0”。 详细解释: 标签的 coords 属性定义了客户端图像映射中对鼠标敏感的区域的坐标。坐标的数字及其含义取决于 shape 属性中决定的区域形状。可以将客户端图像映射中的超链接区域定义为矩形、圆形或多边形等。 下面列出了每种形状的适当值: 圆形:shape=”circle”,coords=”x,y,z” 这里的 x 和 y 定义了圆心的位置(”0,0” 是图像左上角的坐标),r 是以像素为单位的圆形半径。 多边形:shape=”polygon”,coords=”x1,y1,x2,y2,x3,y3,…” 每一对 “x,y” 坐标都定义了多边形的一个顶点(”0,0” 是图像左上角的坐标)。定义三角形至少需要三组坐标;高纬多边形则需要更多数量的顶点。 多边形会自动封闭,因此在列表的结尾不需要重复第一个坐标来闭合整个区域。 矩形:shape=”rectangle”,coords=”x1,y1,x2,y2” 第一个坐标是矩形的一个角的顶点坐标,另一对坐标是对角的顶点坐标,”0,0” 是图像左上角的坐标。请注意,定义矩形实际上是定义带有四个顶点的多边形的一种简化方法。 注释:如果某个 area 标签中的坐标和其他区域发生了重叠,会优先采用最先出现的 area 标签。浏览器会忽略超过图像边界范围之外的坐标。 > src(URL,指定装载哪个页面);name;scrolling;height;width;longdesc;srcdoc(新增,允许直接指定HTML片段,eg:srcdoc=”

HTML5

重要的标记语言
“) 弃用 不能与 标签一起使用 标签
<html>
<frameset cols="25%,50%,25%">水平用rows
      <frame src="../example/html/t.asp-f=hdom_event_screenxy" tppabs="http://www.w3school.com.cn/example/html/frame_a.html">
      <frame src="../example/html/t.asp-f=hdom_event_shiftkey" tppabs="http://www.w3school.com.cn/example/html/frame_b.html">
      <frame src="../example/html/t.asp-f=hdom_event_srcelement" tppabs="http://www.w3school.com.cn/example/html/frame_c.html">
</frameset>
</html>
混合框架:
<frameset rows="50%,50%">
    <frame src="../example/html/t.asp-f=hdom_event_screenxy" tppabs="http://www.w3school.com.cn/example/html/frame_a.html">
    <frameset cols="25%,75%">
    <frame src="../example/html/t.asp-f=hdom_event_shiftkey" tppabs="http://www.w3school.com.cn/example/html/frame_b.html">
    <frame src="../example/html/t.asp-f=hdom_event_srcelement" tppabs="http://www.w3school.com.cn/example/html/frame_c.html">
</frameset>
</frameset>
导航框架:
内联框架:
src="../i/t.asp-f=hdom_form_checkbox">

Html 5中不支持applet,使用<object>代替。
etc. WWW HTML 5 不支持 。请使用 代替

属性:
title   常跟a标签一起使用,以提供关于链接目标的信息。
lang    语言
accesskey   快捷键,使用Alt+快捷键可激活对应元素
tabindex    按Tab键时获取焦点,属性值为1时代表用户第一次按Tab时该元素获得焦点;-1表示不要获取焦点

新增的属性:
contentEditable true是可编辑元素里的内容
designMode(相当于全局的contentEditable)   默认为off
hidden  true相当于css的display:none
spellcheck  是否执行拼写检查(IE和FireFox还不支持)
contextmenu 右键激发菜单,还不支持
可以ondblclick="this.contentEditable=true;"

figure图片区域   
figcaption图片区域标题    

新增的语义元素:
mark    黄色(效果就是黄色荧光笔)
time    datetime;pubdate(boolean,是否是发布日期),标准格式为****-**-**(日期)和**:**(时分)时,可以不用datetime,显示效果是时间的左右各有空格
details  
summary 作为details的摘要,默认可见。点击后显示details里的详细内容     (summary有三角形,一开始detail是折叠的,只有 空格Chrome 以及 Safari 6 支持)
    details和summary可控制收起和展开
wbr 何处添加换行   
bdi 上下文抽离    
menu 还不支持    
menuitem 还不支持   


link 图标,样式表 href;rel;type;图标是href="*.ico" , rel="shortcut icon",ico的MIME类型是"image/x-icon";样式表是stylesheet和text/css
base 所有链接的基准路径  



input元素
密码框,maxlength最大字符数,readonly不允许用户修改 单选框和复选框,当提交form时,如果选中了此单选按钮,那么value就被发送到服务器 // 文件上传域 按钮,如果有设name,请求参数会把value使用application/x-www-form-urlencoded编码后得到字符串 图片域可设src,width,height // 另外type=”hidden”是隐藏域 eg: // name设置名称,并用于分组,一组单选框或复选框的名称必须是相同文本; 男性:
女性:
enctype属性值
application/x-www-form-urlencoded   在发送前编码所有字符(默认,只处理表单里的value属性值)
multipart/form-data 不对字符编码。(二进制流方式)
    在使用包含文件上传控件的表单时,必须使用该值。
text/plain  空格转换为 "+" 加号,但不对特殊字符编码。



选项框
// size大于1,则为滚动列表;显示几个 选项文字 选项文字




为控件分组
为控件分组 信息 // 被包围的标题 地址: 邮编:



HTML5新增的拖放API可以让HTML页面的任意元素都变成可拖动的。
    在HTML5中,img元素默认是可拖动的,a元素有href属性默认也是可拖动的。
    draggable="true",并为被拖动元素的ondragstart事件指定监听器,在监听器中让拖动操作可以携带数据。
    还要取消事件的默认行为。
    var ele = document.getElementById("***");
    ele.ondragstart = function(event){ event.dataTransfer.setData("text", "event.target.innerHTML"); } // text是数据格式,event.target.innerHTML是数据。
    document.ondragover = function(event){ return false; }
    document.ondrop = function(event){ 
        ele.style.position = "absolute";
        ele.style.left = event.pageX + "px";
        ele.style.top= event.pageY + "px";
        return false;
    }
    拖放事件有dataTransfer属性,该属性值是一个DataTransfer对象,有setData和getData等方法和属性。
    把东西拖进垃圾桶可以用removeChild

for 属性
    规定 label 与哪个表单元素绑定。
    eg:



    <label for="male">Male</label>
    <input type="radio" name="sex" id="male" />
    <br />
    <label for="female">Female</label>
    <input type="radio" name="sex" id="female" 

点击文本标记之一,就可以触发相关控件



<a href="mailto:bill@microsoft.com">Bill Gates</a>
target="_blank"链接会在新窗口中打开。target="_top"是跳出框架。
<a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>应该使用 %20 来替换单词之间的空格,这样浏览器就可以正确地显示文本了。

<p>
IE条件注释法:
</p>

<p>
下面是淘宝网的学习笔记:

``` html
   <!-- 所有注释都是我自己添加的,包括注释里的代码。换行也已经整理好。-->
    <meta charset="utf-8" /><!--声明文档使用的字符编码-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><!--声明文档的兼容模式,让IE浏览器用最高级内核渲染页面,还有用 Chrome 框架的页面用webkit 内核 -->
    <meta name="renderer" content="webkit" /><!--用webkit内核渲染页面-->
    <title>淘宝网 - 淘!我喜欢</title>
    <!--SEO 优化 搜索引擎优化 包括description(content不超过150个字符),keyword,author,robots-->
    <meta name="spm-id" content="a21bo" /><!--SPM是为外部合作伙伴(外站)提供的一套跟踪引导成交效果数据的解决方案。-->
    <meta name="description" content="淘宝网 - 亚洲较大的网上交易平台,提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品,同时提供担保交易(先收货后付款)等安全交易保障服务,
    并由商家提供退货承诺、破损补寄等消费者保障服务,让你安心享受网上购物乐趣!" />
    <meta name="aplus-xplug" content="NONE">
    <meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,
    拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺" />
<!--    为移动设备添加 viewport
    <meta name ="viewport" content ="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">  -->
    <!--以下是预解析技术,当你浏览网页时,浏览器会在加载网页时对网页中的域名进行解析缓存,这样在你单击当前网页中的连接时就无需进行DNS的解析,减少用户等待时间,提高用户体验。-->
    <link rel="dns-prefetch" href="//g.alicdn.com" />
    <link rel="dns-prefetch" href="//img.alicdn.com" />
    <link rel="dns-prefetch" href="//tce.alicdn.com" />
    <link rel="dns-prefetch" href="//gm.mmstat.com" />
    <link rel="dns-prefetch" href="//log.mmstat.com" />
    <link rel="dns-prefetch" href="//tui.taobao.com" />
    <link rel="dns-prefetch" href="//ald.taobao.com" />
    <link rel="dns-prefetch" href="//gw.alicdn.com" />
    <link rel="dns-prefetch" href="//atanx.alicdn.com"/>
    <link rel="dns-prefetch" href="//dfhs.tanx.com"/>
    <link rel="dns-prefetch" href="//ecpm.tanx.com" />
    <link rel="dns-prefetch" href="//res.mmstat.com" />
    <link rel="dns-prefetch" href="//log.mmstat.com" />
    <link href="//img.alicdn.com/tps/i3/T1OjaVFl4dXXa.JOZB-114-114.png" rel="apple-touch-icon-precomposed" /><!--禁止系统自动添加效果,直接显示设计原图-->




<div class="se-preview-section-delimiter"></div>
1.pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符,而文本也会呈现为等宽字体。 
2.<th> 标签定义 HTML 表格中的表头单元格。
3.<dd> 标签定义一个定义列表中对项目的描述。<dt> 标签定义列表中的项目。<dl> 标签定义一个定义列表(definition list)。<dl> 标签用于结合 <dt> (定义列表中的项目)和 <dd> (描述列表中的项目)。
4.<fieldset> 标签用于从逻辑上将表单中的元素组合起来。<fieldset> 标签会在相关表单元素周围绘制边框。 
5.<hr> 标签水平线 
6.<select> 标签创建下拉列表。
7.<cite> 标签定义作品(比如书籍、歌曲、电影、电视节目、绘画、雕塑等等)的标题。注释:人名不属于著作的标题。
8.<dfn> 标签<dfn> 定义一个定义项目 ,可标记那些对特殊术语或短语的定义。现在流行的浏览器通常用斜体来显示 <dfn> 中的文本。将来,<dfn> 还可能有助于创建文档的索引或术语表。
9.<em> 呈现为被强调的文本。 斜体。  
10.<var> 定义变量。 
11.<kbd>:定义键盘文本。它表示文本是从键盘上键入的。  
12.<samp> 定义样本文本。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值