html基础学习（一）

March 15th, 2016 original post at hetaodie.github.io

html 常用属性

  • <html> 与 </html> 之间的文本描述网页
  • <body> 与 </body> 之间的文本是可见的页面内容
  • <h1> 与 </h1> 之间的文本被显示为标题
  • <p> 与 </p> 之间的文本被显示为段落
  • HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
  • HTML 段落是通过 <p> 标签进行定义的。
  • HTML 链接是通过 <a> 标签进行定义的。
  • <hr /> 标签在 HTML 页面中创建水平线。hr 元素可用于分隔内容。
  • HTML 注释 <!-- This is a comment -->
  • 如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签：
  • 文本格式化标签

标签 描述 <b> 定义粗体文本。 <big> 定义大号字。 <em> 定义着重文字。 <i> 定义斜体字。 <small> 定义小号字。 <strong> 定义加重语气。 <sub> 定义下标字。 <sup> 定义上标字。 <ins> 定义插入字。 <del> 定义删除字。 <s> 不赞成使用。使用 <del> 代替。 <strike> 不赞成使用。使用 <del> 代替。 <u> 不赞成使用。使用样式（style）代替。 <blockquote> 长引用

例如：

<a href="http://www.w3school.com.cn">This is a link</a>

注释：在 href 属性中指定链接的地址。

  • HTML 图像是通过 标签进行定义的。
<img src="w3school.jpg" width="104" height="142" />

注释：图像的名称和尺寸是以属性的形式提供的。

HTML 元素语法

  • HTML 元素以开始标签起始
  • HTML 元素以结束标签终止
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有空内容（empty content）
  • 空元素在开始标签中进行关闭（以开始标签的结束而结束）
  • 大多数 HTML 元素可拥有属性

HTML 属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。 属性总是以名称/值对的形式出现，比如：name=”value”。 属性总是在 HTML 元素的开始标签中规定.

属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，

属性	           值	          描述
class         classname	   规定元素的类名（classname）
id	              id	      规定元素的唯一 id
style	   style_definition	规定元素的行内样式（inline style）
title	        text	规定元素的额外信息（可在工具提示中显示）

如何使用样式

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：

外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 

<head>

<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
<style>	定义样式定义。
<link>	定义资源引用。
<div>	定义文档中的节或区域（块级）。
<span>	定义文档中的行内的小块或区域。
<font>	规定文本的字体、字体尺寸、字体颜色。不赞成使用。请使用样式。
<basefont>	定义基准字体。不赞成使用。请使用样式。
<center>	对文本进行水平居中。不赞成使用。请使用样式。

target 属性

使用 Target 属性，你可以定义被链接的文档在何处显示

下面的这行会在新窗口打开文档：

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

name 属性

name 属性规定锚（anchor）的名称。 您可以使用 name 属性创建 HTML 页面中的书签。 书签不会以任何特殊方式显示，它对读者是不可见的。 当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

实例

首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：
<a name="tips">基本的注意事项 - 有用的提示</a>
然后，我们在同一个文档中创建指向该锚的链接：
<a href="#tips">有用的提示</a>
您也可以在其他页面中创建指向该锚的链接：
<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>
在上面的代码中，我们将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名

img 属性

在 HTML 中，图像由 标签定义。 是空标签，意思是说，它只包含属性，并且没有闭合标签。 要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。 定义图像的语法是：

<img src="url" />

浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。

alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。

<img src="boat.gif" alt="Big Boat">

在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

例：

  1. 添加背景图片
<body background="/i/eg_background.jpg">

<h3>图像背景</h3>

<p>gif 和 jpg 文件均可用作 HTML 背景。</p>

<p>如果图像小于页面，图像会进行重复。</p>

</body>
  1. 图片对齐方式
<html>

<body>

<h2>未设置对齐方式的图像：</h2>

<p>图像 <img src ="/i/eg_cute.gif"> 在文本中</p>

<h2>已设置对齐方式的图像：</h2>

<p>图像dd <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p>

<p>图像 <img src ="/i/eg_cute.gif" align="middle"> 在文本中</p>

<p>图像 <img src ="/i/eg_cute.gif" align="top"> 在文本中</p>

<p>请注意，bottom 对齐方式是默认的对齐方式。</p>

</body>
</html>
  1. 调整图片的尺寸
<html>

<body>

<img src="/i/eg_mouse.jpg" width="50" height="50">

<br />

<img src="/i/eg_mouse.jpg" width="100" height="100">

<br />

<img src="/i/eg_mouse.jpg" width="200" height="200">

<p>通过改变 img 标签的 "height" 和 "width" 属性的值，您可以放大或缩小图像。</p>

</body>
</html>
  1. 定义图像地图中的可点击区域。

<html>
<body>

<p>请点击图像上的星球，把它们放大。</p>

<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>

<p><b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p>

</body>
</html>

表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

例如：

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

边框属性

使用border边框属性来显示一个带有边框的表格：

例如：

<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

表格的表头

表格的表头使用 <th> 标签进行定义。 大多数浏览器会把表头显示为粗体居中的文本：

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

表格中的空单元格

在空单元格中添加一个空格占位符，就可以将边框显示出来

例如：

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>row 2, cell 2</td>
</tr>
</table>

设置跨两行的单元格

