devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

HTML常用标签2_html url标签

作者：2023面试高手 | 2024-02-18 20:32:32

赞

踩

html url标签

一、超链接：

1.概述

1.超链接可以链接任何内容，本质上是页面或本页内容的一个链接。

2.标签

a 
属性 
href:表示链接到的页面或位置。

3.功能

1.页面与页面之间的跳转
2.本页内跳转(锚点)

4.详细

1.页面之间的跳转：
               ① 与外部网站页面之间的跳转：href中的路径必须是一个完整的url路径。必须以协议开头。例如：http
               ② 链接本网站中的其它网页：
2.常用属性：
               ① href ：表示链接到的页面
               ② target:
                    (***)_blank 在新窗口中打开被链接文档。 
                    _self 默认。在相同的框架中打开被链接文档。 
                    _parent 在父框架集中打开被链接文档。 
                    _top 在整个窗口中打开被链接文档。 
                    framename 在指定的框架中打开被链接文档。 
               ③ 超链接的颜色：
                    未被访问的链接带有下划线而且是蓝色的 
                    已被访问的链接带有下划线而且是紫色的 
                    活动链接带有下划线而且是红色的 

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 	</head>
  7. 	<body>
  8. 		<!--超链接
  9. 			1.页面之间的跳转：
  10. 			   ① 与外部网站页面之间的跳转：href中的路径必须是一个完整的url路径。必须以协议开头。例如：http
  11. 			   ② 链接本网站中的其它网页：
  12. 			2.常用属性：
  13. 			   ① href ：表示链接到的页面
  14. 			   ② target:
  15. 			        (***)_blank 在新窗口中打开被链接文档。 
  16. 					_self 默认。在相同的框架中打开被链接文档。 
  17. 					_parent 在父框架集中打开被链接文档。 
  18. 					_top 在整个窗口中打开被链接文档。 
  19. 					framename 在指定的框架中打开被链接文档。 
  20. 		       ③ 超链接的颜色：
  21. 				          未被访问的链接带有下划线而且是蓝色的 
  22. 					已被访问的链接带有下划线而且是紫色的 
  23. 					活动链接带有下划线而且是红色的 
  25. 		-->
  26. 		<!--如果href属性为""，表示在当前页面-->
  27. 		<a href="www.baidu.com">点我打开百度</a>
  28. 		<br />
  29. 		<!--链接本网站中的其它网页-->
  30. 		<a href="index.html">点我链接到index.html</a>
  31. 		<a href="homework/Topic1.html" target="_blank">点我链接到Topic1</a>
  32. 		<br />
  33. 		<a href="http://www.sina.com.cn">点我跳转到新浪</a>
  34. 	</body>
  35. </html>

5.超链接锚点形式：
            1.定位的位置： name属性进行定位。
            2.要跳转到该定位的位置：href属性指明要跳转到的name的位置，此时，name的名称前面要加#

二、字符实体

1.字符实体

当需要正确显示预留字符时，必须要使用字符实体。
格式：
 &字符实体标识;

2.常见字符实体

1.空格： 
2.大于和小于： >  >  < >
3.&：&

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 	</head>
  7. 	<body>
  8. 		<!--字符实体
  10. 		-->
  11. 		<!--a<b<c
  12. 		<hr /> -->
  13.  
  14. 		a&lt;b&lt;c
  15.  
  16. 		张&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;       
  17. 		三&copy;&reg;
  18. 	</body>
  19. </html>

三、表格

1.概述

html页面布局时，就是表格进行布局。
div + css

2.表格的构成

<table>
    <tr>
        <td></td>
    </tr>


