首页 > 代码库 > html5常用基本标签

html5常用基本标签

2024-09-06 01:55:38   217人阅读

一、Html的基本结构：

<!DOCTYPE html>
<html>
<head>
<meta  charset=utf-8">
<title></title>
</head>
<body>
网页的文本、图片等信息；
</body>
</html>

 二、Head部分：用于表示网页的元数据即描述网页的基本信息

其常用标签及属性有：

1、title标签：浏览器标签页显示的标题
2、meta标签：其常用属性
①charset:设置文档的字符集编码格式。HTML5中设置字符集编码：<meta charset="UTF-8">
常见的字符集编码格式：
a.GB-2312:国标码，简体中文
b.GBK：扩展的国标码
c.UTF-8：万国码 Unicode 常用
②http-equiv属性:将我们的信息写给浏览器看，让浏览器按照这里面的要求执行，可选属性值：Content-Type(文档类型) refresh(网页定时刷新) set-cookie(设置浏览器cookie缓存) 需要配合content属性使用。（http-equiv属性只是表明需要设置哪一部分，具体的设置内容，放到content属性中）
③name属性：使用方法同“http-equiv”。将我们的信息写给搜索引擎看
常用且需要掌握的属性值：author（作者） keywords（网页关键字） description（网页描述） 这两个属性设置，网页必不可少。
3、link标签：链接网页图标（title前的小logo），其常用属性有：
①rel属性：声明链接文件的类型，此处选icon
②type属性：可以省略
③href属性：表示图片的路径地址
 

 三、body部分：网页的文本、图片等信息

 标签的分类：

块级标签：显示为块，前后隔一行（自动换行）
行级标签：按行从左往右逐一显示。
 

1、 常见的块级标签：

①<h1></h1>......<h6><h6>：标题标签，自动加粗，h1最大，h6最小。
②<hr/>：水平线标签，添加一条水平线。
③<p></p>:段落标签，
④<br/>:换行标签，
⑤<blockquote/></blockquote>:引用标签，cite属性，表明引用的来源，一般引用网址
浏览器默认首行缩进。
⑥<pre></pre>:预格式标签，用于重载代码。浏览器默认显示样式：1、显示为等宽字体。 2、代码中的换行、
空格等元素能在浏览器中显示。
【补充】html 文件中空格的表示：&nbsp;

2、 基于布局的块级标签

列表：无序列表、有序列表、定义列表
①有序列表：<ol></ol> 列表项：<li></li>
②无序列表：<ul></ul> 列表项：<li></li>
③定义列表（实现图文混排）:<dl></dl>
列表标题：<dt>一般只有一项</dt>
列表描述项：<dd>可以有很多项</dd>

3、组合标签：<figure></figure>用于显示图片及图片标题

他有两个子标签：<img />图片
<figcaption></figcaption>图片的标题
例如：<figure>
<img src="http://www.mamicode.com/img/EZ.jpg" height="20%" width="20%" alt="探险家"/>
<figcaption>探险家 伊泽瑞尔</figcaption>
</figure>

4、分区标签：<div></div>

 

5、常见的行级标签

<1>span（文本）:无实际意义，用于包裹某部分文字，修改特定样式，例如：
这是<span style="color: red;font-size: 36px;">span</span>中的文字
img（图片）：其常用属性：①src:表示引用图片的地址。
　　　　　　　　　　　　　　路径地址的写法：相对路径：以当前文件为最准，去寻找图片地址
　　　　　　　　　　　　　　　　　　a、与文件处于同一层的图片，直接写图片名
　　　　　　　　　　　　　　　　　　b、图片在当前文件下一层：文件名/图片名
　　　　　　　　　　　　　　　　　　c、图片在当前文件上一层：../图片名
　　　　　　　　　　　　　　　　　　　　　　绝对路径:file:///盘符：/文件夹/图片名，但 是严禁使用
　　　　　　　　　　　　　　　　　　　　　　图片网址：网络上的图片链接，但是一般不用
　　　　　　　　　　　　　②height和width：图片的高度和宽度。可以用CSS样式代替
　　　　　　　　　　　　　③title：图片标。当鼠标指上之后显示的文字
　　　　　　　　　　　　　④alt:当图片无法显示的时候，显示的文字
 