<tr>
  <th rowspan="2">电话</th>
  <td>555 77 854</td>
</tr>

单元格的边距

cellpadding用来设置单元格的边距

<table border="1" 
cellpadding="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

单元格间距

cellspacing用来设置单元格间距

<table border="1" 
cellspacing="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

向单元格中添加背景颜色和背景图片

<h4>背景颜色：</h4>
<table border="1" 
bgcolor="red">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>背景图像：</h4>
<table border="1" 
background="/i/eg_bg_07.gif">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

向表格单元添加颜色或是背景色

<h4>单元背景：</h4>  
<table border="1">
<tr>
  <td bgcolor="red">First</td>
  <td>Row</td>
</tr>   
<tr>
  <td 
  background="/i/eg_bg_07.gif">
  Second</td>
  <td>Row</td>
</tr>
</table>

表格标签

表格	描述
<table>	定义表格
<caption>	定义表格标题。
<th>	定义表格的表头。
<tr>	定义表格的行。
<td>	定义表格单元。
<thead>	定义表格的页眉。
<tbody>	定义表格的主体。
<tfoot>	定义表格的页脚。
<col>	定义用于表格列的属性。
<colgroup>	定义表格列的组。

列表

无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。 无序列表始于 <ul> 标签。每个列表项始于 <li>。

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

type 设置列表前面的项目符号

<h4>Disc 项目符号列表：</h4>
<ul type="disc">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>  

<h4>Circle 项目符号列表：</h4>
<ul type="circle">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>  

<h4>Square 项目符号列表：</h4>
<ul type="square">
 <li>苹果</li>
 <li>香蕉</li>
 <li>柠檬</li>
 <li>桔子</li>
</ul>

表单

表单是一个包含表单元素的区域。 表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。 表单使用表单标签（<form>）定义。

<form>
...
  input 元素
...
</form>

输入

多数情况下被用到的表单标签是输入标签（）。输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下： 文本域（Text Fields） 当用户要在表单中键入字母、数字等内容时，就会用到文本域。

<form>
First name: 
<input type="text" name="firstname" />
<br />
Last name: 
<input type="text" name="lastname" />
</form>

注意，表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是20个字符。

单选按钮（Radio Buttons）

当用户从若干给定的的选择中选取其一时，就会用到单选框。

<form>
<input type="radio" name="sex" value="male" /> Male
<br />
<input type="radio" name="sex" value="female" /> Female
</form>

复选框（Checkboxes）

当用户需要从若干给定的选择中选取一个或若干选项时，就会用到复选框。

<form>
<input type="checkbox" name="bike" />
I have a bike
<br />
<input type="checkbox" name="car" />
I have a car
</form>

表单的动作属性（Action）和确认按钮

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

<form name="input" action="html_form_action.asp" method="get">
Username: 
<input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 “html_form_action.asp” 的页面。该页面将显示出输入的结果。

下拉列表的实现

<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

创建按钮

<form>
<input type="button" value="Hello world!">
</form>

带标题的框

<form>
  <fieldset>
    <legend>健康信息</legend>
    身高：<input type="text" />
    体重：<input type="text" />
  </fieldset>
</form>

框架结构标签（）

  • 框架结构标签（）定义如何将窗口分割为框架
  • 每个 frameset 定义了一系列行或列
  • rows/columns 的值规定了每行或每列占据屏幕的面积 编者注：frameset 标签也被某些文章和书籍译为框架集。

Frame 标签定义了放置在每个框架中的 HTML 文档。 在下面的这个例子中，我们设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。HTML 文档 “frame_a.htm” 被置于第一个列中，而 HTML 文档 “frame_b.htm” 被置于第二个列中：

<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>

假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 <frame> 标签中加入：noresize="noresize"。 为不支持框架的浏览器添加 标签。 重要提示：不能将 `&lt;body&gt;&lt;/body&gt;` 标签与 `<frameset></frameset>` 标签同时使用！不过，假如你添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 `&lt;body&gt;&lt;/body&gt; `标签内。（在下面的第一个实例中，可以查看它是如何实现的。）

iframe 用于在网页内显示网页。

添加 iframe 的语法

<iframe src="URL"></iframe>

height 和 width 属性用于规定 iframe 的高度和宽度。 属性值的默认单位是像素，但也可以用百分比来设定（比如 “80%”）。

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

iframe 可用作链接的目标（target）。 链接的 target 属性必须引用 iframe 的 name 属性：

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>

body 背景

拥有两个配置背景的标签。背景可以是颜色或者图像。 背景颜色（Bgcolor） 背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。 
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。 
<body background="clouds.gif">
<body background="http://www.w3school.com.cn/clouds.gif">
URL可以是相对地址，如第一行代码。也可以使绝对地址，如第二行代码。 - 提示：如果你打算使用背景图片，你需要紧记一下几点： - 背景图像是否增加了页面的加载时间。小贴士：图像文件不应超过 10k。 - 背景图像是否与页面中的其他图象搭配良好。 - 背景图像是否与页面中的文字颜色搭配良好。 - 图像在页面中平铺后，看上去还可以吗？ - 对文字的注意力被背景图像喧宾夺主了吗？

如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！

hetaodie

Mobile development

简单，深入的研究移动客户端开发技术"