区块链技术博客
www.b2bchain.cn

HTML常用标签

这篇文章主要介绍了HTML常用标签的讲解,通过具体代码实例进行20517 讲解,并且分析了HTML常用标签的详细步骤与相关技巧,需要的朋友可以参考下https://www.b2bchain.cn/?p=20517

本文实例讲述了2、树莓派设置连接WiFi,开启VNC等等的讲解。分享给大家供大家参考文章查询地址https://www.b2bchain.cn/7039.html。具体如下:

文章目录

    • HTML的常用标签
      • 标签分类
        • < h > 标题标签
        • < p > 段落标签
        • < hr / > 水平线标签
        • < ol > 有序列表标签
        • < ul > 无序列表标签
        • < dl >< dt >< dd > 描述标签
        • < table > 表格
        • < form > 表单
        • < div > 分区标签
        • < img /> 图片标签
        • < span > 范围标签
        • < br /> 换行标签
        • < a > 超级链接

HTML的常用标签

标签分类

< h > 标题标签

举例代码:

<body> 	<h1>一级标题</h1> 	<h2>二级标题</h2> 	<h3>三级标题</h3> 	<h4>四级标题</h4> 	<h5>五级标题</h5> 	<h6>六级标题</h6> 	<h7>七级标题</h7> 	<h8>八级标题</h8> </body> 

使用效果:

HTML常用标签

只能用于六级标题及以上,如果超出六级标题,则会成普通样式

< p > 段落标签

举例代码:

<body> 	楼下一个男人病得要死,那间隔壁的一家唱着留声机,对面是弄孩子。楼上有两人狂笑;还有打牌声。河中的船上有女人哭着她死去的母亲。<p>人类的悲欢并不相通,我只觉得他们吵闹。</p> </body> 

使用效果:

HTML常用标签

即为一个段落,如果在一句话中使用,则会开辟一个新段落

< hr / > 水平线标签

举例代码:

<body> 	<hr /> </body> 

使用效果:

HTML常用标签

为生成一条水平线

< ol > 有序列表标签

举例代码:

<body> 	<ol> 		<li>第一行</li> 		<li>第二行</li> 		<li>第三行</li> 	</ol> </body> 

使用效果:

HTML常用标签

<li>为一行,有序列表和无序列表都一样

< ul > 无序列表标签

举例代码:

<body> 	<ul> 		<li>第一行</li> 		<li>第二行</li> 		<li>第三行</li> 	</ul> </body> 

使用效果:
HTML常用标签
使用方法与有序列表一样

< dl >< dt >< dd > 描述标签

举例代码:

<body> 	<dl> 		<img src="../img/img.png"/> 		<dt>石原里美</dt> 		<dd>我喜欢的女明星</dd> 	</dl> </body> 

使用效果:

HTML常用标签

多用于描述某种事物,如购物时的商品介绍等

< table > 表格

简单的表格

举例代码:

<body> 	<table border="2px"> 		<tr> 			<td>1-1</td> 			<td>1-2</td> 			<td>1-3</td> 		</tr> 		<tr> 			<td>2-1</td> 			<td>2-2</td> 			<td>2-3</td> 		</tr> 		<tr> 			<td>3-1</td> 			<td>3-2</td> 			<td>3-3</td> 		</tr> 	</table> </body> 

使用效果:

HTML常用标签

合并多列或多行操作

举例代码:

<body> 	<table border="2px"> 		<tr> 			<td colspan="3">colspan合并</td> 		</tr> 		<tr> 			<td rowspan="2">rowspan合并</td> 			<td>2-2</td> 			<td>2-3</td> 		</tr> 		<tr> 			<td>3-1</td> 			<td>3-2</td> 		</tr> 	</table> </body> 

使用效果:

HTML常用标签

clospan表示合并多少列,rowspan表示合并多少行

注:border代表边框

< form > 表单

form表单中常用的表单元素

名称 代码 效果 备注
单行文本框 <input type="text" /> HTML常用标签 用于添加用户名等数据
密码框 <input type="password" /> HTML常用标签 用于密码,输入时会保护
文本域/多行文本框 <textarea rows="10" cols="10">默认值</textarea> HTML常用标签 为多行输入,可以输入长文本
单选按钮 <input type="radio" name="radio" /> HTML常用标签 单选按钮,只能选一个,所以name必须一样,起到一致作用
复选框 <input type="checkbox" name="checkbox" /> HTML常用标签 多选按钮,可多选,name也必须一致
下拉列表 <select name=""><option>值</option></select> HTML常用标签 下拉列表,也只能选择一个,每一个option代表一个选项
普通按钮 <input type="button" /> HTML常用标签 普通按钮
提交按钮 <input type="submit" /> HTML常用标签 提交按钮,代表提交此表单
重置按钮 <input type="reset" /> HTML常用标签 重置按钮,代表重置此表单

< div > 分区标签

  1. 可以在里面写基本的数据信息,当然也可以写其他的标签元素
  2. 其作用是相当于在页面上开辟了一块区域

举例代码:

<body> 	<div id="div01" style="width: 100px;height: 100px;background-color: red;"> 		我是单独的区域 	</div> 	<div id="div02" style="width: 100px;height: 100px;background-color: blue;"> 		我也是单独的区域 	</div> </body> 

使用效果:

HTML常用标签

  1. 可以在里面写基本的数据信息,当然也可以写其他的标签元素
  2. 其作用是相当于在页面上开辟了一块区域

< img /> 图片标签

举例代码:

<body> 	<img src="../img/img.png"/> </body> 

使用效果:

HTML常用标签

为添加图片至此html页面中

< span > 范围标签

举例代码:

<body> 	我与他肩并肩 	<span id="span01"> 		但是我是span 	</span> </body> 

使用效果:

HTML常用标签

  1. 既可以放基本的数据内容,也可以放其他的标签内容
  2. 其是作用于一行

< br /> 换行标签

<body> 	我是第一行<br />代码与之一行,但是已经换行了 </body> 

使用效果:

HTML常用标签

就是换行,没有别的

< a > 超级链接

a标签有多种用途,常见的用途有页面之间的链接,锚链接,功能性链接,多窗口之间的关联等等

页面之间的链接:

<body> 	<a href="Test.html">另外一个页面</a> </body>	 

使用效果:

此为转跳至Test.html文件,达到页面之间的链接

锚链接:

<body> 	<a href="#star">锚链接</a> 	<a name="star"><img src="../img/img.png" /></a> </body> 

使用效果:

此为转跳至name为star的标签,达到锚链接的效果

功能性链接:

<body> 	<a href="mailto:[email protected]">发邮箱给我</a> </body> 

使用效果:

起到功能性的作用,可用来指定操作等

多窗口之间的关联:

  • 在新窗口中显示:_blank
  • 在自身窗口中显示:_self
  • 在上级窗口显示:_top
  • 在父窗口显示:_parent
  • framename: 在指定的框架中打开被链接文档。

本文转自互联网,侵权联系删除HTML常用标签

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » HTML常用标签
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们