<2>em（倾斜强调）
<3>strong（加粗强调）
<4>b（加粗）
<5>i（倾斜）
         Strong、em、b、i的区别
　　　　1、Strong、em都表示强调，Strong为粗体，em为斜体，而Strong的强调 程度逗比em高
　　　　2、Strong和b都能加粗，em和i都能倾斜，，但是Strong和em多了一层强调的语义 。H5要求标签尽可能实现语义化。
 
<6>q（短引用）
<7>small/big（缩小/放大字体）：small和big分别是缩小和扩大字体，都可以多层嵌套直至上限或下限
<8>a（超链接）
　　　　1、href:超链接的路径，可以是网络链接，也可以是本地文件。
　　　　2、target:跳转页面打开的位置。_self自身页面，_blank新页面。
　　　　3、title:鼠标指在超链接上显示的名称。
　　　　4、Rel（被链接是当前的前/后一篇）:指定被链接文档与当前文档的关系,搜索引擎 会利用该属性 获取更多的有关链接的信息：
　　　　　　rel="prev"被链接文档是当前文档的前一篇文 档，
　　　　　　rel="next"被链接文档是当前文档的后一篇文档,
　　　　　　rel="icon"被链接文档是当前文档的图标
　　　　　　rel="stylesheet"被链接文档是当前文档的样式表
　　　　5、Rev（当前是被链接的前/后一篇）
　　锚链接：
　　　　①本页面锚链接:a、设置锚点：<a name="top"></a>
　　　　　　　　　　　 b、跳转锚点：#name名
　　　　①页面间锚链接:a、在即将跳转页面的指定位置设置锚点
　　　　　　　　　　　 b、跳转锚点：页面地址.html#name名
　　　　　　　　<a href="http://www.mamicode.com/02_常见的块级标签.html#Hbuilder">页面间锚链接</a><br/>
　  功能性链接： mailto用于给指定邮箱发送邮件
　　　　　　file：///e:/aaa.png打开本地文件
　　　　　　tencent://message/?uin=1315618220 给指定QQ发送息
 
<9>s标签，有误文本：删除线
<s>这是S标签中的文字</s><br />
<10>cite标签：浏览器显示为倾斜，常用于书、画作、作品的引用
<cite>这是cite中的文本</cite><br />
<11>code:计算机代码，不保留代码格式
<pre>
<code></code>
</pre>
<12>bdo:表示文本方向，属性：dir="ltr"表示从左往右，dir="rtl"表示从右往左
<bdo dir="rtl">1234567</bdo><br />
kbd:表示需要用户用键盘输入的内容，浏览器显示为等宽字体
请输入“<kbd>Esc</kbd>”推迟系统<br />
<13>sup:上标文本，sub:下标文本
x<sub>6</sub><br />
? &copy; 空格 &nbsp;
? &copy; 空格 &nbsp;<br />
<14>u:下划线
<u>这是下划线</u><br />
mark:高亮或标记文本，浏览器显示为黄色背景
<mark>mark</mark><br />

 

6、表格：表格的行：tr，每行中的列：td，表格的表头：th

　　表格的常用属性：
 
 技术分享
 
 　　表格行列属性：[tr和td的属性]：
　　　　1、width/heigh：单元格的宽高
　　　　2、bgcolor:单元格的背景颜色
　　　　3、align:left center right 单元格中的文字水平对齐方式
　　　　4、valign:top center bottom 单元格中的文字垂直对其方式
　　　　5、nowrap:单元格中文字不换行
　　【注意】当表格属性与行列属性冲突时，行列属性优先级高
 

7、表单（form）

