HTML基础知识

来源：互联网发布：阿里云学生认证条件编辑：程序博客网时间：2024/05/18 15:07

HTML基础知识总结

标签：网页制作

HTML 链接

HTML 链接是通过<a>标签进行定义的。
实例:

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

没有下划线的链接：<a href="/example/html/lastpage.html" style="text-decoration:none">这是一个链接！</a>

用图像做链接

<a href="/example/html/lastpage.html"><img border="0" src="/i/eg_buttonnext.gif" /></a>

target="_blank"使得链接在新窗口中打开

跳转到文档的其余部分

<html><body><p><a href="#C4">查看 Chapter 4。</a></p><h2>Chapter 1</h2><p>This chapter explains ba bla bla</p><h2>Chapter 2</h2><p>This chapter explains ba bla bla</p><h2>Chapter 3</h2><p>This chapter explains ba bla bla</p><h2><a name="C4">Chapter 4</a></h2><p>This chapter explains ba bla bla</p><h2>Chapter 5</h2><p>This chapter explains ba bla bla</p><h2>Chapter 6</h2><p>This chapter explains ba bla bla</p><h2>Chapter 7</h2><p>This chapter explains ba bla bla</p><h2>Chapter 8</h2><p>This chapter explains ba bla bla</p><h2>Chapter 9</h2><p>This chapter explains ba bla bla</p><h2>Chapter 10</h2><p>This chapter explains ba bla bla</p><h2>Chapter 11</h2><p>This chapter explains ba bla bla</p><h2>Chapter 12</h2><p>This chapter explains ba bla bla</p><h2>Chapter 13</h2><p>This chapter explains ba bla bla</p><h2>Chapter 14</h2><p>This chapter explains ba bla bla</p><h2>Chapter 15</h2><p>This chapter explains ba bla bla</p>

HTML图像

HTML 图像是通过 <img> 标签进行定义的。
实例：

<html><body><img src="/i/eg_w3school.gif" width="300" height="120" /></body></html>

替换文本：<img src="boat.gif" alt="Big Boat">
背景图片：<body background="/i/eg_background.jpg">
排列方式:
<p>图像 <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>

<html><body><p><img src ="/i/eg_cute.gif" align ="left"> 带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。</p><p><img src ="/i/eg_cute.gif" align ="right"> 带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。</p></body></html>

HTML属性

1.<h1 align="center">
2.<body bgcolor="yellow">

注意事项

1.要有结束标签：<br/>
2.使用小写标签
3.<hr /> 标签在 HTML 页面中创建水平线。
4.注释：

文本格式化

<b><strong>:前者为了加粗而加粗，后者为了标明重点而加粗
<em><i>：前者强调内容，后者无强调意味
<small><big>
<sub>subscript</sub>``<sup>superscript</sup>
<pre>保留空格和换行
<address>地址输出
显示全称:<abbr title="etcetera">etc.</abbr>、<acronym title="World Wide Web">WWW</acronym>
改变文字方向:<bdo dir="rtl">Here is some Hebrew text</bdo>
引用：长引用<blockquote>,短引用<q>
删除字和插入字（下划线）：<del>二十</del> <ins>十二</ins>

HTML表格

如果不定义边框属性，表格将不显示边框。
空单元格<td> </td>
标题（table下面）<caption>我的标题</caption>
单元格边距（格的大小）：<table border="1" cellpadding="100">
单元格间距（格与格的距离）：<table border="1" cellspacing="10">
背景颜色：<table border="1" bgcolor="red">
背景图片：<table border="1" bgcolor="red">
一个单元格：<td bgcolor="red">First</td>
格式化：<td align="left">衣服</td>

<html><body><p>每个表格由 table 标签开始。</p><p>每个表格行由 tr 标签开始。</p><p>每个表格数据由 td 标签开始。</p><h4>一列：</h4><table border="1"><tr>  <td>100</td></tr></table><h4>一行三列：</h4><table border="1"><tr>  <td>100</td>  <td>200</td>  <td>300</td></tr></table><h4>两行三列：</h4><table border="1"><tr>  <td>100</td>  <td>200</td>  <td>300</td></tr><tr>  <td>400</td>  <td>500</td>  <td>600</td></tr></table></body></html>

