首页 > 编程学习 > HTML学习,常用常记(区块,布局,表单,框架)

HTML 区块元素

  • 大多数 HTML 元素被定义为块级元素内联元素
  • 块级元素在浏览器显示时,通常会以新行来开始(和结束)
  • 实例: <h1>, <p>, <ul>, <table>

HTML 内联元素

  • 内联元素在显示时通常不会以新行开始
  • 实例: <b>, <td>, <a>, <img>

HTML <div> 元素

  • HTML <div> 元素是块级元素,它可用于组合其他 HTML 元素的容器
  • <div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行
  • 如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性
  • <div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据

HTML <span> 元素

  • HTML <span> 元素是内联元素,可用作文本的容器
  • <span> 元素也没有特定的含义
  • 当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性
<div id="container" style="width:500px"><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></div>

HTML 表单

  • 表单是一个包含表单元素的区域
  • 表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等
  • 表单使用表单标签 <form> 来设置
<form action="">Username: <input type="text" name="user"><br>Password: <input type="password" name="password">
</form>
<p><b>注意:</b> 表单本身是不可见的。并且注意一个文本字段的默认宽度是20个字符。</p>
<p><b>注意:</b> 密码字段中的字符是隐藏的(显示为星号或圆圈)。</p><form><p>单选:</p><input type="radio" name="sex" value="male">Male<br><input type="radio" name="sex" value="female" checked="checked">Female
</form><form><p>复选:</p><input type="checkbox" name="vehicle" value="Bike">I have a bike<br><input type="checkbox" name="vehicle" value="Car">I have a car 
</form><form name="input" action="html_form_action.php" method="get"><p>提交:</p>Username: <input type="text" name="user"><input type="submit" value="Submit">
</form>
<p>输入数据会传送到 "html_form_action.php" 的页面。该页面将显示出输入的结果。</p><form action=""><p>简单的下拉列表:</p><select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option></select>
</form><form action=""><p>预选下拉列表:</p><select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat" selected>Fiat</option><option value="audi">Audi</option></select>
</form><textarea rows="10" cols="30">我是一个文本框。
</textarea><form action=""><p>按钮:</p><input type="button" value="Hello world!">
</form>
<p>带边框的表单:</p>
<form action=""><fieldset><legend>Personal information:</legend>Name: <input type="text" size="30"><br>E-mail: <input type="text" size="30"><br>Date of birth: <input type="text" size="10"></fieldset>
</form>
<form action="demo-form.php">First name: <input type="text" name="FirstName" value="Mickey"><br>Last name: <input type="text" name="LastName" value="Mouse"><br><input type="submit" value="提交">
</form>
<p>点击"提交"按钮,表单数据将被发送到服务器上的“demo-form.php”。</p>
<h3>发送邮件到 someone@example.com:</h3>
<form action="MAILTO:someone@example.com" method="post" enctype="text/plain">Name:<br><input type="text" name="name" value="your name"><br>E-mail:<br><input type="text" name="mail" value="your email"><br>Comment:<br><input type="text" name="comment" value="your comment" size="50"><br><br><input type="submit" value="发送"><input type="reset" value="重置">
</form>
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>

 


本文链接:https://www.ngui.cc/el/2274576.html
Copyright © 2010-2022 ngui.cc 版权所有 |关于我们| 联系方式| 豫B2-20100000