1.注释
<!--这是HTML中的注释-->
/*这是CSS中的注释*/
2.<style>
<style type="text/css">type是可选的属性(为什么?见HTML的历史与历史遗留问题的1)。
在某些个别的情况下,如属性值本身就含有双引号,那么必须使用单引号,例如:name='John "ShotGun" Nelson'
3.<img>
<img src="../images/green.jpg" alt="Green Tea Cooler" width="1080" height="1920">
1.src(source=源)是必须属性。指定一个img标记显示的图像文件名。可以使用网址代替文件路径(与href很不一样,其是取得资源加载到页面,而href是链接到某个资源。src没有“默认文件”的概念),起作用是指定图片获取的地址,然后用图片代替整个标签(而href是指向某个地址的页面)。
2.alt(alter)是必须属性。指定描述这个图像的一些文本——当图像无法显示的时候,就会把这段文本用来取代图像去显示(有些浏览器会在文本下出现一个破损的图片,比如Edge;有些浏览器则干脆只有一段文本,比如Firefox)(2017.11.3)。
我注意到,alt和title的功能似乎有点相似了,她们之间有何区别?为什么title被设计成全局属性?
我认为,alt是为了提供候选格式,就像是字体中必须加sans-serif一样,当图片出不来就用她代替图片——《Head First HTML与CSS》的P242中明确说了alt的两个作用,一个是替代图片(当图片加载不了的时候),另一个是对视力障碍的用户读出图片信息(即读alt的值——在我看来,这也是替代作用,即对于视力障碍的人来说,看不到图片=加载不了图片);网上说搜索引擎会根据alt里判定图片内容,我觉得是有可能的——不是说alt的设计是为了方便搜索引擎,而是搜索引擎根据alt的特性设计了这样的判定规则。而title是提供额外的信息。
暂时先放着这个坑,只记录一个百度到的应用层面的内容:“使用alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明。这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户、视觉障碍的用户和使用屏幕阅读器的用户。替换文字是用来替代图像而不是提供额外说明文字的。 在写替换文字前仔细想想,保证那些文字确实为那些看不到图像的人提供了说明信息,并且在上下文中有意义。对于那些装饰性的图片可以使用空的值(alt="",引号中间没有空格),而不是使用不相关的替换文字比如“blue bullet”或者“spacer.gif”。不要忽略它,如果你忽略了,那么一些屏幕阅读器会直接阅读图像文件的文件名,那些文字浏览器,比如Lynx会显示图像文件的文件名,而那对于你的浏览者就没什么用了.....title属性有一个很好的用途,即为链接添加描述性文字,特别是当连接本身并不是十分清楚的表达了链接的目的。这样就使得访问者知道那些链接将会带他们到什么地方,他们就不会加载一个可能完全不感兴趣的页面。另外一个潜在的应用就是为图像提供额外的说明信息,比如日期或者其他非本质的信息。”——出自文章:浅谈title属性与alt属性
3.width(图像宽度)和height(图像高度)是必须属性,告诉浏览器即将加载的图像宽度和高度是多少。
为什么要告诉浏览器这两个信息呢?因为浏览器在显示图像之前就可以建立页面布局了,如果你不告诉浏览器宽、高,浏览器就要在下载图像后根据图像的宽、高重新布置页面(注意,浏览器是在解析HTML文件并开始显示页面后才下载图像的)。如果你提前告诉了浏览器宽、高(浏览器在显示页面时,要解析HTML语言提供的信息;显示完页面布局后,才开始加载图片资源),就不需要重新布局了——当然,如果你告诉浏览器的图像实际尺寸更大或更小,浏览器就会缩放图片来满足你(可以结合浏览器加载图片的步骤来理解,详见(2)《Head First HTML与CSS》学习笔记---img与基于标准的HTML5的1)。
但是不能通过这两个属性对图片进行缩放满足你的页面要求,为什么?简单地说就是我们之前说过的要把结构和表现分开——缩放就是一种表现了,不应该是HTML管的,具体的说,这有很多原因,以后填坑。
4.<a>
<a href="http://wickedlysmart.com/buzz/#Coffee" title="Caffeine Buzz" target="_blank">Caffeine Buzz</a>
其又称锚标签,a=anchor(锚)。
1.href(hypertextreference=超文本引用)是必须属性,告诉我们一个超链接的目标文件。可以使用网址代替文件路径(加粗部分,在浏览器下会默认寻找一个默认文件,补成:buzz/index.html#Coffee)。
另外,也可以直接链接到图片:
<a href="photos/seattle_downtown.jpg" title="downtown_jpg">Downtown</a>
2.title是必须属性,其值告诉我们所要链接的页面的文本描述——这对于那些有视力障碍使用屏幕阅读器的人来说尤其重要;在相当一部分的浏览器中,光标停留在这个链接上时也会显示出title的内容(2017.11.3,Edge和Firefox 开发者版本),以此告诉点击者这个链接指向什么。(可以为任何一个元素增加title属性!)
(不是只有文字才可以作为<a>元素的内容,也可以是<img>、<p>等。)
3.target是可选属性,其值告诉我们在哪个新窗口中打开页面——“_back”值表示总是打开一个新窗口(即使n个<a>标签的值都是这个,也会打开新的而不会覆盖);如果两个<a>中的target值一样(但不是”_back“,比如都是“one”,target的值就像是确定新开窗口的名字),则都会在同一个窗口打开。(浏览器默认“打开新窗口”=打开新标签,可以通过浏览器的设置更改)
对于使用不同设备和浏览器的用户,target属性可能会有问题。
5.<ul>、<ol>、<dl>
<ul>
<li>cellphone</li>
<li>iPod</li>
<li>digital camera</li>
<li>and a protein bar</li>
</ul>
这是一个无序列表,有序用<ol>(ul=unordered list,ol=ordered list)。
列表元素被设计为只能包含<li>元素,但是<li>元素是可以包含其它元素的。
这是一个定义列表:
<dl>
<dt>Tody</dt>
<dd>1920.1.1</dd>
<dt>Tomorrow</dt>
<dd>1920.1.2</dd>
</dl>
<dt>是定义术语,<dd>是定义描述(dl=Definition list;dt=Define terms;dd=Definition description)。
6.id属性的应用
<p id="chai">Read about our Mission.</p>
id不是必要属性,但却是唯一标识元素的方法——这也意味着id名字是同一个html文件中唯一的!(任何元素都可以有id属性)
id能不能同名不同元素?同id多次使用会如何——还有一系列的问题,在学完Javascript后可能就能理解了,先放着。
id名字可以以一个数字或字母开头,,可以有“_”,但不能有空格。
id属性有一些特殊的特性:
1.带有id的元素,你可以直接链接这些元素。方法是如下面的代码(右键查看元素,可以查看某个网页的某个地方有没有id,有就可以直接链接过去)——注意大小写别写错了,以及不能有空格。
<a href="mission.html#chai" title="our Mission">Read about our Mission.</a>
如果你想指向相同文档中的某个目标则是这样写(这也是某些长页面中底部“返回最顶端”功能的实现方法,只需要在顶部的元素上加一个"top"id属性):
<a href="#top" title=“top”>Back to top.</a>
以下是一个错误的使用格式(虽然也能成功,但是这种成功是看浏览器的——一些可行,一些不行):
<a href="http://wickedlysmart.com/buzz#Coffee" title="Caffeine Buzz">Caffeine Buzz</a>
#符号表示的是在该符号前面的文档中找到该符号后面的id,这里变成了找buzz文件夹中一个id为Coffe的元素了。正确的格式有两种(第一种也对是因为“/”后面没有东西时默认指向默认文件index.html):
<a href="http://wickedlysmart.com/buzz/#Coffee" title="Caffeine Buzz">Caffeine Buzz</a>
<a href="http://wickedlysmart.com/buzz/index.html#Coffee" title="Caffeine Buzz">Caffeine Buzz</a>
7.doctype定义
<!doctype html>
此特殊的定义必须放在文档开头。
这里的“html”不再代表某个版本号,而是代表“最新的标准的HTML”,换句话说,以后出了HTML6,只要这个规则不变,则到时这样写,浏览器就会认为你在使用HTML6而不是HTML5.换句话说,HTML5开始,HTML标准将变成一个“活的标准”,这意味着她会根据需要继续发展和变化,不过不会再有固定的版本号————这也意味着,W3C在频繁地修改验证工具(见HTML项目实践中学到的东西的第一点),所以验证时看到的错误信息可能不完全一样。
8.<meta>
<meta charset="utf-8">
1.charset是必须属性。其告诉浏览器web页面使用的字符编码是什么。
2.这是一个包含在<head>中的标签,用于指定字符编码。字符编码为我们提供了一种方法,可以在计算机上表示某种语言中的所有字母、数字和其她符号。
关于其的一个讨论见(1)《Head First HTML与CSS》学习笔记---HTML基本概念的“HTML的基础概念”的5.
9.<link>
<link type="text/css" rel="stylesheet" href="lounge.css">
1.type是可选属性,和<style>一样的历史原因。
2.rel是必须属性。其指定了HTML文件与所链接文件之间的关系。在这里“stylesheet”的意思是我们要链接到一个样式表。
3.href是必须属性。其指向样式表所在的位置——这就引出一个疑问:
为什么有些用href,有些用src呢?按照本文3中的第一点的讨论,用src不是更好(<style src>,风格会被外部的一个css文件替换,所以用src)?为什么又另搞一个<link href>指向一个外部链接这种形式?这是一个坑,涉及到一些知识点现在还不懂,先留着几篇文章,以后再回来解决:
Difference between SRC and HREF
为什么加载 JavaScript 使用 "src",CSS 使用 "href"?有其含义还是历史语法遗留?
DOM, DOCUMENT, BOM, WINDOW 有什么区别?
4.media是可选属性。其允许你指定应用这个样式表的设备类型。具体的用法先放着。
10.class属性的使用
<p class="greentea">
<img src="../images/green.jpg" alt="Green Tea Cooler" width="47" height="100">
Chock full of vitamins and minerals, this elixir
combines the healthful benefits of green tea with
a twist of chamomile blossoms and ginger root.
</p>
class=类,用于说明某个元素属于一个类或者多个类。
class名必须以字母开头,可以有数字和“_”,但不能有空格。
多个类就这样写:
<p class="one two three">
<img src="../images/green.jpg" alt="Green Tea Cooler" width="47" height="100">
Chock full of vitamins and minerals, this elixir
combines the healthful benefits of green tea with
a twist of chamomile blossoms and ginger root.
</p>
1.对<p>元素的"greentea"类添加样式(首先必须是这个元素,然后是元素属于这个类):
p.greentea{
color: green;
}
2.对"greentea"类添加样式(不管是什么元素,只要属于这个类):
.greentea{
color: green;
}
3.如果一个元素属于多个类,所有这些类都定义了相同属性,我怎么知道最终会应用哪个?
11.<del>和<ins>
<p>a dozen is <del>20</del> 12 pieces</p>
<del>能把HTML中的某些内容标记为要删除的内容,其显示的效果是文字中间有删除线。
<p>a dozen is <ins>20</ins> 12 pieces</p>
<ins>会标记要插入的内容,其显示的效果是文字有下划线。