Web前端 html标签 html常用标签

@Meto

已于 2022-03-23 00:42:32 修改

阅读量2.6k

点赞数 8

文章标签：前端 html5 html

于 2022-03-22 23:23:08 首次发布

本文链接：https://blog.csdn.net/qq_45830276/article/details/123674573

版权

前端标签

样例：

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8"/>   <!--设置编码规则 -->
        <title>前端标签</title>     <!-- 标题-->
    </head>
    
    <body>
        
        <!-- 实体部分-->
        
    </body>
</html>

常用标签

1. 标题标签：

<h1>标题标签</h1>
<h2>标题标签</h2>
<h3>标题标签</h3>
<h4>标题标签</h4>
<h5>标题标签</h5>
<h6>标题标签</h6>

例：

2. p标签

<p>这是段落标签</p>
<p>这是段落标签</p>

3. span标签

<!--横着布局的文本标签-->
		<span>span</span>
		<span>span</span>
		<span>span</span>

例：横向输出

4. div标签

作用：竖像布局的文本标签，一个div里可以单独设置属性

		<div>div1</div>
		<div>div2</div>
		<div>div3</div>
		<div>div4</div>
		<div>div5</div>

例：

5. br 和 hr 标签

br : 换行标签

hr ：分割线标签

<br>
<hr>

6. a标签

超链接标签：打开当前文件路径下的gs.html文件

<a href="gs.html" target="_blank" >超链接</a>

注意：

target属性—> 当target="_blank"，超链接打开新的页面

—> 当target="_self "，超链接打开当前页面

href是设置资源路径,target 资源打开窗口的方式,可以指定自定义窗口打开

相对路径和绝对路径：

相对路径：访问资源方与被访问资源方的关系即为相对路径

绝对路径：以系统的根目录开始访问的路径

例如：从根目录开始的文件夹A的绝对路径为：C:/Users/ZHANG/Desktop/笔记/文件夹A

a.png相对于文件夹A的 “相对路径” 为：/文件夹A/文件夹B/

a.png相对于文件夹A的 “绝对路径” 为：C:/Users/ZHANG/Desktop/笔记/文件夹A/文件夹B/

7. 图片标签img

<img src="images/2.png" width="300">

注意：src中的路径既可以用绝对路径也可以相对路径，也可以设置图片高度和宽度。

8. 列表标签

ul：无序列表

ol：有序列表

<ul>
			<li>新闻1</li>
			<li>新闻1</li>
			<li>新闻1</li>
			<li>新闻1</li>
			<li>新闻1</li>
		</ul>
		
		<ol type="a" start="2">
			<li>新闻1</li>
			<li>新闻1</li>
			<li>新闻1</li>
			<li>新闻1</li>
			<li>新闻1</li>
		</ol>

注意：在有序列表中，可以用type设置序号，也可以用start设置起始序号

9. 表格标签table

注：border边框宽度为1px，

cellpadding单元格占填充占20

cellspacing="0"变宽的单元格之间的距离为0，如果没设为0，则出现这样–>

<table border="1" width="500" cellpadding="20" cellspacing="0">
			<tr>	
				<th>姓名</th>
				<th>年龄</th>
				<th>性别</th>
			</tr>

			<tr>	
				<td rowspan="2">张三</td>
				<td colspan="2">28</td>
			</tr>
			<tr>	
		
				<td>18</td>
				<td>女</td>
			</tr>
			<tr>	
				<td>李四</td>
				<td>29</td>
				<td>男</td>
				
			</tr>
			<tr>	
				<td>李花</td>
				<td colspan="2">21</td>
				
			</tr>
		</table>

**注意：**rowspan=“2” ：张三合并两个纵向单元格

colspan=“2” ：28合并两个横向单元格

10. iframe框架

作用：可以把其他网页提取到此网页中，可以设置显示提取到的网页款的大小及位置

<iframe src="http://wxy.hbu.cn/" width="100%" height="500px" frameborder="0">导入网页</iframe>

src ：导入的url，网址名称

width，height：宽度和高度

frameborder=“0” ：属性规定是否显示 iframe 周围的边框

例如：导入网页

11. 文本框input

单行文本框：  <input type="text"><br><br>
密码框：     <input type="password"><br><br>
单选框：  男：<input type="radio" name="sex1">
	     女：<input type="radio" name="sex1"><br><br>
单选框：  梨：<input type="radio" name="ruit">
	   苹果：<input type="radio" name="ruit"><br><br>
复选框：足球：<input type="checkbox" >
	   篮球：<input type="checkbox" ><br><br>

示例：

12. 文件选择器

文件选择器：<input type="file">

13.颜色选择器

颜色选择器：<input type="color">

14. 选择日期标签

日期： 		<input type="date"><br><br>
日期时间选择器： <input type="datetime-local"><br><br>
周选择器		<input type="week"><br><br>

注：可以选择对应操作

15. 下拉框

下拉框
		<select>
			<option>语文</option>
			<option>数学</option>
			<option>英文</option>
		</select><br><br>

16. 多行文本域

多行文本域：
		<textarea rows="40" cols="100"></textarea>
		<input type="submit" value="ok">
		<input type="reset" value="reset">
		<input type="button" value="an">

注意：文本域长和宽可以自己设置，可以设置提交按钮和自定义按钮

rows=“40” cols="100 ，代表长和宽的文字个数，当文字个数填充满后纵向超过设定的值后将会出现滑动条。

17. iframe充当导航栏

例如：在iframe框架中显示各个文件，结合超文本标签,设置name值，将iframe中的name属性值和a标签的值设为同一个值，可以实现各文件展示

<a href="gs.html" target="gs" >个人中心</a>
		<a href="content.html" target="gs" >内容管理</a>
		<a href="back.html" target="gs" >回收站</a>
		<a href="channel.html" target="gs" >栏目管理</a>
		<iframe src="gs.html" width="100%" height="500px" frameborder="0" name="gs"></iframe>

例如：点击不同超文本，提取不同的文件内容

18. a标签实现页面跳转

首先：先设置描点，相当于目录

可以把描点设置在任意位置，

position:fixed 固定在页面上，不随着浏览器页面的滑动而移动

right:10px;bottom:300px; 靠右，位于底部300px单位处（也可以自己随机设置）

**注意：**name和 href 里面的属性可以自己设置

<!--跳转到锚点-->
		<div style="position:fixed;right:10px;bottom:300px;">
			<ul>
				<li><a href="#bt" >跳转标题标签</a></li>
				<li><a href="#zj" >跳转到中间</a></li>
				<li><a href="#wb" >跳转到尾部</a></li>
			</ul>
		</div>
		
<!--在每个位置配置a标签，a标签里面的属性name的值与herf里面的值相同-->
<!--放在对应位置-->

<h1><a name="bt">标题位置</a></h1>  标题标签放开头

<h1><a name="zj">中间位置</a></h1>  中间

<h1><a name="wb">尾部</h1>   尾部

跳转到尾部：

跳转到首部：

			<li><a href="#zj" >跳转到中间</a></li>
			<li><a href="#wb" >跳转到尾部</a></li>
		</ul>
	</div>

标题位置

标题标签放开头

中间位置

中间

尾部

尾部 ```

跳转到尾部：

[外链图片转存中…(img-3vIZgzJj-1647962321077)]

跳转到首部：

@Meto

关注

8
点赞
踩
72

收藏

觉得还不错? 一键收藏
0
评论
Web前端 html标签 html常用标签

Web前端，html常用标签
复制链接

扫一扫