HTML学习笔记

最新推荐文章于 2022-11-23 22:25:40 发布

Beth_Chan

最新推荐文章于 2022-11-23 22:25:40 发布

阅读量641

点赞数

分类专栏：前端文章标签： HTML

本文链接：https://blog.csdn.net/beth_chan/article/details/79907615

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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>是默认的文本字体大小

行级元素
能在同一行内显示，不会改变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> 定义样本文本。