【前端学习】HTML基础知识

W3School HTML基础知识重点梳理

 

一、元素和属性

1. 空元素

关于没有关闭标签的空元素，如<br>, <hr>，最好的方法是在开始标签中添加斜杠<br />

2. 属性引号问题

属性值可以用单引号或双引号，但是如果属性值本身有双引号，那么必须要用单引号

3. 注释： <!-- coments -->

4. <p>和<br>

浏览器在<p>前后会自动插入空行，<p>是块级元素。<br>换行，前后不加空。

 

二、格式化

1. <pre>保留内部原格式

<pre> 保留内部原格式  </pre>，适合显示计算机代码等

 

2. 引用

• <blockquote> </blockquote>是长引用，浏览器会缩进，插入换行和外边距。<q> </q>是短引用，浏览器会加引号。
• 缩写：<abbr title="etcetera">etc.</abbr>，<acronym title="World Wide Web">WWW</acronym>。仅对于 IE 5 中的 acronym 元素有效。对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。
• 定义：<dfn title="World Wide Web">WWW</dfn>；如果<dfn>和<abbr>一起用，把<abbr>放在<dfn>里，title属性在<abbr>里设定
• 地址：<address> ... </address>，会以斜体显示
• <cite>title</cite>：定义著作标题，通常显示为斜体
• 文字方向：<bdo dir="rtl">Here is some Hebrew text</bdo> 如果浏览器支持 bi-directional override (bdo)，会从右向左显示文字

 

3. 计算机输出标签

• <kbd>：键盘输入
• <samp>: 计算机输出
• <code>：代码；不保留多余的空格和换行，如果想保留，可以在<pre>内嵌套<code>
• <var>：定义数学变量

 

4. 插入和删除效果

• <del>删除</del>
• <ins>插入</ins>

大多数浏览器会改写为删除文本和下划线文本。一些老式的浏览器会把删除文本和下划线文本显示为普通文本。

 

三、链接

1. 用 id 属性创建内部链接——可用来创建目录

<a id="section1">section 1</a>（或者直接在具体元素里设置也可，如<h1 id="section1">）

同一个文档中实现跳转：<a href="#section1">点此跳转到section 1</a>

或者在其他文档中创建跳转：<a href="www.makeup.com/html/something#section1">跳转</a>

注：用name也可以，但是HTML5不支持name，只支持id！

 

2. 注意要在url末尾添加/

假如这样书写链接：href="http://www.w3school.com.cn/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="http://www.w3school.com.cn/html/"

 

3. target 属性

target="view_window"  =>  浏览器打开一个新窗口展示内容，如果用户继续点开下一个链接，并且"view-window"窗口没有被关闭的话，会在这个窗口里显示新内容，取代旧内容。

target="view_frame"  =>  一般是在<frameset>里使用

【例如】

<frameset cols="100,*">
  <frame src="toc.html">
  <frame src="pref.html" name="view_frame">
</frameset>

<ul>  
  <li><a href="pref.html" target="view_frame">Preface</a></li>
  <li><a href="chap1.html" target="view_frame">Chapter 1</a></li>
  <li><a href="chap2.html" target="view_frame">Chapter 2</a></li>
</ul>

这里会显示左右两个框架，左边是目录（toc.html），右边是内容。点击一个个链接时，左边不变，内容只刷新在右边的框架里。

target="_top"  =>  载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

target="_parent"  =>  文档载入父窗口或者包含来超链接引用的框架的框架集。

 

4. 电子邮件链接

例1：<a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a> （用 %20 来替换文本中的空格）

例2：<a href="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">发送邮件！</a>

 

四、图像

1. 排列图像

<img>中的align属性控制，value可以为bottom (default), top, middle, left, right

2. 创建图像映射

使用<img>中的usemap属性，配合<map>和<area>标签

（1）<map>

<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性

（2）<area>

area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。

area元素有shape, coords, href等属性。

【例子】

<img
src="/i/eg_planets.jpg"
border="0" usemap="#planetmap"
alt="Planets" />

<map name="planetmap" id="planetmap">

<area
shape="circle"
coords="180,139,14"
href ="/example/html/venus.html"
target ="_blank"
alt="Venus" />

<area
shape="circle"
coords="129,161,10"
href ="/example/html/mercur.html"
target ="_blank"
alt="Mercury" />

<area
shape="rect"
coords="0,0,110,260"
href ="/example/html/sun.html"
target ="_blank"
alt="Sun" />

</map>

 3. 把图像转换为图像映射

<a href="/example/html/form_action.asp">
<img src="/i/eg_tulip.jpg" ismap />
</a>

ismap 属性将图像定义为服务器端图像映射。当用户在 ismap 图像上单击了某处时，浏览器会自动把鼠标的 x、y 位置（相对于图像的左上角）发送到服务器端。特殊的服务器端软件（在本例中是 demo_form.asp 程序）可以根据这些坐标来做出响应。

注释：只有当 <img> 元素属于带有有效 href 属性的 <a> 元素的后代时，才允许 ismap 属性。

 

五、表格