</table>
注意：
            1.构成
             table
             tr 行
             td单元格
             th相当于单元格的标题
             emmet语法 :
                   > 表示层级关系
                   ()表示分组
                   *表示重复
                   {}文本内容
                   $表示从1开始的增量
              2.table属性：
                ① border 表格的边框
                ② cellspacing 单元格之间的空白
                ③ cellpadding 单元格与内容之间的空白
                ④ width 宽度
                ⑤ align 表示水平对齐。left center right
              3.tr属性             
                ① align：表示水平对齐，行中的数据的水平对齐。
                ② valign：表示垂直对齐方式
             4.td属性
                 ① colspan 合并列
                 ② rowspan 合并行

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 	</head>
  7. 	<body>
  8. 		 <!--表格
  9. 		 	table
  10. 		 	tr 行
  11. 		 	td单元格
  12. 		 	th相当于单元格的标题
  13. 		 	emmet语法 :
  14. 		 	   > 表示层级关系
  15. 		 	   ()表示分组
  16. 		 	   *表示重复
  17. 		 	   {}文本内容
  18. 		 	   $表示从1开始的增量
  19. 		 	 2.属性：
  20. 		 	   ① border 表格的边框
  21. 		 	   （***）② cellspacing 单元格之间的空白
  22. 		 	    （***）③ cellpadding 单元格与内容之间的空白
  23. 		 	   ④ width 宽度
  24. 		 	   ⑤ align 表示水平对齐。left center right
  25. 		 --> 
  26. 		 <!--<table border="10px" cellspacing="10px" cellpadding="10px" bgcolor="pink" width="100%">-->
  27. 		 <!--cellspacing值为0表示单元格边框为一条实线-->
  28. 		 <table border="2px" cellspacing="0px"  align="center">
  29. 		 	<tr>
  30. 		 		<td>这是一个单元格1</td>
  31. 		 		<td>这是一个单元格2</td>
  32. 		 	</tr>
  33. 		 	<tr>
  34. 		 		<td>这是一个单元格1</td>
  35. 		 		<td>这是一个单元格2</td>
  36. 		 	</tr>
  37. 		 	<tr>
  38. 		 		<td>这是一个单元格1</td>
  39. 		 		<td>这是一个单元格2</td>
  40. 		 	</tr>
  41. 		 </table>
  42. 		 <hr />
  43. 		 <!--tr 表示行
  44. 		 	① align：表示水平对齐，行中的数据的水平对齐。
  45. 		 	② valign：表示垂直对齐方式
  46. 		 -->
  47. 		 <table border="1px" width="700px" height="300px" align="center">
  48. 		 	<tr align="center" valign="top">
  49. 		 		<td>这是一个单元格1</td>
  50. 		 		<td>这是一个单元格2</td>
  51. 		 	</tr>
  52. 		 	<tr>
  53. 		 		<td>这是一个单元格3</td>
  54. 		 		<td>这是一个单元格4</td>
  55. 		 	</tr>
  56. 		 </table>
  57. 		 <!--td单元格(***)
  58. 		 	① colspan 合并列
  59. 		 	② rowspan 合并行
  60. 		 -->
  61. 		 <hr />
  62. 		 <table border="1px" cellspacing="0px" width="500px">
  63. 		 	<tr>
  64. 		 		<td colspan="2"> 1</td>
  65. 		 		<td rowspan="2">2</td>
  66.  
  67. 		 	</tr>
  68. 		 	<tr>
  69. 		 		<td rowspan="2">4</td>
  70. 		 		<td>5</td>
  71.  
  72. 		 	</tr>
  73. 		 	<tr>
  74.  
  75. 		 		<td>8</td>
  76. 		 		<td>9</td>
  77. 		 	</tr>
  78. 		 </table>
  79. 		 <!--th 相当于单元格的标题-->
  80. 		 <hr />
  81. 		 <br />
  82. 		 <h1 align="center">用户表</h1>
  83. 		 <table border="1px" width="700px" align="center">
  84. 		 	<tr>
  85. 		 		<th>姓名</th>
  86. 		 		<th>年龄</th>
  87. 		 		<th>用户名</th>
  88. 		 		<th>密码</th>
  89. 		 	</tr>
  90. 		 	<tr>
  91. 		 		<td>张三</td>
  92. 		 		<td>19</td>
  93. 		 		<td>zs</td>
  94. 		 		<td>123</td>
  95. 		 	</tr>
  96. 		 	<tr>
  97. 		 		<td>李四</td>
  98. 		 		<td>25</td>
  99. 		 		<td>ls</td>
  100. 		 		<td>123</td>
  101. 		 	</tr>
  102. 		 </table>
  103. 	</body>
  104. </html>

四、表单1

1.交互 用户与服务器端进行数据交互的功能。

