HTML---HTML常用标签

最新推荐文章于 2023-06-17 20:37:51 发布
最新推荐文章于 2023-06-17 20:37:51 发布
阅读量103 收藏
点赞数
分类专栏： Web前端 文章标签： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_21420941/article/details/98315467
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>demo1</title>
	</head>
	<body>
		<!--
			h1 标题 : 
				h后面数字 取值范围:  1~6
		-->
		<h1> 标题1 </h1>
		<h2> 标题2 </h2>
		<h3> 标题3 </h3>
		<h4> 标题4 </h4>
		<h5> 标题5 </h5>
		<h6> 标题6 </h6>
		<h77> 标题h77 </h77>
		普通文本
		<!--水平分割线-->
		<hr />
		<p> 段落1 </p>
		<p> 段落1 </p>
		<p> 段落1 </p>
		
		<hr />
		<!--
			font 标签常用属性
				color: 颜色
				size : 改变字体大小  范围:1~7
				face : 字体
			<标签  属性的名称="属性的值">
		-->
	 	 我要<font color="red" size="1">回家 !!!</font> <br />
	 	 我要<font color="red" size="2">回家 !!!</font> <br />
	 	 我要<font color="red" size="3">回家 !!!</font> <br />
	 	 我要<font color="red" size="4">回家 !!!</font> <br />
	 	 我要<font color="red" size="5">回家 !!!</font> <br />
	 	 我要<font color="red" size="6">回家 !!!</font> <br />
	 	 我要<font color="red" size="7" face="仿宋">回家 !!!</font> <br />
	 	 我要<font color="red" size="77">回家 !!!</font> <br />
		<p>
		    <font>大家好，唔喺<b><i>渣渣辉</i></b>,<strong>汤王懒月</strong>给你不一样的<em>床新体验</em></font>
                </p>
	</body>
</html>
  • <!DOCTYPE html>：声明页面类型
  • <html>：根标签
  • <head>：头部分，主要是用来放置一些页面信息
  • <body>：体部分 :，主要来放置我们的HTML页面内容
  • <meta>：元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
  • <title>：网页标题
  • <h1>：标题标签，数字（1-6）控制标题大小，数字越大标题越小
  • <hr>：水平线分隔段落
  • <font>：字体标签，color: 颜色； size : 改变字体大小，范围:1~7 ； face : 字体
  • <p>：标记一个段落
  • <b>：加粗
  • <i>：斜体
  • <strong>：标签和 <em>标签一样，用于强调文本，但它强调的程度更强一些，加粗显示。
  • <em>：强调文本，斜体显示
<img src="../img/小黄图.jpg" width="500px" alt="这张图片可能加载问题" />
  • <img>：图片标签。

常用属性：src:图片路径       

                 width : 指定图片宽度     height : 图片高度

                 alt : 文件加载失败时的提示信息

            相对路径：./代表的是当前路径
                             ../ 代表的上一级路径
                             ../../    上上一级路径

		<!--无序列表
			ul
				li 列表项
			type属性 . 小圆圈, 小方块, 默认小黑点
		-->
		<ul type="square">
			<li>百合网</li>
			<li>世纪佳缘</li>
			<li>珍爱网</li>
		</ul>
		
		<hr />
		
		<!--
			有序列表
			常用属性:
				type : 指定序号的类型
				start : 从几开始,必须得写数字
		-->
		<ol type="a" start="2">
			<li>百合网</li>
			<li>世纪佳缘</li>
			<li>珍爱网</li>
		</ol>

		<ul>
			<li style="display: inline;"><a href="http://www.baihe.com" target="_blank">百合网</a></li>
			<li style="display: inline;"><a href="http://www.jiayuan.com">世纪家园</a></li>
			<li style="display: inline;">珍爱网</li>
			<li style="display: inline;">非诚勿扰</li>
		</ul>
  • <ul>：无序列表，type：指定序号类型，可以指定为小圆圈，小方块，默认是小黑点
  • <ol>：有序列表，列表项前有数字  start：指定从何开始
  • <li>：列表项
  • <a>：超链接，