【两个重要属性】：action-表单提交的服务器地址 method-表单提交数据的方法（get/post）
get/post区别:
1>get使用URL传参：http://服务器地址?name1=value1&name2=value2
（?表示传递参数，?后面采用name=value的形式传递，多个参数之间用&连接） ① URL传参不安全，所有信息可在地址栏看到，并且别人可以很容易url注入，来 攻击自己的数据库。
② URL传参数据量有限，只能传递少量数据。
2>post:使用http请求传递数据。URL地址看不到数据信息，安全且传递信息量没有限制
综上所述：大部分使用post传参，但是get传参比Post快
【input标签及属性】
　　　　①type：input输入框的类型，可选值有：
　　　　②name：input输入框的别名，必填，因为传参的时候采用name=value的形式传递。
　　　　③value：input输入框的默认值
　　　　④placeholder:提示内容，当输入框有value时，提示内容消失。
【input特殊属性值】
　　　　① checked="checked"默认选中
　　　　② disabled="disabled"设置控制不能使用，按钮上不能点击，输入框上不能修改，而且如果
　　　　　　输入框时disabled，则输入框信息不传递到后台
　　　　③hidden=“hidden”隐藏。等同于<input type="hidden" name="username"value="http://www.mamicode.com/1234" />
　　　　　　等同于配合disabled或根据其他需要，使用隐藏域传递信息.
 
 
【input-type属性详解】
　　　　①text：文本输入框
　　　　②password：密码输入框，内容不对外显示
　　　　③radio：单选按钮
　　　　checkbox:复选按钮
　　　　　　　　a、单选按钮，name和value属性需同时存在，提交时，提交的是value中的属性值
　　　　　　　　例如：<input type="radio" name="sex" value="http://www.mamicode.com/男"/>提交显示为"sex=男"
　　　　　　　　b、radio凭借name属性区分是否为同一组，name相同为同组，且只能选择一个
　　　　　　　　c、checked="checked"默认选中，（radio只可以选一个，checkbox可以选多个）
　　　　④submit：提交按钮，提交表单数据
　　　　⑤reset：重置按钮，重置为默认状态
　　　　⑥file：文件上传按钮
　　　　⑦image：图片提交按钮，功能同submit，可以提交数据
　　　　⑧button：普通按钮，没什么软用
           ⑨其他常用属性值：见下图
技术分享
 
【select标签】下拉选择标签
   写法：

<select name="=city">
<option>青岛</option>
<option>烟台</option>
<option>北京</option>
<option>纽约</option>
<option>罗马</option>
</select>

      常用属性

　　　　①name属性：写在select里，所有选项只有一个name
　　　　②multiple属性：multiple="multiple"设置select为多选，一般不用
　　　　③option常用属性：value=""属性，当option没有value属性时，往后台传递的是<option></option>中间的文字，
　　　　　　当有value属性时，传递的是value的属性值。
　　　　　　title=""属性,鼠标之上后现实的文字
　　　　　　select="select"默认属性值
　　　　④optgroup属性： 用于option属性分组，用lable属性表示分组名。
　　　　　　<optgroup label="中国">
　　　　　　<option>青岛</option>
　　　　　　<option>烟台</option>
　　　　　　<option>北京</option>
　　　　　　</optgroup>

【textarea】:文本域，其常用属性 ：

　　　　①设置宽度高度 style="width: 150px;height: 200px;
　　　　②readonly="readonly"：只读模式，不允许修改编辑
　　　　③style="resize: none;"设置为宽度高度不允许修改
　　　　④style="overflow:;"设置文字超出区域时，如何处置，常用属性值有：
　　　　　　hidden 超出区域的文字，隐藏无法显示
　　　　　　scroll 无论文字多少，均显示滚动
　　　　　　auto 自动，根据文字多少自动决定是否会显示为滚动条

【fieldset 、legend】表单的边框与标题
　　　　　　<fieldset> //边框
　　　　　　<legend> //标题
　　　　　　</legend>
　　　　　　</fieldset>
　　　　　　　　如果想让标题嵌入到边框中，需将标题标签写到边框标签里面
　　　　　　　　一个表单可以有多组标题加边框组合

【h5智能表单】
1、H5新增input的form属性，用于指定特form表单的id，实现input无需放在form标签之中，即可通过表单进行提交
<form id=foo>
……
</form>
<input type="text" name="" form="foo">
2、 input元素的新增属性：
Autocomplete：自动完成功能，记录用户之前输入的内容，并在用户下次输入时提示用户输入
》》》属性值：on/off
》》》可以再form表单使用，对整个表单的所有控件进行自动完成的开关也可以在input上使用，
对特定输入框进行修改
》》》绝大部分浏览器默认开启
Autofocus：自动获得焦点，autofocus="autofocus"只能获得一个焦点
Form：所属表单，通过id确认属于哪个表单
Required：必填,required="required",设置必填，否则停止提交
Pattern：使用正则表达式验证input的模式
Placeholder：提示，当有value时取消提示。