2.概述  

   1.form 表单

            2.属性
              ① action 表示向何处提交表单数据。
              ② method ：表示表单提交的请求方式：
                     get：默认方式,在地址栏进行数据的传递。格式： ?参数=参数值&参数1=参数值1
                                用途：超链接、搜索
                     post： 传递表单数据在请求体中，安全性高，数据无限制
                                用途：居多，注册 登录
            3.input元素：type
               ① text :文本框
               ② password ：密码框
               ③ submit：提交按钮
            4.属性：
              name ：用来在服务器端标识用户提交的数据的。

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 	</head>
  7. 	<body>
  8. 		<!--表单概述
  9. 			1.form 表单
  11. 			2.属性
  12. 			  ① action 表示向何处提交表单数据。
  13. 			  ② method ：表示表单提交的请求方式：
  14. 			         get：默认方式,在地址栏进行数据的传递。格式： ?参数=参数值&参数1=参数值1
  15. 			                            用途：
  16. 			             	 超链接、搜索
  17. 			         post： 传递表单数据在请求体中，安全性高，数据无限制
  18. 			                              用途：
  19. 			                                          居多，注册 登录
  20. 			3.input元素：type
  21. 			   1》 text :文本框
  22. 			   2》 password ：密码框
  23. 			   3》submit：提交按钮
  24. 			4.属性：
  25. 			  name ：用来在服务器端标识用户提交的数据的。
  26. 		-->
  27. 		<form action="index.html" method="post">
  28. 			用户名:<input type="text"  name="username"/>
  29. 			<br />
  30. 			密码: <input type="password" name="psw"/>
  31. 			<br />
  32. 			手机号：<input type="text" />
  33. 			<br />
  34. 			<input type="submit" />
  35. 		</form>
  36. 	</body>
  37. </html>

五、表单2

1.表单input type
                1>.button  按钮:与submit的区别在于，该按钮点击不会自动提交表单。
                2>.checkbox  复选框 如果需要向服务器传值，必须提供name和value值。
                      属性： checked="checked" 表示默认选中。
                3>. file:表示文件上传
                4>. hidden  表示隐藏域
                   通途： 当不希望在页面显示，但是有必须传递给服务器的数据。
                   属性：name value
2.属性
               value ：对于输入型的，value就是输入在表单中的内容。
                            对于非输入型的，value值需要给定。

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 	</head>
  7. 	<body>
  8. 		<!--1.表单input type
  9. 				1>.button  按钮:与submit的区别在于，该按钮点击不会自动提交表单。
  10. 				2>.checkbox  复选框 如果需要向服务器传值，必须提供name和value值。
  11. 				      属性：
  12. 				       checked="checked" 表示默认选中。
  13. 				3>. file:表示文件上传
  14. 				4>. hidden  表示隐藏域
  15. 				   通途： 当不希望在页面显示，但是有必须传递给服务器的数据。
  16. 				  属性：
  17. 				    name value
  18. 			2.属性
  19. 			   value ：对于输入型的，value就是输入在表单中的内容。
  20. 			                            对于非输入型的，value值需要给定。
  21. 		-->
  22. 		<form action="">
  23. 			用户名 ：<input type="text" name="username" />
  24. 			<br />
  25. 			<input type="button" value="点我打开百度"/>
  26. 			<br />
  27. 			爱好：
  28. 			打篮球 <input type="checkbox" name="hobby" value="playbasketball" checked="checked"/>
  29. 			<!--如果属性与属性值相同，在h5以后，支持只写一个-->
  30. 			踢足球 <input type="checkbox" name="hobby" value="football" checked/>
  31. 			打排球 <input type="checkbox" name="hobby" value="volleyball"/>
  32. 			<br />
  33. 			请上传照片：
  34. 			<input type="file" name="filename" />
  35. 			<br />
  36. 			这是一个隐藏域 
  37. 			<input type="hidden" name="idname" value="kk"/>
  38. 			<input type="submit" value="提交" />
  39. 		</form>
  40. 	</body>
  41. </html>

六、表单3

表单项:input
            1.image 图片域:具有提交表单的功能
                注意：必须有src的属性。
            2.radio  单选框
              注意：
               ①单选框必须作为同一个按钮组，才可以互斥操作。
                   加入同一个按钮组，name属性必须相同。
               ② 默认被选中，属性 checked
            3.reset 重置

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 	</head>
  7. 	<body>
  8. 		<!--表单项:input
  9. 			1.image 图片域:具有提交表单的功能
  10. 			    注意：
  11. 			     必须有src的属性。
  12. 			2.radio  单选框
  13. 			  注意：
  14. 			   1>单选框必须作为同一个按钮组，才可以互斥操作。
  15. 			   	加入同一个按钮组，name属性必须相同。
  16. 			   2> 默认被选中，属性 checked
  17. 			3.reset 重置
  18. 		-->
  19. 		<form action="">
  20. 			用户名 : <input type="text" />
  21. 			<br />
  22. 			<br />
  23. 			性别：
  24. 			男 <input type="radio" name="sex"  checked="checked"/>
  25. 			女 <input type="radio"  name="sex" />
  26. 			<br />
  27. 			<br />
  28. 			<input type="image" src="img/7.jpg" width="300px"/>
  29. 			<input type="submit" />
  30. 			<input type="reset" />
  31. 		</form>
  32. 	</body>
  33. </html>

