HTML基础(一)
1.HTML三部分:<html></html> <title></title> <body></body>
例子:
<html> <title> This the first HTML page </title> <body> This the HTML web page! </body> </html>
运行结果:
2.标题
格式:<hn 属性>文字添加部分</hn> 其中 n=1~6
例子:
<html> <title> This the first HTML page </title> <body> This the HTML web page! <h1 align = "center">This the HTML web page!</h1> <h2 align = "center">This the HTML web page!</h2> <h3 align = "center">This the HTML web page!</h3> <h4 align = "center">This the HTML web page!</h4> <h5 align = "center">This the HTML web page!</h5> <h6 align = "center">This the HTML web page!</h6> This the HTML web page! </body> </html>
运行结果:
3.段落、换行、空格
<p> 段落标记
<br> 换行标记
空格标记
例子:
<html> <title> This the first HTML page </title> <body> <h3 align = "center">Paragraph</h3> <p>Paragraph1</p> <p>Paragraph2</p> <p>Paragraph3</p> <h3 align = "center">Newline</h3> Newline1 <br> Newline2 <br> Newline3 <br> <h3 align = "center">Blank</h3> Blank1 Blank2 Blank3 </body> </html>
运行结果:
4.标签中的属性和区域控制标签
格式: <标签名 属性1 = "属性值" 属性值2 = "属性值" ...... 属性值n = "属性值">内容</标签名>
<div align = "center/left/right">文本</div> 区域控制标签
例子:
<html> <title> This the first HTML page </title> <body> <div align = "center">HTML</div> <div align = "left">HTML</div> <div align = "right">HTML</div> </body> </html>
运行结果:
5.在网页中加入水平线
格式: <hr align = "" size = "" width = "" color = "" [noshade]>
noshade 是否显示阴影
例子:
<html> <title> This the first HTML page </title> <body> <hr align = "center" size = "10" width = "100" color = "#000000"> <hr align = "center" size = "10" width = "100" color = "#000000" noshade> </body> </html>
运行结果:
6.显示预排格式标签
格式:<pre>文字内容</pre>
例子:
<html> <title> This the first HTML page </title> <body> <h3> This the HTML web page!</h3> This the first sentense! This the second sentense! This the third sentense! This the fifth sentense! <pre> <h3> This the HTML web page!</h3> This the first sentense! This the second sentense! This the third sentense! This the fourth sentense! </pre> </body> </html>
运行结果:
7.文字标签font
格式:<font size = "" color = "" face = "">文字</font>
例子:
<html> <title> This the first HTML page </title> <body> <div align = "center"> <font color = "#0066cc" size = "+2" face = "华文行楷">This the HTML web page!</font><br> <font color = "#0066cc" size = "+2" face = "华文行楷"><b>This the HTML web page!</b></font><br> <font color = "#0066cc" size = "+2" face = "华文行楷"><i>This the HTML web page!</i></font><br> <font color = "#0066cc" size = "+2" face = "华文行楷"><u>This the HTML web page!</u></font><br> <font color = "#0066cc" size = "+2" face = "华文行楷">2<sup>3</sup></font><br> <!-- sup 上标--> <font color = "#0066cc" size = "+2" face = "华文行楷">2<sub>3</sub></font><br> <!-- sub 下标-->
<font color = "#0066cc" size = "+2" face = "华文行楷">This the <font color = "#000000">HTML</font> web page!</font><br> </div> </body> </html> <!-- 同类标签的就近原则 -->
运行结果:
8.超级链接
格式:<a href = "路径" name = "热点名" target = "打开方式">链接元素</a>
例子:
<html> <title> This the first HTML page </title> <body> <div align = "center"> <a href = "http://www.baidu.com" name = "baidu" target = _blank>百度</a> </div> </body> </html>
运行结果:
9.链接
格式: <a href = "#标记号">热点文本</a>
<a name = "标记号">显示的热点文本</a>
例子:
<html> <title> This the first HTML page </title> <body> <a href = "#001">热点文字</a> <p>HTML</p> <p>HTML</p> <p>HTML</p> <p>HTML</p> <p>HTML</p> <p>HTML</p> <p>HTML</p> <p>HTML</p> <p>HTML</p> <p>HTML</p> <p>HTML</p> <p>HTML</p> <p>HTML</p> <p>HTML</p> <p>HTML</p> <p>HTML</p> <p>HTML</p> <p>HTML</p> <p>HTML</p> <p>HTML</p> <p>HTML</p> <p>HTML</p> <p>HTML</p> <p>HTML</p> <p>HTML</p> <p>HTML</p> <p>HTML</p> <p>HTML</p> <a name = "001">跳到这里</a> <p>HTML</p> <p>HTML</p> <p>HTML</p> <p>HTML</p> <p>HTML</p> <p>HTML</p> <p>HTML</p> <p>HTML</p> <p>HTML</p> <p>HTML</p> <p>HTML</p> <p>HTML</p> <p>HTML</p> <p>HTML</p> <p>HTML</p> <p>HTML</p> <p>HTML</p> <p>HTML</p> <p>HTML</p> <p>HTML</p> <p>HTML</p> <p>HTML</p> <p>HTML</p> <p>HTML</p> <p>HTML</p> <p>HTML</p> <p>HTML</p> </body> </html>
运行结果:
10.链接标签综合应用:应用到别的页面的热点
格式: <a href = "路径#标记号">热点文本</a>
例子:
<html> <title> This the first HTML page </title> <body> <a href = "SevenPage.html#001">链接到SevenPage.html的一个热点区域</a> </body> </html>
运行结果:
单击链接结果:
相关文章:
(1)HTML基础(一)
(2)HTML基础(二)