herf：链接地址，如果是网络地址需要加上http协议 ,如果访问的是本网站的html文件,可以直接写文件路径

target : 以什么方式打开

_self: 默认打开方式,在当前窗口打开

_blank: 新起一个标签页打开页面

<table  width="100%" >
    <tr>
        <td>
            <table  width="100%">
	        <tr>
		    <td>
		        <img src="../img/logo2.png" />
		    </td>
	            <td>
			<img src="../image/header.jpg" />
		    </td>
		    <td>
		        <a href="#">登录</a>
		        <a href="#">注册</a>
		        <a href="#">购物车</a>
		    </td>
		</tr>
	    </table>
        </td>
    </tr>
</table>

<table border="1px" width="400px">
	<tr>
		<td colspan="2">11</td>
		<td>13</td>
		<td>14</td>
	</tr>
	<tr>
		<td>21</td>
		<td colspan="2" rowspan="2">
			<table border="1px" width="100%">
				<tr>
					<td>1</td>
					<td>1</td>
					<td>1</td>
				</tr>
				<tr>
					<td>1</td>
					<td>1</td>
					<td>1</td>
				</tr>
			</table>
		</td>
		<td>24</td>
	</tr>
	<tr>
		<td>31</td>				
		<td>34</td>
	</tr>
	<tr>
		<td>41</td>
		<td>42</td>
		<td>43</td>
		<td rowspan="2">44</td>
	</tr>
	<tr>
		<td>51</td>
		<td>52</td>
		<td>53</td>
	</tr>
</table>
  •  <table>：表格

 常用的属性:

           bgcolor : 背景色

           width : 宽度

           height : 高度

           align : 对齐方式

  • <tr>：标签定义 HTML 表格中的行。tr 元素包含一个或多个 th 或 td 元素。
  • <td>:：标签定义 HTML 表格中的标准单元格。
  • <th>：定义表格内的表头单元格。th 元素内部的文本通常会呈现为居中的粗体文本，而 td 元素内的文本通常是左对齐的普通文本。
  • 单元格合并：

                colspan :  跨列
                rowspan :  跨行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			表单标签
				action : 直接提交的地址
				
				method : 
						get 方式  默认提交方式 ,会将参数拼接在链接后面 , 有大小限制 ,4k
						post 方式  会将参数封装在请求体中, 没有这样的限制
						
			
			input :
				type: 指定输入项的类型
					text : 文本
					password :  密码框
					radio :		单选按钮
					checkbox :  复选框
					file 	 : 上传文件
					submit   : 提交按钮
					button 	 : 普通按钮
					reset	 : 重置按钮
					hidden  : 隐藏域
					
					date    : 日期类型
					tel     : 手机号
					number   : 只允许输入数字
					
				placeholder : 指定默认的提示信息
				name : 在表单提交的时候,当作参数的名称
				id : 给输入项取一个名字, 以便于后期我们去找到它,并且操作它
			
			textarea : 文本域, 可以输入一段文本
						cols : 指定宽度
						rows : 指定的是高度
			
			select  : 下拉列表
				option : 选择项
		-->
		<form action="../index.html" method="post" >
			<!--隐藏域
				主要是用来存放页面上一些ID信息
			-->
			<input type="hidden" value="sadfaldsfkjl@o3214813278" name="uid"/>
			<!--文本输入框-->
			用户名: <input type="text" name="username" id="username" placeholder="请输入用户名" /><br />
			<!--密码框-->
			密码:   <input type="password" placeholder="请输入密码" /> <br />
			确认密码: <input type="password"  /> <br />
			邮箱:  <input type="text"  /> <br />
			
			手机号码: <input type="tel"  /> <br />
			靓照: <input type="file" /> <br />
			
			性别: <input type="radio" name="sex" />男
				 <input type="radio" name="sex"  />女 
				 <input type="radio" name="sex" />妖 <br />
			
			爱好:
				<input type="checkbox" />抽烟
				<input type="checkbox" />喝酒
				<input type="checkbox" />烫头
				<input type="checkbox" />撸代码
				<input type="checkbox" />大宝剑
				<br />
			
			择偶要求:
				<textarea cols="40" rows="4"></textarea><br />
			籍贯	:
				<select>
					<option>--请选择--</option>
					<option>湖北</option>
					<option>内蒙古</option>
					<option>火星</option>
				</select>
				
				<br />
			出生日期: 
				<input type="datetime-local" /> <br />
			验证码: <input type="text"  /><br />
			
			<input type="submit"  value="注册"/>
			<input type="button"  value="普通按钮"/>
			<input type="reset"  value="重置按钮"/>
		</form>
	</body>
