今日心血来潮,打算把w3cschool的html从头至尾仔仔细细的看一遍。整理下自己以前忽略的一些知识点或一些好玩的知识点。
1.HTML 元素。
指的是从开始标签(start tag)到结束标签(end tag)的所有代码。没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的
2.改变文本的外观和含义。
很多标签都可以用来改变文本的外观,并为文本关联其隐藏的含义。总地来说,这些标签可以分成两类:基于内容的样式(content-based style)和物理样式(physical style)。
基于内容的样式
基于内容的样式标签会告诉浏览器它所包含的文本具有特定的含义、上下文或者用法。一旦你开始使用基于内容的样式之后,文档将会更加一致,而且可以更好地帮助执行自动搜索和内容编辑。这些标签是:
物理样式
在讨论基于内容的样式标签时,我们经常用到“意图”这个词。这是因为由标签传达的含义比浏览器显示文本的方式更为重要。然而,在某些情况下,可能是出于合法性或者版权等方面的原因的考虑,你希望文本以某种特殊的方式来显示(例如斜体或加粗)。在这种情况下,就可以对文本使用物理样式。
当前的 HTML/XHTML 标准一共提供了 9 种物理样式,包括粗体(bold)、斜体(italic)、等宽(monospaced)、下划线(underlined)、删除线(strikethrough)、放大(larger)、缩小(smaller)、上标(superscripted)和下标(subscripted)文本。这些标签是:
对此,让我联想到了html5中重视的一个重要概念,标签语义化,让代码的可读行和可维护性更好。
3.锚(<a>)的使用。
请始终将正斜杠添加到子文件夹。假如这样书写链接:href="http://www.w3school.com.cn/html",就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址,然后创建一个新的请求,就像这样:href="http://www.w3school.com.cn/html/"。
4.表单。
你是否看到过这样的效果
如果让你去实现它,你会怎么做,用div+css?如果这样做的话就太复杂了,在表单里有<fieldset>这个标签,用于定义域,上述效果就可以看做一个域,而用<legend>标签定义域的标题,于是你用下面几行代码就可以实现:
<form>
<fieldset>
<legend>健康信息</legend>
身高:<input type="text" />
体重:<input type="text" />
</fieldset>
</form>5.框架。
不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用!不过,假如你添加包含一段文本的 <noframes> 标签,就必须将这段文字嵌套于 <body></body> 标签内。
而且为了不支持框架的浏览器的兼容性,应该添加 <noframes> 标签。
例如:
<frameset cols="25%,50%,25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
<noframes>
<body>您的浏览器无法处理框架!</body>
</noframes>
</frameset>ps:该标签在html5中已经被废除,不建议使用。可用内联框架<iframe>
6.文档声明
对于很多初学网页制作的同学来说,每次依葫芦画瓢的制作网页的时候,都会看到文档开头有个<!DOCTYPE>声明,而不知做什么用。
<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息(声明),即 HTML 是用什么版本编写的。它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
请始终向 HTML 文档添加 <!DOCTYPE> 声明,这样浏览器才能获知文档类型。若不写,浏览器则会进入怪异模式,至于怪异模式,请自行百度。
常用的文档声明有:
html5
<!DOCTYPE HTML>
html4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">xhtml1.0<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">7.html头部元素
我们通常熟知的有<title><link><script>标签,而我们也经常会看到<base><meta>标签
<base> 标签为页面上的所有链接规定默认地址或默认目标(target)
<head> <base href="http://www.w3school.com.cn/images/" /> <base target="_blank" /> </head><meta> 标签提供关于 HTML 文档的元数据。meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据,一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />重定向<meta http-equiv="refresh" content="5;url=http://www.w3school.com.cn"/>
<link>标签的rel属性规定当前文档与被链接文档之间的关系。若你想为你的网页标题加一个图标可以这样:
<link rel="shortcut icon" type="img/x-icon" href="img/favicon.ico" />
8.URL编码
我们经常会碰见页面乱码的情况。原因是:
Web 浏览器通过 URL 从 web 服务器请求页面。而URL 只能使用ASCII 字符集来通过因特网进行发送。由于 URL 常常会包含 ASCII 集合之外的字符,像中文。所以有时候我们就要做转码处理
比如:“html 学习”在发送的时候就会被转换成“html++%D1%A7%CF%B0”