本文详细介绍了HTML中的表单元素、不同类型的元素（块级、内联、行内块级），以及HTML5中新增的header、nav、article、section和aside等结构标签，帮助读者理解网页布局的基本构建。
表单元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<!--
<form action="url" method="get" name="myform"></form>
<form action="url" method="post" name="myform"></form>
-->
<form action="" method="get" name="myform">
<input>
<input type="text">
<input type="submit">
<button>按钮</button>
</form>
<form action="" method="post" name="myform">
frist name: <input type="text" name="fristname">
<br>
last name: <input type="text" name="lastname">
<br>
<input type="submit" value="登录">
</form>
<form action="">
password: <input type="password" name="pwd">
</form>
<p>块元素、内联元素、行内块级元素。</p>
常见的块级元素：独占一行，竖着拜访<br>
div、form、h1-h6、hr、p、table、ul等<br>
<h1>标题</h1>
<p>段落</p>
<ul>
<li>列表1</li>
<li>列表2</li>
</ul><br>
常见的内联元素：横着摆放<br>
a、b、em、I、span、strong、等<br>
<a href="#">超链接</a>
<span>内容</span>
<em>注重语气</em><br>
行内块级元素（特点：不换行、能够识别宽高）<br>
button、img、input、等<br>
<img src="1.png" alt="" width="300">
<img src="2.jpg" alt="" width="200"><br>
<p>h5新增标签</p>
我们已经学过很多标签：<br>
<h3>标题</h3>
<a href="#">超链接</a>
<strong>文本</strong>
<p>段落</p>
<ul>
<li>列表1</li>
</ul>
<table>
<tr>
<td>单元格</td>
</tr>
</table>
div可以划分区域：就是一个容器<br>
<div>
<ul>
<li>导航1</li>
<li>导航2</li>
</ul>
</div>
<div>
<img src="1.png"width="300" alt="">
</div>
<div>
<img src="1.png"width="300" alt="">
<p>段落</p>
</div>
</body>
</html>
新增标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<!--
<form action="url" method="get" name="myform"></form>
<form action="url" method="post" name="myform"></form>
-->
<form action="" method="get" name="myform">
<input>
<input type="text">
<input type="submit">
<button>按钮</button>
</form>
<form action="" method="post" name="myform">
frist name: <input type="text" name="fristname">
<br>
last name: <input type="text" name="lastname">
<br>
<input type="submit" value="登录">
</form>
<form action="">
password: <input type="password" name="pwd">
</form>
<p>块元素、内联元素、行内块级元素。</p>
常见的块级元素：独占一行，竖着拜访<br>
div、form、h1-h6、hr、p、table、ul等<br>
<h1>标题</h1>
<p>段落</p>
<ul>
<li>列表1</li>
<li>列表2</li>
</ul><br>
常见的内联元素：横着摆放<br>
a、b、em、I、span、strong、等<br>
<a href="#">超链接</a>
<span>内容</span>
<em>注重语气</em><br>
行内块级元素（特点：不换行、能够识别宽高）<br>
button、img、input、等<br>
<img src="1.png" alt="" width="300">
<img src="2.jpg" alt="" width="200"><br>
<p>h5新增标签</p>
我们已经学过很多标签：<br>
<h3>标题</h3>
<a href="#">超链接</a>
<strong>文本</strong>
<p>段落</p>
<ul>
<li>列表1</li>
</ul>
<table>
<tr>
<td>单元格</td>
</tr>
</table>
div可以划分区域：就是一个容器<br>
<div>
<ul>
<li>导航1</li>
<li>导航2</li>
</ul>
</div>
<div>
<img src="1.png"width="300" alt="">
</div>
<div>
<img src="1.png"width="300" alt="">
<p>段落</p>
</div>
<p>传统给的标签，可以兼容各种浏览器</p>
<div id="header"></div>
<div id="nav"></div>
<div id="article">
<div id="section"></div>
</div>
<div id="silder"></div>
<div id="footer"></div>
<p>下面是新增标签</p>
<header>头部</header>
<nav>导航</nav>
<article>代表一个独立的、完整的相关内容块，如一篇完整的论坛帖子，博客，评论
<section>定义文档中的节，如章节，页眉，页脚</section>
</article>
<aside>侧边栏</aside>
<footer>脚部</footer>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