</html>
  • 表单标签:

                action : 直接提交的地址
                
                method :
                        get 方式  默认提交方式 ,会将参数拼接在链接后面 , 有大小限制 ,4k
                        post 方式  会将参数封装在请求体中, 没有这样的限制

  • input :

                type: 指定输入项的类型
                             text : 文本
                             password :  密码框
                             radio :        单选按钮
                             checkbox :  复选框
                             file      : 上传文件
                             submit   : 提交按钮
                             button      : 普通按钮
                             reset     : 重置按钮
                             hidden  : 隐藏域
                    
                    date    : 日期类型
                    tel     : 手机号
                    number   : 只允许输入数字

                placeholder : 指定默认的提示信息
                name : 在表单提交的时候,当作参数的名称
                id : 给输入项取一个名字, 以便于后期我们去找到它,并且操作它

  • textarea : 文本域, 可以输入一段文本

                        cols : 指定宽度
                        rows : 指定的是高度

  • select  : 下拉列表

                        option : 选择项

<html>
    <frameset cols="25%,50%,25%">
      <frame src="frame_a.htm" />
      <frame src="frame_b.htm" />
      <frame src="frame_c.htm" />
    </frameset>
</html>
  • <framset>：框架标签

                          注意: 使用了frameset必须将body删掉,否则页面会有问题

                          常用属性:

                                 src: 引入的html文件路径 ​

                                 name: 指定框架的名称

