首页 > 其他分享> > HTML学习，常用常记（区块，布局，表单，框架）

HTML学习，常用常记（区块，布局，表单，框架）

2019-03-06 19:51:40 作者：互联网

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>

标签：元素,表单,HTML,内联,常记,文本,CSS
来源： https://blog.csdn.net/qq_30796379/article/details/88206338