HTML标签整理（二）

最新推荐文章于 2022-11-25 09:57:06 发布

故梦连城

最新推荐文章于 2022-11-25 09:57:06 发布

阅读量302

点赞数 1

分类专栏： HTML复习笔记文章标签：前端 html

本文链接：https://blog.csdn.net/weixin_41482001/article/details/86036496

版权

HTML复习笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

图像

在网站上存储图像
越是复杂的网站，越是需要深刻的条理性。所以，把所有的图片放入images文件夹中，再分别进行分类尤为重要。
添加图像

	<img src="images/master.jpg" alt="图像无法显示时显示" title="鼠标悬停时显示" height="300px" width="300px">

看到这里，讲一个不可思议的事情。在img内不用style设置宽高的时候，rem单位是不好用的。
由于<img>是内联元素，所以，<img>可以在行内使用。
同时，不得不说说，<img>的aliign属性：
示例代码如下：

<html>
	<head>
		<title>Aligning Images Vertically</title>
	</head>
	<body>
		<div style="width:450">
			<p><img src="images/bird.gif" alt="Bird" width="100" height="100" align="top" /> There are around 10,000 living species of birds that inhabit different ecosystems from the Arctic to the Antarctic. Many species undertake long distance annual migrations, and many more perform shorter irregular journeys.</p>
			<hr />
			<p><img src="images/bird.gif" alt="Bird" width="100" height="100" align="middle" /> There are around 10,000 living species of birds that inhabit different ecosystems from the Arctic to the Antarctic. Many species undertake long distance annual migrations, and many more perform shorter irregular journeys.</p>
			<hr />
			<p><img src="images/bird.gif" alt="Bird" width="100" height="100" align="bottom" /> There are around 10,000 living species of birds that inhabit different ecosystems from the Arctic to the Antarctic. Many species undertake long distance annual migrations, and many more perform shorter irregular journeys.</p>
		</div>
	</body>
</html>

效果如下：
在这里插入图片描述
创建图像的三个原则

1、使用正确的格式保存图像
2、以正确的大小保存图像
3、以像素来衡量图像

在HTML5中，引入<figure>元素用来包含图像以及图像的说明。
示例代码如下：

<html>
	<head>
		<title>Images</title>
	</head>
	<body>
		<h1><img src="images/logo.gif" alt="From A to Zucchini" /></h1>
		<figure>
			<img src="images/chocolate-islands.jpg" alt="Chocolate Islands" title="Individual Chocolate Cakes" />
			<p>
				<figcaption>
					This recipe for individual chocolate cakes is so simple and so delectable!
				</figcaption>
			</p>
		</figure>
		<h4>More Recipes:</h4>
		<p>
			<img src="images/lemon-posset.jpg" alt="Lemon Posset" title="Lemon Posset" />
			<img src="images/roasted-brussel-sprouts.jpg" alt="Roasted Brussel Sprouts" title="Roasted Brussel Sprouts" />
			<img src="images/zucchini-cake.jpg" alt="Zucchini Cake" title="Zucchini Cake" />
		</p>
	</body>
</html>

表格

基本的表格结构

<html>
	<head>
		<title>Basic Table Structure</title>
	</head>
	<body>
		<table>
			<tr>
				<td>15</td>
				<td>15</td>
				<td>30</td>
			</tr>
			<tr>
				<td>45</td>
				<td>60</td>
				<td>45</td>
			</tr>
			<tr>
				<td>60</td>
				<td>90</td>
				<td>90</td>
			</tr>
		</table>
	</body>
</html>

效果如下：

在这里插入图片描述

<table>用来创建表格。表格内容逐行编写。
<tr>表示行
<td>表示列

表格的标题

<th>------可以表示行或者列的标题，默认具有加粗的效果，可以通过scope属性来确定是行标题或列标题。

示例代码：

<html>
	<head>
		<title>Border and Background</title>
	</head>
	<body>
		<table border="2" bgcolor="#efefef">
			<tr>
				<th width="150"></th>
				<th>Withdrawn</th>
				<th>Credit</th>
				<th width="150" bgcolor="#cccccc">Balance</th>
			</tr>
			<tr>
				<th>January</th>
				<td>250.00</td>
				<td>660.50</td>
				<td bgcolor="#cccccc">410.50</td>
			</tr>
			<tr>
				<th>February</th>
				<td>135.55</td>
				<td>895.20</td>
				<td bgcolor="#cccccc">1170.15</td>
			</tr>
		</table>
	</body>
</html>

效果如下：
在这里插入图片描述
跨行、跨列、长表格

利用colspan跨行
利用rowspan跨列
长表格通常有表格头部<thead>、表格主体<tbody>、表格脚注<tfoot>

表单

表单结构

表单控件位于<form>中
每个<form>元素都需要一个action特性，其特性值是一个页面的URL，这个页面用来在用户提交表单时接收表单中的信息。
method：表单提交采用get或post

<form>表单type属性值

text :    文本框		pkaceholder：提示文字
password：密码框
radio:	  单选按钮
checkbox: 复选框
file：	  文件上传域
submit：  提交按钮
image：	  图像提交按钮
hidden：  隐藏控件（使用隐藏字段来指出用户提交表单位于哪个页面）
data：	  日期控件
email：   电子邮件
search：  搜索控件
url：	  URL输入控件
<select>  多选框、下拉框
<button>  按钮
<textarea>文本域

<filedset>、<legend>
示例代码：

<html>
	<head>
		<title>Grouping Form Elements</title>
	</head>
	<body>
		<form action="http://www.example.com/subscribe.php">      
			<fieldset>
				<legend>Contact details</legend>
				<label>Email:<br /><input type="text" name="email" /></label><br />
				<label>Mobile:<br /><input type="text" name="mobile" /></label><br />
				<label>Telephone:<br /><input type="text" name="telephone" /></label>
			</fieldset>
		</form>
	</body>
</html>