<html><body><h4>表头：</h4><table border="1"><tr>  <th>姓名</th>  <th>电话</th>  <th>电话</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>电话</th>  <td>555 77 854</td></tr><tr>  <th>电话</th>  <td>555 77 855</td></tr></table></body></html>

<html><body><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></body></html>

<html><body><p><b>注释：</b>frame 属性无法在 Internet Explorer 中正确地显示。</p><p>Table with frame="box":</p><table frame="box">  <tr>    <th>Month</th>    <th>Savings</th>  </tr>  <tr>    <td>January</td>    <td>$100</td>  </tr></table><p>Table with frame="above":</p><table frame="above">  <tr>    <th>Month</th>    <th>Savings</th>  </tr>  <tr>    <td>January</td>    <td>$100</td>  </tr></table><p>Table with frame="below":</p><table frame="below">  <tr>    <th>Month</th>    <th>Savings</th>  </tr>  <tr>    <td>January</td>    <td>$100</td>  </tr></table>

HTML列表

无序列表(实心点，空心点，实心正方形）

<html><body><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>  </body></html>

有序列表

<html><body><h4>数字列表：</h4><ol> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li></ol>  <h4>字母列表：</h4><ol type="A"> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li></ol>  <h4>小写字母列表：</h4><ol type="a"> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li></ol>  <h4>罗马字母列表：</h4><ol type="I"> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li></ol>  <h4>小写罗马字母列表：</h4><ol type="i"> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li></ol>  </body></html>

定义列表（自定义列表以<dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。）

<html><body><h2>一个定义列表：</h2><dl>   <dt>计算机</dt>   <dd>用来计算的仪器 ... ...</dd>   <dt>显示器</dt>   <dd>以视觉方式显示信息的装置 ... ...</dd></dl></body></html>结果：    一个定义列表：    计算机        用来计算的仪器 ... ...    显示器        以视觉方式显示信息的装置 ... ...

HTML样式

<meta http-equiv=Content-Type content=text/html;charset=gb2312>它表示强制浏览器编码设为简体中文(GB2312).这句不能写在js文件中，否则仍不起作用，浏览器编码会默认为GB18030。但是样式表语句可写在js文件中，唯独<meta>语句不可以。
<meta http-equiv="Content-Language" content="zh-cn">:服务器类型，中文
<head> <link rel="stylesheet" type="text/css" href="/html/csstest1.css" > </head>:
这是w3c的标准
rel: 属性用于定义连接的文件和HTML文档之间的关系
type: 是说明外链文档的的类型
href: 导入css文件的路径
备注:导入css文件前面两个属性不需要改就只需改 href 对应的CSS文件路径标签一般都放在头部的标签里
外部样式表，内部样式表，内联样式：<p style="color: red; margin-left: 20px">This is a paragraph</p>

<html><head><style type="text/css">h1 {color: red}p {color: blue}</style></head><body><h1>header 1</h1><p>A paragraph.</p></body></html>

div标签

<html><body><h3>This is a header</h3><p>This is a paragraph.</p><div style="color:#00FF00">//00FF00可以写成green(red,green,blue)  <h3>This is a header</h3>  <p>This is a paragraph.</p></div></body></html>

HTML布局

使用div

<!DOCTYPE html><html><head><style type="text/css">div#container{width:500px}div#header {background-color:#99bbbb;}div#menu {background-color:#ffff99;height:200px;width:150px;float:left;}div#content {background-color:#EEEEEE;height:200px;width:350px;float:left;}div#footer {background-color:#99bbbb;clear:both;text-align:center;}h1 {margin-bottom:0;}h2 {margin-bottom:0;font-size:18px;}ul {margin:0;}li {list-style:none;}</style></head><body><div id="container"><div id="header"><h1>Main Title of Web Page</h1></div><div id="menu"><h2>Menu</h2><ul><li>HTML</li><li>CSS</li><li>JavaScript</li></ul></div><div id="content">Content goes here</div><div id="footer">Copyright W3School.com.cn</div></div></body></html>

使用table

<!DOCTYPE html><html><body><table width="500" border="0"><tr><td colspan="2" style="background-color:#99bbbb;"><h1>Main Title of Web Page</h1></td></tr><tr valign="top"><td style="background-color:#ffff99;width:100px;text-align:top;"><b>Menu</b><br />HTML<br />CSS<br />JavaScript</td><td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">Content goes here</td></tr><tr><td colspan="2" style="background-color:#99bbbb;text-align:center;">Copyright W3School.com.cn</td></tr></table></body></html>

HTML表单和输入

<html><body><form>用户：<input type="text" name="user"><br />密码：<input type="password" name="password"></form><p>请注意，当您在密码域中键入字符时，浏览器将使用项目符号来代替这些字符。</p></body></html>

单元框
<input type="radio" checked="checked" name="Sex" value="male" />默认选项为male

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

复选框

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

动作属性和确认按钮

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

有预选值的下拉列表：

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

文本域（字符数不受限制）

<textarea rows="10" cols="30">The cat was playing in the garden.</textarea>

创建按钮

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

<input type="button" /> 这就是一个按钮。如果你不写javascript 的话，按下去什么也不会发生。
<input type="submit" />这样的按钮用户点击之后会自动提交 form，除非你写了javascript 阻止它。

带标题的框：

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

HTML框架

假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 <frame> 标签中加入：noresize="noresize"。
<frameset cols="120,*">:一列120，其余的为另外一列。

<html><frameset rows="50%,50%"><frame src="/example/html/frame_a.html"><frameset cols="25%,75%"><frame src="/example/html/frame_b.html"><frame src="/example/html/frame_c.html"></frameset></frameset></html>

不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！不过，假如你添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于<body></body> 标签内。

<html><frameset cols="25%,50%,25%">  <frame src="/example/html/frame_a.html">  <frame src="/example/html/frame_b.html">  <frame src="/example/html/frame_c.html"><noframes><body>您的浏览器无法处理框架！</body></noframes></frameset></html>

导航框架(导航框架包含一个将第二个框架作为目标的链接列表。名为 “contents.htm” 的文件包含三个链接。)

<html><frameset cols="120,*">  <frame src="/example/html/html_contents.html">  <frame src="/example/html/frame_a.html" name="showframe"></frameset></html>

内联框架

<html><body><iframe src="/i/eg_landscape.jpg"></iframe><p>一些老的浏览器不支持 iframe。</p><p>如果得不到支持，iframe 是不可见的。</p></body></html>

<iframe src="/example/html/demo_iframe.html" frameborder="0"></iframe>
<iframe src="/example/html/demo_iframe.html" width="200" height="200"></iframe>
使用iframe作为链接的目标

<!DOCTYPE html><html><body><iframe src="/example/html/demo_iframe.html" name="iframe_a"></iframe><p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p><p><b>注释：</b>由于链接的目标匹配 iframe 的名称，所以链接会在 iframe 中打开。</p></body></html>

HTML背景

<html><body bgcolor="#ff0000" text="yellow">//文本为黄色<p>这是段落。这是段落。这是段落。这是段落。这是段落。这是段落。这是段落。这是段落。这是段落。这是段落。</p><p>这是另一个段落。这是另一个段落。这是另一个段落。这是另一个段落。这是另一个段落。这是另一个段落。这是另一个段落。</p></body></html>

<body> 标签中的背景颜色（bgcolor）、背景（background）和文本（text）属性在最新的 HTML 标准（HTML4 和 XHTML）中已被废弃。W3C 在他们的推荐标准中已删除这些属性。
应该使用层叠样式表（CSS）来定义 HTML 元素的布局和显示属性。

1 0