您的位置：首页 > Web前端 > HTML

HTML基础知识自结

2016-11-09 12:32 190 查看

1.HTML 链接

通过 <a> 标签进行定义。

实例:

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

注：url要写全，要加上协议。

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

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

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

HTML链接 - name 属性

name 属性规定锚（anchor）的名称。

命名锚的语法：

<a name="label">锚（显示在页面上的文本）</a>

实例

首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：

<a name="tips">基本的注意事项 - 有用的提示</a>

然后，我们在同一个文档中创建指向该锚的链接：

<a href="#tips">有用的提示</a>

提示：命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚，然后把链接到这些锚的链接放到文档的上部。如果您经常访问百度百科，您会发现其中几乎每个词条都采用这样的导航方式。

2.HTML 元素

指的是从开始标签（starttag）到结束标签（end tag）的所有代码。

元素的内容是开始标签与结束标签之间的内容

某些 HTML 元素具有空内容（emptycontent）

<body>元素定义了 HTML 文档的主体。

<html>元素定义了整个 HTML 文档。

style属性： 规定元素的行内样式（inlinestyle）

<hr/> 标签在 HTML 页面中创建水平分割线。（horizontalrule）

3.空的 HTML 元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

<br> 就是没有关闭标签的空元素。

在开始标签中添加斜杠，比如<br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。

在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。

4.始终为属性值加引号

属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。

在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：

name='Bill "HelloWorld" Gates'

5.<pre>标签定义预格式文本

例：

<pre>

这是

预格式文本。

它保留了      空格

和换行。

</pre>

<p>pre标签很适合显示计算机代码：</p>

<pre>

for i = 1to 10

     print i

next i

</pre>

显示结果：

这是
预格式文本。
它保留了      空格
和换行。
pre 标签很适合显示计算机代码：
for i = 1 to 10
    print i
next i

6.删除字效果和插入字效果

代码：

<p>一打有 <del>二十</del> <ins>十二</ins>件。</p>

效果：

一打有二十十二件

7.外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。

例：<head>

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

</head>

8.内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。

例：<head>

<style type="text/css">

body {background-color: red}

p {margin-left: 20px}

</style>

</head>

9.内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。

例：<p style="color:red; margin-left: 20px">

This is a paragraph

</p>

10.图像标签<img>

1.为图片显示替换文本

本例演示如何为图片显示替换文本。在浏览器无法载入图像时，替换文本属性告诉读者们失去的信息。为页面上的图像都加上替换文本属性是个好习惯。

例：

<img src="/i/eg_goleft.gif" alt="向左转" />

<p>如果无法显示图像，将显示"alt" 属性中的文本：</p>

<img src="/i/eg_goleft123.gif"alt="向左转" />

如果无法显示图像，将显示 "alt" 属性中的文本：

2.排列图片：

<p>图像 <imgsrc="/i/eg_cute.gif"align="bottom"> 在文本中的位置</p>

align属性的值可以有：bottom（默认），top，middle，left，right。

3.调整图片尺寸：

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

11.HTML表格

1.表格和边框属性

如果不定义边框属性，表格将不显示边框。

<table border="1">

2.表格的表头

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

<table border="1">

<tr>

<th>Heading</th>

</tr>

<tr>

<td>row 1, cell 1</td>

</tr>

</table>

3.表格的标题

标题由<caption>标签进行定义。

例：

<table border="6">

<caption>我的标题</caption>

<tr>

   <td>100</td>

   <td>200</td>

   <td>300</td>

   <td>400</td>

</tr>

</table>

结果：

4.跨行或跨列的单元格

例：

<h4>横跨两列的单元格：</h4>

<table border="1">

<tr>

<th>姓名</th>

<th colspan="2">电话</th>

</tr>

<tr>

<td>Bill Gates</td>

<td>555 77 854</td>

<td>555 77 855</td>

</tr>

</table>

<h4>横跨两行的单元格：</h4>

<table border="1">

<tr>

<th>姓名</th>

<td>Bill Gates</td>

</tr>

<tr>

<th rowspan="2">电话</th>

<td>555 77 854</td>

</tr>

<tr>

<td>555 77 855</td>

</tr>

</table>

结果：

5.<td>标签内可以嵌套多个其他的标签，如<p>等。还可以嵌入另一个表格。

6.<table>标签的cellspacing和cellpadding属性分别定义单元格之间的距离和单元格内容与其边框的空白。

7.可以通过设置<table>、<td>的属性：bgcolor和background，分别定义背景色和背景图片。

