HTML中常用标签的使用

最新推荐文章于 2024-09-20 01:12:58 发布

pipizhen_

最新推荐文章于 2024-09-20 01:12:58 发布

阅读量534

点赞数 2

分类专栏：前端基础文章标签： html

本文链接：https://blog.csdn.net/pipizhen_/article/details/107912971

版权

前端基础专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HTML中常用标签的使用：

HTML：Hyper Text Markup Language，超文本标记语言。

超文本：比普通文本更加强大，可以添加各种样式。

标记语言：通过一组或一个标签，来对内容进行描述标记。

<h1></h1>：标题标签，分1-6级，1最大，6最小。

<br />：换行

<hr />：水平分割线

<b></b>：字体加粗

<strong></strong>：字体加粗，带语义标签

<i></i>：斜体

<em></em>：斜体，带语义标签

<p></p>：段落标签

<font></font>：属性有color颜色, size字体大小, face字体版本

<img />：属性有src，指定图片路径
width,height宽高像素
alt,图片加载失败的提示信息。

相对路径：./当前路径，. ./上一级路径，. ./. ./上上一级路径。

<ul></ul>：无序列表，属性有type

<ol></ol>：有序列表，属性有type样式，start起始索引

<li></li>：列表项标签

<a></a>：超链接，属性href链接地址，target打开方式

<table></table>：表格，属性border指定边框
with,height宽高
bgcolor背景色
align对齐方式

<tr>行标签，<td>列标签
属性colspan跨列，rowspan跨行。

font：字体标签
属性=“属性值”，每个属性之间双引号括起来。
常用属性：color，表示颜色。
size，字体大小，属性值为1-7，其中3号是普通字体大小。
face，设置字体的样式号，如微软雅黑，宋体等。

img标签常用属性：
src: 指定图片的路径
width，heigth: 指定宽高，单位像素
alt: 图片加载失败时，提示信息
例如：<img src="./img/kong.jpg" width="100%" alt="图片加载失败" />

a超链接标签
常用属性：href: 指定要跳转的链接地址，需要加上http协议。如果访问的是本地网页，直接写路径。
target: 以什么方式打开。
_self: 默认打开方式
_blank: 新起一个标签页面打开
例如：<a href="www.baidu.com" target="_blank">百度一下</a>

无序列表：ul，列表项标签是li
ul常用属性：type，属性值有circle空心圆，disc实心圆，square实心方块。
默认是disc，实心圆。

有序列表：ol，列表项还是li
ol常用属性：type，属性值有1数字，A大写字母，a小写字母，I阿拉伯计数，i阿拉伯计数。
start属性，值表示第一个有序列表的type取值，start的值只能是数字。
默认是数字有序，从1开始。

表格标签table，子标签有tr行，td列
table常用属性：
border: 指定边框，单位像素
width: 宽
heigth: 高
bgcolor: 背景色
align: 对其方式

表格的合并：
colspan: 跨列
rowspan: 跨行
注意：需要将跨的单元格删掉。

form标签：
常用属性：action属性，提交的地址。
method属性：提交的方式
get方式：默认提交方式，会将参数拼接在链接后面，有大小容量限制，比如4KB。
post方式：会把参数封装在请求体中，没有大小限制。

input标签：
常用属性：
type: 指定输入项的类型。
name: 在表单提交的时候，当作参数的名称。
id: 给输入项起个名字，以便找到并操作它。

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
			form标签：
				常用属性：action属性，提交的地址。
					method属性：提交的方式
						get方式：默认提交方式，会将参数拼接在链接后面，有大小容量限制，比如4KB。
						post方式：会把参数封装在请求体中，没有大小限制。
			input标签：
				常用属性：
					type: 指定输入项的类型。
					name: 在表单提交的时候，当作参数的名称。
					id: 给输入项起个名字，以便找到并操作它。
		 -->
		<form action="#" method="get">
			<!-- 
				第一行放个input，隐藏域，主要是存放页面一些ID信息
			 -->
			<input type="hidden" value="xxxabc" />
			
			用户名：<input type="text" maxlength="12" placeholder="请输入用户名" name=username"" /> <br />
			
			密  码：<input type="password" maxlength="16" name="password" /> <br />
			
			性  别：<input type="radio"  checked="checked" name="sex" />男
				<input type="radio" name="sex" />女<br />
				
			爱  好：<input type="checkbox" name="like" />抽烟
				<input type="checkbox" name="like" />喝酒
				<input type="checkbox" name="like" />烫头<br />
				
			邮  箱：<input type="email" name="email" /> <br />
			
			手机号：<input type="tel" maxlength="11" name="telphone" /><br />
			
			照  片：<input type="file" name="photo" /><br />
			
			籍  贯：<select name="籍贯">
				<option value ="0">--请选择--</option>
				<option value ="地球">地球</option>
				<option value ="火星">火星</option>
				<option value ="金星">金星</option>
			</select> <br />
			
			出生日期：<input type="date" name="birthday" /> <br />
			
			对我们的建议：<br />
			<textarea rows="4" cols="40">
				
			</textarea> <br />
			
			验证码：<input type="text"/> <br />
			
			<input type="submit" value="提交" />
			<input type="reset" value="置空"/> <br />
		</form>
		
	</body>
</html>