Rosinante.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uni-app与HTML的标签变化
weixin_44770377的博客
09-24 1万+
组件/标签的变化 以前是html标签，现在是小程序标签 div 改成 view span、font 改成 text a 改成 navigator img 改成 image input 还在，但type属性改成了confirmtype form、button、checkbox、radio、label、textarea、canvas、video 这些还在。 select 改成 picker ifram...
HTML的常用标签
冷兮雪的博客
11-08 6167
这个标签可以在页面上画水平线。
HTML常用标签--整理篇
程序员小章的博客
09-13 1万+
HTML常用标签 文章目录HTML常用标签文本标签HTML格式化标签HTML图像标签HTML表格标签HTML表单标签 文本标签 常⽤文本标签如下： <hn>...</hn>标题标签，其中n为1–6的值。 <i>...</i>斜体 ... 强调斜体 <b>...</b> 加粗 <strong>...</strong> 强调加粗 <cite></cite&
uni-app常用标签详解
m0_74831742的博客
06-17 5694
view>
HTML标签及属性大全-经典
zzjlhlcd的博客
11-03 4323
LOOP=,设定播放重复次数,LOOP=6表示重复6次,true或-1为无限循环,false为播放一次即停止.LOOP=,设定播放重复次数,LOOP=6表示重复6次,true或-1为无限循环,false为播放一次即停止.--...-->,注释标记,在"表示表格背景色为黑色.---,包含文件的标题,标题出现在浏览器标题栏中。,定义表格的行,用在中。
html常用font-family设置字体样式
热门推荐
一个包子的成长的博客
01-14 3万+
html常用font-family字体样式
WEB前端-HTML-常用标签
The One
08-12 2万+
各种符号要想在页面上显示各种符号，需要根据html的符号对照表来进行编写。 详细请点这里p&br&hrp 表示段落，默认段落上下会有行间距； br 是换行，自闭和标签； hr 是横线；<p> 段落自带行间距 </p> <p> 段落自带行间距 </p> <hr/> <br/> <br/>a标签1、可添加超链接标签； 2、有锚的作业，相当于业内定位；<a href
HTML5--语义化标签
weixin_44348052的博客
07-08 1965
语义标签实际就是含有语言意义的，能够为浏览器和开发者描述其意义的标签。比如标签，能够作为导航栏、底边栏，也有可能是一个普通的盒子。相反，能够清楚知道该标签定义的内容。之前，在对html页面进行布局时，最常使用的是div盒子，比如、。html5新增的语义化标签能够明确定位一个web页面的不同部分，belike：...
HTML常用标签及其属性
wangkai2580的博客
07-11 5112
HTML的常用标签
一天搞定HTML----常用标签01
Java仗剑走天涯
05-08 2727
一天搞定HTML----常用标签01
038HTML-DOM对象.doc
11-30
* innerHTML：设置或返回行的开始标签和结束标签之间的 HTML * rowIndex：返回该行在表中的位置 TableRow 对象的常用方法有： * insertCell(index)：返回 TableCell 对象 * deleteCell(index)：删除行中的指定的...
20.2 HTML 常用标签
07-28
配套资源
HTML常用标签代码
05-07
HTML常用标签练习，方便大家借鉴，本次下载不需要积分，可以直接下载 HTML常用标签练习，方便大家借鉴，本次下载不需要积分，可以直接下载
HTML5-标签集合.pdf
最新发布
08-11
1、HTML5-标签集合；2、整合了常用的HTNL5的部分标签；3、用表格的形式展现HTML5标签；
HTML常用标签属性.txt
04-29
HTML常用标签属性大全
vue echarts-wordcloud 词云不显示解决方法
rosinante
10-24 3915
vue echarts-wordcloud 词云不显示常见原因和解决方法
JQuery笔记---JQuery简介
rosinante
08-05 545
目录 一、JQuery简介 1.JQuery是什么 2.JQuery的发展历程 3.JQuery能做什么 4.JQuery的弊端 5.JQuery的优势 6.JQuery的使用 7.DOM对象与JQuery对象 二，JQuery选择器 1.基本选择器 2.层次选择器 3.过滤选择器 一、JQuery简介 1.JQuery是什么 一个优秀的JavaScript库 ...
JavaScript笔记---JS简介和开发入门
rosinante
08-04 503
目录 一、JavaScript概述 1.什么是JS： 2.JS的作用： 3.JS的组成: 4.JS的语法: 5.JS的数据类型: 6.JS的运算符和语句: 7.JS的输出 8.JS的开发步骤 二、JS入门开发 1.JS实现点击替换文本 2.JS实现表单验证 3.JS实现轮播图 4.JS实现页面定时弹出广告 5.JS实现有友好提示的表单校验 6.JS实现表格隔行...
JQuery笔记---JQuery入门案例（二）
rosinante
08-22 458
目录 案例一：JQuery校验用户 案例二： 实现百度搜索提示 案例三：JQuery实现省市联动（XML传输数据方式） 案例四：JQuery实现省市联动（Json传输数据方式） 案例一：JQuery校验用户 需求：注册用户时，对已存在用户进行提示 JQuery： <!-- 导入JQuery的支持 --> <script type="text/javascri...
html里面v-开头的常用指令
05-10
以下是一些常用的v-指令： 1. v-if：根据表达式的值来切换元素的存在。 2. v-for：基于数组或对象的值来渲染一个列表。 3. v-on：绑定事件监听器。 4. v-bind：动态地绑定一个或多个特性，或一个组件 prop 到...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值