本文介绍HTML的基本语法和常用标签，并通过实例演示如何使用这些标签来创建网页结构，包括文本格式化、图片插入、表格制作及表单应用等内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>练习html</title>
<base href = 'www.baidu.com'/>
</head>
<body>
<h1>标题</h1>
<p dir='rtl'><b>段落2</b> 这里<i>遗漏了结束标签，</i>但目前不影响
<p>段落2</p>
<strong >html将多个换行</strong>
<em>和空格都当做
一个空 格
<p title='注释'>鼠标悬停有注释</p>
<del>删除线</del><ins>下划线</ins>
<p><sup>上标</sup>左边是上标右边是下标<sub>下标</sub></p>
<code>code元素显示代码</code>
<bdo dir='rtl'>这段文字从右往左</bdo>
通过a元素可以链接到本机自带的邮件软件<br/>
<a href="mailto:someone@xxx.com?Subject=测试a元素发邮件" target='_top'><strong>发邮件!</strong></a>
<br><a href='#'>链接2<a/>
<h1>添加css方法</h1>
<p style='background-color: red'>blabla</p>
<br>图片<br>
<image src = '../bb.jpg' width='500' height='200'>
表格
<table border="1">
<tr>
<th colspan="2">Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
自定义列表
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
两个最常用的元素:div span
<div class="">前后分行</div>
<span>不分行</span>aaa
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float: left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © runoob.com</div>
这个下拉框可以根据用户输入的值自动筛选下拉框
<form action="demo-form.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
<p><big><strong>这个效果感觉超级酷炫的，第一次用</strong></big></p>
<br>
利用框架元素显示其他网页,而且可以指定a元素/超链接元素的页面
<br>
<iframe src = 'http://www.bilibili.com' height='500' width="500" style="float:right"></iframe>
<iframe name = 'iframe_a' src='demo_iframe.htm' height ='500' width="500" style="float: right"></iframe>
<a href = 'http://www.baidu.com' target="iframe_a">百度</a>
<a href = 'http://www.taobao.com' target="iframe_a">淘宝</a>
<iframe src = 'http://www.jingdong.com' height='500' width="500" style="float:right"></iframe>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>练习html</title>
<base href = 'www.baidu.com'/>
</head>
<body>
<h1>标题</h1>
<p dir='rtl'><b>段落2</b> 这里<i>遗漏了结束标签，</i>但目前不影响
<p>段落2</p>
<strong >html将多个换行</strong>
<em>和空格都当做
一个空 格
<p title='注释'>鼠标悬停有注释</p>
<del>删除线</del><ins>下划线</ins>
<p><sup>上标</sup>左边是上标右边是下标<sub>下标</sub></p>
<code>code元素显示代码</code>
<bdo dir='rtl'>这段文字从右往左</bdo>
通过a元素可以链接到本机自带的邮件软件<br/>
<a href="mailto:someone@xxx.com?Subject=测试a元素发邮件" target='_top'><strong>发邮件!</strong></a>
<br><a href='#'>链接2<a/>
<h1>添加css方法</h1>
<p style='background-color: red'>blabla</p>
<br>图片<br>
<image src = '../bb.jpg' width='500' height='200'>
表格
<table border="1">
<tr>
<th colspan="2">Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
自定义列表
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
两个最常用的元素:div span
<div class="">前后分行</div>
<span>不分行</span>aaa
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float: left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © runoob.com</div>
这个下拉框可以根据用户输入的值自动筛选下拉框
<form action="demo-form.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
<p><big><strong>这个效果感觉超级酷炫的，第一次用</strong></big></p>
<br>
利用框架元素显示其他网页,而且可以指定a元素/超链接元素的页面
<br>
<iframe src = 'http://www.bilibili.com' height='500' width="500" style="float:right"></iframe>
<iframe name = 'iframe_a' src='demo_iframe.htm' height ='500' width="500" style="float: right"></iframe>
<a href = 'http://www.baidu.com' target="iframe_a">百度</a>
<a href = 'http://www.taobao.com' target="iframe_a">淘宝</a>
<iframe src = 'http://www.jingdong.com' height='500' width="500" style="float:right"></iframe>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