【示例-表格】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>请假单</title>
	</head>
	<body >
		<!--<table width="500">
			<caption><u><b>特别请假单</b></u></caption>
			<tr>
				<td>申请日期：  年   月   日</td>
			</tr> 
		</table>
		<table border="1" style="border-collapse: collapse;" width="500">
			<tr>
				<td>所属单位</td>
				<td>卜祖班</td>
				<td>职称</td>
				<td>111</td>
				<td>姓名</td>
				<td>111</td>
				<td>厂长</td>
			</tr>
			<tr>
				<td rowspan="2">期间</td>
				<td colspan="3">年月日</td>
				<td colspan="2" rowspan="2">天数</td>
				<td>111</td>
				
			</tr>
			<tr>
				<td colspan="3">年月日</td>
				<td>主管</td>	
			</tr>
			<tr>
				<td colspan="2">职务代理人</td>
				<td colspan="4">盖章</td>
				<td>111</td>
			</tr>
			<tr>
				<td colspan="1">到职日期</td>
				<td colspan="3">年月日</td>
				<td colspan="2">审核意见</td>
				<td colspan="1">组长</td>
				
			</tr>
			<tr>
				<td colspan="2">全年特别休假书</td>
				<td colspan="2" align="right">天</td>
				<td colspan="1">111</td>
				<td colspan="1">111</td>
				<td colspan="1">111</td>
				
			</tr>
			<tr>
				<td colspan="2">疫情家属</td>
				<td colspan="2"align="right">天</td>
				<td >人事主任</td>
				<td >认识经办</td>
				<td >班长</td>
			</tr>
			<tr>
				<td colspan="2">本次申请日期</td>
				<td colspan="2"align="right">天</td>
				<td rowspan="2">111</td>
				<td rowspan="2">111</td>
				<td rowspan="2">111</td>
			</tr>
			<tr>
				<td colspan="2">剩余请假日期</td>
				<td colspan="2"align="right">天</td>
		</table>-->
		<h2 style="text-decoration:underline ;text-align: center;"width="500px" >贴别休假申请单</h2>
		<p>              
			              
			申请日期：  年   月   日</p>
		<table border="1" style="border-collapse: collapse;" width="500px" align="center">
			<tr>
				<td>所属单位</td>
				<td>卜祖班</td>
				<td>职称</td>
				<td>111</td>
				<td>姓名</td>
				<td>111</td>
				<td>厂长</td>
			</tr>
			<tr>
				<td rowspan="2">期间</td>
				<td colspan="3">年月日</td>
				<td colspan="2" rowspan="2">天数</td>
				<td>111</td>
				
			</tr>
			<tr>
				<td colspan="3">年月日</td>
				<td>主管</td>	
			</tr>
			<tr>
				<td colspan="2">职务代理人</td>
				<td colspan="4">盖章</td>
				<td>111</td>
			</tr>
			<tr>
				<td colspan="1">到职日期</td>
				<td colspan="3">年月日</td>
				<td colspan="2">审核意见</td>
				<td colspan="1">组长</td>
				
			</tr>
			<tr>
				<td colspan="2">全年特别休假书</td>
				<td colspan="2" align="right">天</td>
				<td colspan="1">111</td>
				<td colspan="1">111</td>
				<td colspan="1">111</td>
				
			</tr>
			<tr>
				<td colspan="2">疫情家属</td>
				<td colspan="2"align="right">天</td>
				<td >人事主任</td>
				<td >认识经办</td>
				<td >班长</td>
			</tr>
			<tr>
				<td colspan="2">本次申请日期</td>
				<td colspan="2"align="right">天</td>
				<td rowspan="2">111</td>
				<td rowspan="2">111</td>
				<td rowspan="2">111</td>
			</tr>
			<tr>
				<td colspan="2">剩余请假日期</td>
				<td colspan="2"align="right">天</td>
		</table>
	</body>
