Web前端设计入门示例，含源代码

最新推荐文章于 2024-08-05 16:03:37 发布

fankane1110

最新推荐文章于 2024-08-05 16:03:37 发布

阅读量5.4k

点赞数 3

文章标签： web前端 html 语言源代码

本文链接：https://blog.csdn.net/Hufan11100914/article/details/41246789

版权

一:Table

<html>
<head>
<title>菜谱</title>
</head>
<body>
<table width="100%" align="center" border=1 bordercolor=#ff0000 cellspacing=0 width=400px height=200px>
<tr align="center"><td colspan=3>星期一菜谱</td></tr>
<tr align="center"><td rowspan=2>素菜</td><td>清炒茄子</td><td>花椒扁豆</td></tr>
<tr align="center"><td>小葱豆腐</td><td>炒白菜</td></tr>
<tr align="center"><td rowspan=2>荤菜</td><td>油焖大虾</td><td>海参鱼翅	</td></tr>
<tr align="center"><td>红烧肉 <img src="1.jpg" width=50px></img></td><td>烤全羊</td></tr>

<tr><td>&nbsp</td></tr> <!--&nbsp表示用空格填充-->
</table>
</body>
</html>

二：超链接

<!--默认的是本窗口-->
<a href="url" target=_blank>新窗口 </a>
<a href="url" target=_self>本窗口 </a>
<a href="url" target=_parent>父窗口 </a>
<a href="url" target=_top>整个浏览器窗口 </a>
<a href="url" target=指向frame的名字>要替换的窗口 </a>

三：图片

<img src="1.jpg" width=50px border=1></img>
<img src="http://www.baidu.com/img/bd_logo1.png"></img>

四：标尺线

五：字体

<h1>标题1</h1> 
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

<!--font的size可以设置 1 到 7 号，再想大就不能用size了-->
<font size=7 face="华文新魏" color=#FFDD00>字体</font><br />
<font style="font-size:100px">大字体</font><br />

<sub>胡帆</sub>
<s>删除1</s>
<strike>删除2</strike>
<b>加粗</b> 
<i>斜体</i>
<u>下划线</u>
<b><u><i>组合</i></u></b>

六：有序/无序列表

<!--type:square,disc,circle,-->
<ul type="circle">
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
</ul>
<!--默认按1,2,3编序,type可以是：数字(1)，字母(a/A)，罗马字母（i/I）-->
<ol type="I" start=13 >
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
<li>有序列表4</li>
</ol>

七：Frame(不能在body标签下)

<frameset rows="20%,*" >
<frame src="p3_1.html" />
<frameset cols="15%,*" frameborder=0 >
<frame src="left.html" />
<frame src="right.html" name="right" />
</frameset>
</frameset>