HTML基本标签

最新推荐文章于 2024-06-16 20:45:59 发布

嘴强程序员

最新推荐文章于 2024-06-16 20:45:59 发布

阅读量246

点赞数

文章标签： html webview 前端

本文链接：https://blog.csdn.net/qq_62898618/article/details/122282025

版权

本文介绍了HTML的基础架构，包括常用的元素如`<br>`、`<hr>`、`<font>`、`<h1-h6>`等。重点讲解了超链接`<a>`的使用，包括`href`属性和`target`属性。还涵盖了文件路径的绝对路径和相对路径，锚链接的使用，特殊符号的表示，以及表单元素`<input>`的类型。同时，展示了图片`<img>`标签的使用，如何设置标题和大小，以及如何创建和使用表单。

摘要由CSDN通过智能技术生成

今日类容

1.课前回顾
1.1 html的基本架构：html,head,body
1.1 常用标签：br、hr、font、h1-h6、p、ul、ol、img、marquee等等。

2.今日新课内容

2.1 超链接的使用 <a>
   2.1.1 属性href：超链接地址

   2.1.2 可以本地之间的跳转也可以网页之间的跳转

   2.1.3 属性:target：跳转模式--
       _blank:新窗口
       _self: 本窗口（默认）

2.2 文件的绝对路径和相对路径的使用
       2.2.1 绝对路径：完整的地址（路径）
       2.2.2 相对路径：
           ** html文件与图片处于同一目录下
           ** 图片在html文件的上级目录
           ** 图片在html文件的下级目录
               ** 图片在html文件的上上级目录

2.3 锚链接(页面间，跨页面调用锚链接)===跳转页面后加上#名称

2.4 特殊符号(版权（&copy），大于(&gt)，小于(lt)，双引(&quot)，空格(&nbsp))

2.5表单(***)
   <input type = "">
   type="Text" 可选值为 Text, Radio,Checkbox, Password, Submit/Reset, Image, File, Hidden, Button

1.图片标签的使用 img标签

	<html>
	<head>
	<title></title>
	<meta charset = "utf-8"/>
	</head>
	<body>
	<!--
	1.图片标签的使用
	img标签

	属性：src属性----图片的地址
	src（1）绝对路径（2）相对路径（3）网络路径

	(1)绝对路径
	路径上指定了盘符
	D:\\images\\1.jpg
	E:\\1.jpg

	(2)相对路径
	a.网页文件与图片文件处于同目录下。
	图片名称.jpg

	b.网页文件与装有图片的文件夹处于同目录下
	D:\\html_02\\1.html
	D:\\html_02\\img\\1.jpg

	路径： img\\1.jpg

	c.图片文件与装有网页文件夹处于同目录下

	../ 退回上一级目录


	(3)网络路径
	-->
	<img src = "D:\\1.jpg"/>
	<!-- a.网页文件与图片文件处于同目录下。 -->
	<img src = "2.jpg"/>
	<!-- b.网页文件与装有图片的文件夹处于同目录下-->
	<img src = "img\\3.jpg"/>

	<img src = "https://tse1-mm.cn.bing.net/th/id/R-C.c77feee8572a809f826b1c07de7e9b92?rik=aGGJo0MAyZtRqA&riu=http%3a%2f%2fwww.yymeitu.com%2fupload%2f49210%2f2019%2f06-19%2f20190619140710_9177xpipoqny_small.jpg&ehk=3NST%2bzfLo7hvpiHbQKhQJRsqlppphNNDUBGWpjR7dVc%3d&risl=&pid=ImgRaw&r=0"/>


<html>
	<head>
		<title></title>
		<meta charset = "utf-8"/>
	</head>
	<body>
		<!--
			1.图片标签的使用
				img标签
				
				属性：src属性----图片的地址
					src（1）绝对路径（2）相对路径（3）网络路径
					
				(1)绝对路径
					路径上指定了盘符
					D:\\images\\1.jpg
					E:\\1.jpg
				
				(2)相对路径
					a.网页文件与图片文件处于同目录下。
						图片名称.jpg
					
					b.网页文件与装有图片的文件夹处于同目录下
						D:\\html_02\\1.html
						D:\\html_02\\img\\1.jpg
						
						路径： img\\1.jpg
						
					c.图片文件与装有网页文件夹处于同目录下
					
						../  退回上一级目录
						
						
				(3)网络路径
		-->	
		<img src = "D:\\1.jpg"/>
		<!-- a.网页文件与图片文件处于同目录下。 -->
		<img src = "2.jpg"/>
		<!-- b.网页文件与装有图片的文件夹处于同目录下-->
		<img src = "img\\3.jpg"/>
		
		<img src = "https://tse1-mm.cn.bing.net/th/id/R-C.c77feee8572a809f826b1c07de7e9b92?rik=aGGJo0MAyZtRqA&riu=http%3a%2f%2fwww.yymeitu.com%2fupload%2f49210%2f2019%2f06-19%2f20190619140710_9177xpipoqny_small.jpg&ehk=3NST%2bzfLo7hvpiHbQKhQJRsqlppphNNDUBGWpjR7dVc%3d&risl=&pid=ImgRaw&r=0"/>
		
		
	</body>


