首页 > 代码库 > HTML的入门概念

HTML的入门概念

超文本<a>

  1. 文本或图像都可以用作链接的标签。
  2. 使用“..”可以连接到源文件的上层文件夹。“..”表示“父文件夹”。 

<a  href="http://www.mamicode.com/目标网址#锚点" name="页面锚点名称" title="鼠标滑过显示的文本">链接显示的文本</a>

<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>

属性

描述

download

filename

规定被下载的超链接目标。

href

URL

规定链接指向的页面的 URL。

hreflang

language_code

规定被链接文档的语言。

media

media_query

规定被链接文档是为何种媒介/设备优化的。

name

section_name

HTML5 中不支持。规定锚的名称。

rel

text

规定当前文档与被链接文档之间的关系。

target

  • _blank
  • _parent
  • _self
  • _top
  • framename

规定在何处打开链接文档。

type

MIME type

规定被链接文档的的 MIME 类型。

 

 

 字符实体

实体名称对大小写敏感!

 

显示结果

描述

实体名称

实体编号

 

空格

&nbsp;

&#160;

小于号

&lt;

&#60;

大于号

&gt;

&#62;

&

和号

&amp;

&#38;

"

引号

&quot;

&#34;

撇号 

&apos; (IE不支持)

&#39;

分(cent)

&cent;

&#162;

镑(pound)

&pound;

&#163;

元(yen)

&yen;

&#165;

欧元(euro)

&euro;

&#8364;

§

小节

&sect;

&#167;

?

版权(copyright)

&copy;

&#169;

?

注册商标

&reg;

&#174;

?

商标

&trade;

&#8482;

×

乘号

&times;

&#215;

÷

除号

&divide;

&#247;

图像<img>

alt是<img>的必要属性。

Jpeg适合保存复杂图像

Png 比gif更好得控制透明

Gif 只允许一种透明颜色

表格

表格

描述

<table>

定义表格

<caption>

定义表格标题。

<th>

定义表格的表头。

<tr>

定义表格的行。

<td>

定义表格单元。

<thead>

定义表格的页眉。

<tbody>

定义表格的主体。

<tfoot>

定义表格的页脚。

<col>

定义用于表格列的属性。

<colgroup>

定义表格列的组。

空的单元格的边框没有被显示出来。为了避免这种情况,在空单元格中添加一个空格占位符,就可以将边框显示出来。

列表

无序列表<ul>

有序列表<ol>

列表定义<dl>

<dl>

<dt>Coffee</dt>

<dd>Black hot drink</dd>

<dt>Milk</dt>

<dd>White cold drink</dd>

</dl>

 

HTML5布局元素

header

定义文档或节的页眉

nav

定义导航链接的容器

main

定义文档的主内容

section

定义文档中的节

article

定义独立的自包含文章

aside

定义内容之外的内容(比如侧栏)

footer

定义文档或节的页脚

details

定义额外的细节

summary

定义 details 元素的标题

time

定义日期/时间

 

HTML 媒体

HTML5 <audio> 元素会尝试以 mp3 或 ogg 来播放音频。如果失败,代码将回退尝试 <embed> 元素。

<audio controls="controls" height="100" width="100">

  <source src="http://www.mamicode.com/song.mp3" type="audio/mp3" />

  <source src="http://www.mamicode.com/song.ogg" type="audio/ogg" />

<embed height="100" width="100" src="http://www.mamicode.com/song.mp3" />

</audio>

HTML 5 + <object> + <embed>

HTML 5 <video> 元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。如果均失败,则回退到 <embed> 元素。

<video width="320" height="240" controls="controls">

  <source src="http://www.mamicode.com/movie.mp4" type="video/mp4" />

  <source src="http://www.mamicode.com/movie.ogg" type="video/ogg" />

  <source src="http://www.mamicode.com/movie.webm" type="video/webm" />

  <object data="http://www.mamicode.com/movie.mp4" width="320" height="240">

    <embed src="http://www.mamicode.com/movie.swf" width="320" height="240" />

  </object>

</video>

HTML的入门概念