其它表单项
            1.下拉列表框：
             select > option
               注意：
                ① multiple 可以显示多个列表项
                ② size 表示可以显示的个数。
            2.文本域：
               textarea
              注意：
                ① cols 表示列
                ② rows 表示行
                ③ 只读 ： readonly="readonly"

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 	</head>
  7. 	<body>
  8. 		<!--其它表单项
  9. 			1.下拉列表框：
  10. 			 select > option
  11. 			   注意：
  12. 			    ① multiple 可以显示多个列表项
  13. 			    ② size 表示可以显示的个数。
  14. 			2.文本域：
  15. 			   textarea
  16. 			  注意：
  17. 			    ① cols 表示列
  18. 			    ② rows 表示行
  19. 			    ③ 只读 ： readonly="readonly"
  20. 		-->
  21. 		<form action="">
  22. 			请选择国籍：
  23. 			<select name="country" multiple="multiple" size="2">
  24. 				<option value="0">------请选择-------</option>
  25. 				<option value="1">中国</option>
  26. 				<option value="2">日本</option>
  27. 				<option value="3">美国</option>
  28. 			</select>
  29. 			请选择省份
  30. 			<select name="city" id="">
  31. 				<option value="0">-------请选择--------</option>
  32. 				<option value="1">北京</option>
  33. 				<option value="2">四川</option>
  34. 				<option value="3">上海</option>
  35. 			</select>
  36. 			<br />
  37. 			<!--文本域-->
  38. 			自我介绍：
  39. 			<br />
  40. 			<textarea name="" id="" cols="100" rows="100" readonly="readonly">
  41. 				 xxxx须知
  42. 				 请同意
  43. 			</textarea>
  44. 			<br />
  45. 			<input type="submit" value="提交"/>
  46. 		</form>
  47.  
  48. 	</body>
  49. </html>

七、框架集

框架集
            1.作用：可以让一个窗体被切割成多个窗口，显示多个页面。
            2.frameset 框架集的外层标签，拆分窗体
            3.注意： frameset在使用时，不能放置在body中，一般放置在head和body之间。
            4.frameset的属性：
               ① cols：垂直拆分。
               ② rows：水平拆分
                取值： % 、 px、* 表示除了上面的 ，剩下的部分
            5.frame表示链接的窗体页面。其中src表示链接的页面。
            6.如果想在某个窗体中打开的页面，需要给定name属性，通过target属性指名在哪个frame中打开。
            总结：
              ① 要想拆分窗体：
                  frameset  cols rows
                            每一个窗体
                  frame  src
              ② 对于页面存在链接的，如果需要在某一个框架集的窗体中打开，需要指名该窗体的名称，通过超链接的 target属性进行设置。

框架集首页代码：

  1. <frameset rows="150px,*">
  2. 	  		<frame src="left.html" />
  3. 	  		<frame src="right.html" name="bottom" />
  4. 	  	</frameset>

框架集上半部分代码 ：

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 	</head>
  7. 	<body>
  8. 		<h1 align="center">欢迎光临某某网站</h1>
  9. 		<h6 align="right"><a href="登录.html" target="bottom">登录</a></h6> 
  10. 		<h6 align="right"><a href="注册.html" target="bottom">注册</a></h6>
  11. 	</body>
  12. </html>

2.框架集补充细节：

          ①.noresize：无法重置框架
          ②.border：0 表示去除边框

  1. <frameset rows="20%,*" border="0px"  >
  2. 			<frame  src="" noresize="noresize"/>
  3. 			<frameset cols="20%,*"  >
  4. 				<frame />
  5. 				<frame />
  6. 			</frameset>
  7. 	</frameset>

浮动框架：iframe ：画中画

<iframe src="index.html" frameborder="1px"></iframe>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/110385
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号