</html>

2.给img标签设置标题和大小


<html>
	<head>
		<title></title>
		<meta charset = "utf-8"/>
	</head>
	<body>
		<!--
			img标签的属性大全
				宽度  width
				高度  height
				标题  title
				提示  alt
				border  边框
		
		-->
		
		<img border = "10" alt = "呵呵，图片加载失败" title = "这是一个帅哥" src = "4.jpg" width = "200" height = "200"/>
		
		
		
	</body>


</html>

2.超链接的使用


<html>
	<head>
		<title></title>
		<meta charset = "utf-8"/>
	</head>
	<body>
		<!--
			超链接的使用
				a标记
			语法：
				<a>提示文本</a>
			借助一个属性才能实现跳转
				href属性----》链接地址
			
			地址：
				本地地址
				网络地址
			
			
			目标属性  target
				_self   默认  本窗口打开
				_blank    新窗口打开
		
		-->
		
		<!-- 本地地址 -->
		<a href = "1.html">跳转到小电影网站</a>
		<br/>
		<!-- 网络地址 -->
		<a href = "http://www.baidu.com">百度一下</a>
		<br/>
		<a href = "http://www.4399.com">百度一下</a>
		<br/>
		<a target = "_blank" href = "http://www.80s.cn">小电影网站</a>
		
	</body>


</html>

3.锚点连接的使用！！


<html>
	<head>
		<title></title>
		<meta charset = "utf-8"/>
	</head>
	<body>
		<!--
			锚链接的使用
				通过a标签实现。
				必须要设置锚点才能实现跳转到指定的位置
			
			点击一个文本或者按钮可以跳转到指定网页的位置
		
			步骤：
				1.在指定的位置设置锚点标记
					<a id = "sb"></a>
		
				2.在指定的a标签上设置跳转的锚点即可。
					<a href = "#sb">跳转到指定的锚点</a>
		
		-->
		<!-- 设置锚点 -->
		<a id = "dengyankang"></a>
		<script>
			for(var i = 0;i<=100;i++){
				document.write(i+"<br/>");
			}
		</script>
		
		<a href = "#dengyankang">返回顶部</a>
		
		
		

		
	</body>


</html>

4.模拟小说标题


<html>
	<head>
		<title></title>
		<meta charset = "utf-8"/>
	</head>
	<body>
		<h1>章游爱上霸道女总裁</h1>
		<ul>
			<li><a href = "#1">第1章节 监狱风云</a></li>
			<li><a href = "#2">第2章节 章游逃狱</a></li>
			<li><a href = "#3">第3章节 赶往机场</a></li>
			<li><a href = "#4">第4章节 偶遇小红</a></li>
			<li><a href = "#5">第5章节 一起出国</a></li>		
		</ul>
		<hr/>
		<a id = "1"></a>
		<h2>第1章节 监狱风云</h2>
		<script>
			for(var i = 0;i<=100;i++){
				document.write(i+"<br/>");
			}
		</script>
		<a id = "2"></a>
		<h2>第2章节 章游逃狱</h2>
		<script>
			for(var i = 0;i<=100;i++){
				document.write(i+"<br/>");
			}
		</script>
		<a id = "3"></a>
		<h2>第3章节 赶往机场</h2>
		<script>
			for(var i = 0;i<=100;i++){
				document.write(i+"<br/>");
			}
		</script>
		<a id = "4"></a>
		<h2>第4章节 偶遇小红</h2>
		<script>
			for(var i = 0;i<=100;i++){
				document.write(i+"<br/>");
			}
		</script>
		<a id = "5"></a>
		<h2>第5章节 一起出国</h2>
		<script>
			for(var i = 0;i<=100;i++){
				document.write(i+"<br/>");
			}
		</script>
	</body>


</html>

4.换页锚点事件