8.通过设置<td>标签里的align属性来排列单元格的内容。

9.通过设置<table>标签的frame属性来控制围绕表格的边框，frame的值可以为：box、above、below、hsides、vsides

12.HTML列表

<ol>定义有序列表，<ul>定义无序列表。

例：

<html>

<body>

<h4>一个无序列表：</h4>

<ul>

<li>咖啡</li>

<li>茶</li>

<li>牛奶</li>

</ul>

</body>

</html>

结果：

一个无序列表：

咖啡
茶
牛奶

<ol>标签里可以通过设置type属性（例如A、a、I、i等，默认为阿拉伯数字）来定义列表编号的类型。

<ol>标签里可以通过设置start属性来定义列表起始的编号大小。

<ul>标签里可以通过设置type属性（例如disc、circle、square等）来定义列表的符号。

列表里还可以嵌套列表。

<dl>标签定义自定义列表，一般和<dt><dd>标签一起使用。

<dl> 标签定义了定义列表（definitionlist）。

<dl> 标签用于结合 <dt> （定义列表中的项目,definitiontitle）和 <dd> （描述列表中的项目,definitiondescription）。

例:

<dl>

<dt>计算机</dt>

<dd>用来计算的仪器 ... ...</dd>

<dt>显示器</dt>

<dd>以视觉方式显示信息的装置 ... ...</dd>

</dl>

显示结果：

13.HTML 块元素与内联元素

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

例子：<h1>, <p>, <ul>, <table>

内联元素在显示时通常不会以新行开始。

例子：<b>, <td>, <a>, <img>

<span>标签是内联元素，可用作文本的容器。

14.表单：<form> 和输入：<input>

例：

<form>

用户：

<input type="text"name="user">

<br />

密码：

<input type="password"name="password">

</form>

结果：

用户：

密码：

Input的type还可以是radio（单选按钮）、checkbox（复选框）、button（按钮）、submit（提交）等。

下拉列表：

例：

<form>

<select name="cars">

<optionvalue="volvo">Volvo</option>

<optionvalue="saab">Saab</option>

<option value="fiat">Fiat</option>

<optionvalue="audi">Audi</option>

</select>

</form>

结果：

表单的动作属性action和确认按钮：

当用户单击确认按钮时，表单的内容会被传送到另一个文件。

例：

<form action="form_action.asp" method="get">

<p>name: <inputtype="text" name="name" /></p>

<p>age: <inputtype="text" name="age" /></p>

<input type="submit" value="提交" />

</form>

结果：

15.<iframe>内联框架标签

iframe用于在网页内显示网页（子窗口）。

例：

使用iframe作为链接的目标（target）。

链接的 target 属性必须引用 iframe 的 name 属性：

<body>

<iframesrc="/example/html/demo_iframe.html" name="iframe_a"></iframe>

<p><ahref="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>

</body>

结果：

点击链接前：

（框架中的文字是在demo_iframe.html中指定的）

点击链接后：

16.<body>标签的背景颜色bgcolor属性和背景background属性

背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。

如：<body bgcolor="#000000"> <body bgcolor="rgb(0,0,0)"> <body bgcolor="black">

背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。

如：<body background="clouds.gif">

<bodybackground="http://www.w3school.com.cn/clouds.gif">

URL可以是相对地址，如第一行代码。也可以使绝对地址，如第二行代码。

17.HTML <base>标签

<base>标签为页面上的所有链接规定默认地址或默认目标（target）。

<head>

<basehref="http://www.w3school.com.cn/images/" />

<basetarget="_blank" />

</head>

18.HTML <meta>标签

元数据（metadata）是关于数据的信息。

<meta>标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。

典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

<meta>标签始终位于 head 元素中。

19.HTML <script>
标签

20.HTML <object>
标签

21.XHTML

XHTML 是以 XML 格式编写的 HTML，是更严格更纯净的 HTML 版本

1.为什么使用 XHTML？

答：因特网上的很多页面包含了“糟糕”（不规范）的 HTML。

XML 是一种必须正确标记且格式良好的标记语言。

文档结构

XHTML DOCTYPE 是强制性的
<html> 中的 XML namespace 属性（xmlns）是强制性的
<html>、<head>、<title> 以及 <body> 也是强制性的
标签语法

XHTML 标签必须正确嵌套
XHTML 标签必须始终关闭
XHTML 标签必须小写
属性语法

XHTML 属性必须使用小写
XHTML 属性值必须用引号包围

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航