zoukankan      html  css  js  c++  java

  • 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>　　  换行标记

    &nbsp;　　空格标记

    例子：

    <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
&nbsp;

Blank2
&nbsp;

Blank3
&nbsp;

</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基础（二）
  • 相关阅读:
    HDU- 1075 What Are You Talking About （Trie or map)
    HDU-1251 统计难题 (Trie)
    Trie树模板（插入和查询）
    HDU 5120 Intersection
    HDU 5025 Saving Tang Monk(状压bfs)
    Light OJ 1094 (树的直径)
    zzuli 1877 蛤玮打扫教室
    HDU 5642 King's Order(数位dp)
    POJ 2689 Prime Distance
    hdu 3853 LOOPS(概率dp)
  • 原文地址：https://www.cnblogs.com/danshui/p/2879085.html
Copyright © 2011-2022 走看看