<html>
	<head>
		<title></title>
		<meta charset = "utf-8"/>
	</head>
	<body>
		<h1>章游爱上霸道女总裁</h1>
		<ul>
			<li><a href = "7.html#1">第1章节 监狱风云</a></li>
			<li><a href = "7.html#2">第2章节 章游逃狱</a></li>
			<li><a href = "7.html#3">第3章节 赶往机场</a></li>
			<li><a href = "7.html#4">第4章节 偶遇小红</a></li>
			<li><a href = "7.html#5">第5章节 一起出国</a></li>		
		</ul>

	
	</body>


</html>

4.1 实现页


<html>
	<head>
		<title></title>
		<meta charset = "utf-8"/>
	</head>
	<body>
		<a id = "1"></a>
		<h2>第1章节 监狱风云</h2>
		<script>
			for(var i = 0;i<=100;i++){
				document.write(i+"<br/>");
			}
		</script>
		<a id = "2"></a>
		<h2>第2章节 章游逃狱</h2>
		<script>
			for(var i = 0;i<=100;i++){
				document.write(i+"<br/>");
			}
		</script>
		<a id = "3"></a>
		<h2>第3章节 赶往机场</h2>
		<script>
			for(var i = 0;i<=100;i++){
				document.write(i+"<br/>");
			}
		</script>
		<a id = "4"></a>
		<h2>第4章节 偶遇小红</h2>
		<script>
			for(var i = 0;i<=100;i++){
				document.write(i+"<br/>");
			}
		</script>
		<a id = "5"></a>
		<h2>第5章节 一起出国</h2>
		<script>
			for(var i = 0;i<=100;i++){
				document.write(i+"<br/>");
			}
		</script>

	
	</body>


</html>

5.介绍各种标签的使用！


<html>
	<head>
		<title></title>
		<meta charset = "utf-8"/>
	</head>
	<body>
		<!-- 
			表单标记
				类似Swing中的基础组件（标签，按钮，输入框，密码框，单选框，复选框，文件选择器，下拉框等等）
		
			实现表单的父标记是   form    
			
				字体标签  label
				
				input标签
					指代文本框，密码框，单选框，复选框，提交按钮，重置按钮，隐藏按钮等等
						怎么区分？通过一个属性区分  type
						
						
			form标签上的2个属性
				action: 提交的地址
					专门将表单中的标签上输入的值传输到另外一个页面中去判断和获取。
				
				method	提交的请求方式
				
						get请求方式  数据暴露  不安全   数据大小有限制
						post请求方式 数据不暴露  安全
  				
		
		-->
		
		<h1>用户注册</h1>
		<form action = "3.html" method = "get">
			<label>账户</label>
			<!-- 文本框 -->
			<input type = "text" name = "username"/>
			<br>
			<label>密码</label>
			<input type = "password" name = "password"/>
			<br/>
			<label>性别</label>
			<!-- radio 单选框   实现分组才能选一个 -->
			<!-- 分组  就是在指定的单选框标签中设置同一个属性及值即可  name属性 -->
			<input type = "radio" name = "sex" value = "男" />男
			<input type = "radio" name = "sex" value = "女"/>女
			<br/>
			<label>爱好</label>
			<input type = "checkbox" value = "打豆豆"/>打豆豆
			<input type = "checkbox" value = "打康康"/>打康康
			<input type = "checkbox" value = "打往往"/>打往往
			<input type = "checkbox" value = "打飞飞"/>打飞飞
			<br.>
			<!-- 下拉框  select 子选项  option-->
			地址
			<select>
				<option value = "湖南省">湖南省</option>
				<option value = "湖南省">湖南省</option>
				<option value = "湖南省">湖南省</option>
				<option value = "湖南省">湖南省</option>
				<option value = "湖南省">湖南省</option>
			</select>
			
			<br/>
			<!-- 普通按钮 input-->
			<input type = "button" value = "登录"/>
			
			<!-- 提交按钮，专门将表单中的数据提交到另外的地方做判断-->
			<input type = "submit" value = "这是刘凯峰" />
			<!-- 重置 -->
			<input type = "reset" value = "砍死我"/>
			<!-- 按钮（图片） -->
			<input type = "image" src = "3.jpg"/>
			<!-- 隐藏域按钮 特点：不会在页面显示，源代码中可以看到，作用：偷偷的传值-->
			<input type = "hidden" value = "admin"/>
			
			<!-- 文件选择器 -->
			<input type = "file"/>
			
			<br>
			
			备注
			<textarea rows = "10" cols = "10">
			
			
			</textarea>
		</form>
		
		
	</body>


</html>

5.1给账号或密码栏设置提示输入文字自动清除

<input type="text" placeholder="请输入账号" style="width: 260px; "/>

5.2禁止某些组件的更改

<!-- 禁用按钮 -->
		&nbsp;<input disabled="false" type="submit"  value="提交" />