HTML的常用标签

HTML标签

(1)html标签

html标签是HTML文件的最大一个标签,也被称为根标签。在html标签内把整个html分为了头部(head标签)和内容部分(body部分),头部负责声明页面的属性,body用来展示内容。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"> <!--设置编码为utf-8-->
        <title>标题</title>
    </head>
    <body>
        <p>展示的内容</p>
    </body>
</html>

(2)标题标签

<h1 align="right">标题</h1>

<!--
	从h1到h6一共六个等级,等级1到6由大到小
    align:对齐方式。left:左对齐;center:居中;right:右对齐。
-->

(3)文本标签

<p>文本标签</p>
<span>文本标签</span>
<br>
<hr>

<!--
	p标签:文本标签通常用来存放文字,一个p标签占一行,html当中大段的文字通常是用p标签表示的。
	span标签:文本标签不进行换行操作,可以对一行文字进行修饰
	br标签(单标签):换行标签
	hr标签(单标签):独立一行的一条线
-->

(4)文本修饰标签

<i>倾斜</i>
<em>倾斜</em>
<b>加粗</b>
<strong>加粗</strong>
<u>下划线</u>
<del>删除线</del>

<!--
	i标签:倾斜文字,强调倾斜
	em标签:倾斜文字
	b标签:加粗文字
	strong标签:加粗文字,强调加粗
	u标签:文字下划线
	del标签:删除线
-->

(5)图片标签

<img src="img.png" alt="找不到图片" title="背景" height="150px" width="100%">

<!--
src:图片的路径,可以是绝对路径,也可以是相对路径
alt:图片加载失败的提示文字
title:鼠标移到图片时的提示文字
图片尺寸:height 图片高度 width 图片宽度
    单独设置图片的高度或者宽度,html会自动的对图片进行等比例缩放,使得图片不会变形
    高度和宽度的设置单位通常是像素(px),也可以用百分比  
-->

(6)超链接标签

<!--超链接-->
<a href="https://www.baidu.com/" target="_blank">帮助</a>

<!--
href:超链接的地址
target:打开链接的方式,_blank指的是新建一个窗口来访问链接
-->

<!--锚点操作,快速跳转到指定的标签位置-->
<h2 id="h2" align="center">诺卡木门调查问卷</h2>
<a href="#h2">返回顶部</a>

<!-- 操作步骤
1、在需要跳转到的标签上设置id属性,id是标签的标识属性,在一个页面中,id不可重复
2、给a标签的href属性使用#id的名称进行指定,实现跳转到指定的标签位置
-->

(7)列表标签

1、有序列表

<ol type="A" start="2">
    <li>python</li>
    <li>java</li>
</ol>

<!--
type属性
  a:小写字母排序
  A:大写字母排序
  i:小写罗马数字排序
  I:大写罗马数字排序
  1:数字排序,默认
start属性:序列开始数字
-->

2、无序列表

<ul type="square">
    <li>python</li>
    <li>java</li>
</ul>

<!--
type属性
  disc:实心原点,默认
  circle:空心原点
  square:实心方块
-->

3、自定义列表

<dl>
    <dt>学科</dt>
        <dd>python</dd>
        <dd>java</dd>
</dl>

<!--
输出结果:
	学科
		python
		java
-->

(8)表格标签

<table cellspacing="25px" cellpadding="50" width="700px" height="800px" align="center">
    <caption> ***表格
    </caption>
    <tr>
        <th valign="bottom">姓名</th>
        <td>老王</td>
        <td>年龄</td>
        <td>18</td>
        <td rowspan="2">图片</td>
    </tr>
    <tr>
        <td colspan="2">性别</td>
        <td colspan="2">男</td>
    </tr>
</table>

<!--
caption标签:表格的标题
tr标签:行
td标签:列
th标签:是一种特殊的td,对文字自动执行居中加粗
属性:
	align:表格相对于周围元素的对齐方式。
        left
        right
        center
    valign:单元格中的内容的垂直对齐方式,在h5中已不支持,可以通过css代替,不过设置单行td还有效
        top
        bottom
        middle
    cellspacing:单元格和单元格之间的距离
	cellpadding:单元格和内容的距离(内容和单元格上下左右的距离)
	width:表格的宽度
	height:表格的高度,由于数据条数不固定,通常不设置高度
    colspan 跨列合并:某一行合并几列单元格
    rowspan 跨行合并:某一列合并几行单元格
-->

(9)表单标签

<form action="demo.php" >
    name: <input type="text" name="myname" value="jacke5t"><br>
    <input type="submit" value="提交">
</form>

<!--
form标签:用于创建供用户输入的 HTML 表单。
	参数
      action:数据提交的地址
      method:提交的方式,通常有get和post两种
      enctype:提交数据的格式,适用method="post" 的情况
-->

(10)表单元素标签

1、input标签

<input name="myname" value="jacke5t">
<input type="radio" name="1" checked> 
<input type="radio" name="1">
<input type="submit" value="提交">
<input type="text" placeholder="请输入您的联系电话">
<input type="text" readonly>
<input type="reset" value="分享" disabled>

<!--
input标签默认是一个文本框
	type参数:
		text:文本框,默认
		password:密码框,输入内容不可见
		radio:单选框,依赖name确定一组单选框,单选框中相同name的选项只能选一个
  			checked:代表选项选中
        checkbox:复选框,依赖name确定一组,复选框中相同name的选项能选多个
            checked:代表选项选中
        file:文件框,用来上传文件
		hidden:隐藏域,不显示,但可以提交,后端校验使用居多
		submit:提交按钮,自动提交表单里的数据,没有后台没有效果,需要value参数来定义按钮上的内容
		reset:重置按钮,清空当前表单的所有输入
	属性:
	placeholder:在文本框中显示提示字符
	readonly:只读,输入文本框不能输入
    disable:禁用按键
    value:元素的值
-->

2、button标签

<button type="button">
    <img scr="..." width="100px">
</button>
<button type="submit">按钮</button>

<!-- 相比较input,button的按钮内容可以更丰富
type参数
  button:按钮
  submit:提交
  reset:重置
-->

3、select标签

<select>
    <option>1</option>
    <option>2</option>
    <option selected>3</option>
</select>

<!--下拉框标签
	option标签:下拉框中的选项
	selected:下拉默认选中项
-->

4、textarea标签

<textarea cols="40" rows="5">textarea</textarea>

<!--用于大段的文字
	cols:文本区域内可见的宽度
	rows:规定文本区域内可见的行数
-->

5、label标签

label元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

<form action="demo_form.php">
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" value="female"><br>
  <input type="submit" value="提交">
</form>

<!--当用户点击label时,会在选项框中自动选择相应label所绑定的选项
	for:规定label与哪个表单元素绑定。
-->

(11)符号

&nbsp;  空格的代表符号,代表一个空格
&gt     ">"的代表符号
&lt     "<"的代表符号
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值