</html>

　　

 技术分享
 

【示例-表单】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action="04_form1.html" method="">
			<table >
				<tr>
					<td>登录名</td>
					<td>
						<input type="text" name="username"  />（可包含a-z 0-9 和下划线）
					</td>
					<td><img src="http://www.mamicode.com/img/icon.png">阅读贵美网服务协议</td>
				</tr>
				<tr>
					<td>密码</td>
					<td>
						<input type="password" name="password1"  />（至少包含6个字符）
					</td>
					<td rowspan="8">
						<textarea style="width: 150px;height: 200px; resize: none;overflow: auto;"readonly="readonly">
					
　　1、房产：a夫妻双方婚后购有坐落在×路×号×小区×栋×单元×号的楼房一套，登记在男方/女方(或双方)名下，属夫妻共有财产。离婚后，该套房屋归男方/女方所有(注：包括房内装修内附属设施及相关配套设施)，双方相互配合办理产权变更登记手续。因办理产权变更登记手续所应支付的一切税费等均由男方/女方承担。取得房屋所有权的一方给予另一方经济补偿人民币×××元，在本协议签订之日起×日内付清。

　　b夫妻双方婚后购有坐落在×路×号×小区×栋×单元×号的楼房一套，购房时以男方/女方为主贷人向×银行按揭贷款购买，首付及按揭还款都来源于夫妻共有存款，该房属夫妻共有财产。离婚后，该套房屋归男方/女方所有(注：包括房内装修内附属设施及相关配套设施)，双方相互配合办理产权变更登记及办理贷款主贷人变更手续。因办理产权变更登记及办理贷款主贷人变更手续所应支付的一切税费等均由男方/女方承担。取得房屋所有权的一方给予另一方经济补偿人民币×××元，在本协议签订之日起×内付清。

　　夫妻共有房屋内的家用电器及家具等等(见清单)，双方同意作价×××万元，归男方/女方所有，取得的一方给予另一方经济补偿人民币×××元，在本协议签订之日起×内付清。

　					</textarea>
					</td>
				</tr>
				<tr>
					<td>再次输入密码</td>
					<td>
						<input type="password" name="password2" />
					</td>
				</tr>
				<tr>
					<td>电子邮箱</td>
					<td>
						<input type="text" name="email" />（必须包含@字符）
					</td>
				</tr>
				<tr>
					<td>性别：</td>
					<td>
						<input type="radio" name="sex" value="http://www.mamicode.com/男" checked="checked"/><img src="http://www.mamicode.com/img/male.gif" />男
						<input type="radio" name="sex" value="http://www.mamicode.com/女" /><img src="http://www.mamicode.com/img/female.gif" />女
					</td>
				</tr>
				<tr>
					<td>头像：</td>
					<td>
						<input type="file" name="files"  "/>	
					</td>
				</tr>
				<tr>
					<td>爱好：</td>
					<td>
					<input type="checkbox" name="hobby" value="http://www.mamicode.com/吃" checked="checked"/>吃
					<input type="checkbox" name="hobby" value="http://www.mamicode.com/喝"/>喝
					<input type="checkbox" name="hobby" value="http://www.mamicode.com/玩"/>玩
					</td>
				</tr>
				<tr>
					<td>城市</td>
					<td>
					<select name="city" >
						<optgroup label="中国" title="中国地区">
							<option title="山东青岛">青岛</option><!--可以有n多个-->
							<option title="山东烟台">烟台</option>
							<option title="首都北京">北京</option>
						</optgroup>
						<optgroup label="外国" title="外国地区">
					 		<option title="美国纽约">纽约</option>
							<option title="意大利罗马">罗马</option>
						</optgroup>
					</select>
					</td>
				</tr>
				<tr>
					<td style="text-align: center;" colspan="2">
						<input type="submit" name="登录" value="http://www.mamicode.com/登录"/>
						<input type="reset" name="重置" value="http://www.mamicode.com/重置"/>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

　　技术分享

html5常用基本标签


联系
我们