HTML-老杜-笔记

最新推荐文章于 2023-03-11 07:17:56 发布
最新推荐文章于 2023-03-11 07:17:56 发布
阅读量613 收藏 22
点赞数 4
分类专栏： HTML 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yiersano/article/details/125023000
版权

HTML

文章目录

1、系统结构：

B/S架构：
Browser / Server （浏览器/服务器的交互形式。）
Browser支持哪些语言：HTML CSS JavaScript
S是服务器端Server，Server端的语言很多：C C++ Java python…

B/S架构的系统有什么优点和缺点？
优点：升级方便，只升级服务器端代码即可。维护成本低。
缺点：速度慢、体验不好、界面不炫酷
B/S架构的系统有哪些代表？
京东百度天猫

C/S架构
Client / Server （客户端/服务器端的交互形式。）

缺点：升级麻烦，维护成本较高。
优点：速度快，体验好，界面炫酷。（娱乐型的系统多数是C/S架构的。）
常见的C/S架构的系统：
QQ微信支付宝

2、什么是HTML？怎么开发HTML？怎么运行HTML？

* HTML: Hyper Text Markup Language （超文本标记语言）
	由大量的标签组成，每一个标签都有开始标签和结束标签。
	<标签>
		<标签>
			<标签 属性名="属性值" 属性名="属性值">
			</标签>
		</标签>
	</标签>

	超文本: 流媒体、图片、声音、视频....

* HTML开发的时候使用普通的文本编辑器就行，创建的文件扩展名是.html或者.htm
HTML也有专业的开发工具，例如：DreamWeaver、HBuilder.....

* 直接采用浏览器打开HTML文件就是运行。

3、HTML是谁制定的？

W3C：世界万维网联盟
W3C制定了HTML的规范，每个浏览器生产厂家都会遵守规范。HTML程序员也会按照这个规范去写代码。
HTML规范目前最高的版本是：HTML5.0，简称H5.

W3C制定了很多规范：
HTML/XML/http协议/https协议…

为了方便中国web前端程序员的开发，提供大量的帮助文档。为开发提供方便。
w3school:先出现的，和W3C没有关系
w3cschool：后出现的，和W3C没有关系

4、HTML格式

<!--
	1、这是HTML的注释
	2、加上以下代码的第一行就表示HTML5语法。去掉就表示HTML4.0
	3、HTML不区分大小写，语法松散不严格。
-->
<!doctype html>

<!--根-->
<html>

	<!--头-->
	<head>
		<!--网页标题，显示在网页左上角-->
		<title>网页的标题</title>
	</head>

	<!--体-->
	<body>
		网页的主体内容，欢迎学习HTML！
	</body>

<!--
</HTML>
-->
<!--
</Html>
-->

5、HTML基本标签

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>HTML的基本标签</title>
 </head>
 <body>
  <!--段落标签 -->
  <p>《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。</p>
  <p>《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。</p>
	<!--标题字 -->
	<h1>一级标题</h1>
	<h2>二级标题</h2>
	<h3>三级标题</h3>
	<h4>四级标题</h4>
	<!--换行,br是一个独目标记 -->
	hello <br>world！
	
	<!-- 横线-->
	<hr>
	<!-- 横线设置颜色宽度 -->
	<!--color和width都是hr标签的属性-->
	<hr color = "red" width = "50%">
	<!--语法太松散了。-->
	<hr color='green' width=30%>
	<!--预留格式-->
		<pre>
		for(int i = 0; i < 10; i++){
			System.out.println("i = " + i);
		}
		</pre>
	<del>删除字</del>
	<ins>插入字</ins>
	<b>粗体字</b>
	<i>斜体字</i>
	<!-- 右上角加字 10^2-->
	10<sup>2</sup>
	<!-- 右下角加字 102-->
	10<sub>m</sub>
	<!--字体标签-->
	<font color="red" size="50">字体标签</font>
 </body>
</html>

效果：
在这里插入图片描述

6、实体符号

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>实体符号</title>
 </head>
 <body>
   <!--10 < 2 100 > 10-->
   b < a > c
   <br> b<a>c
   <br> b&lt;a&gt;c
	<!-- 实体符号特点是：以&开始，以;结束。&lt; 是小于号   &gt; 是大于号 -->
    <!-- 空格 -->
	<br>啊    b
	<br> a&nbsp;&nbsp;&nbsp;b
	<!-- 一个&nbsp;代表一个空格 -->
 </body>
</html>

效果
在这里插入图片描述

7、表格

7.1建表

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>表格</title>
 </head>
 <body>
 <!-- tr是一行 td是一格 -->
 <!-- 三行三列 -->
 <!--
			border="1px" 设置表格的边框为1像素宽度。
			width 宽度
			height 高度
-->
<!--align对齐方式-->
<br><br><br><br><br><br><br><br> <!-- 换行 -->
<center><h1>员工信息列表</h1></center>
<hr>
   <table align = "center" border="1px" width="30%" hight="150">
	   <tr align = "center">
	   		<td>a</td>
			<td>b</td>
			<td>c</td>
	   </tr>
	   <tr>
	   		<td>d</td>
			<td>e</td>
			<td>f</td>
	   </tr>
	   <tr>
	   		<td>x</td>
			<td>y</td>
			<td align = "center">z</td>
	   </tr>
   </table>
 </body>
</html>

效果：
在这里插入图片描述

7.2、表格合并

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>单元格合并,以及th标签</title>
 </head>
 <body>
 <!--注意事项：
			1、row合并的时候，删除“下面的”单元格 行合并
			2、col合并的时候，对删除哪个没有要求 列合并
-->
  <table align = "center" border="1px" width="50%" hight="150">
  		<!--
		<td>员工编号</td>
		<td>员工薪资</td>
		<td>部门名称</td>
		-->
		<!-- th 标签也是单元格标签，比td多的是居中、加粗。-->
		<th>员工编号</th>
		<th>员工薪资</th>
		<th>部门名称</th>
	   <tr>
	   		<td>a</td>
			<td>b</td>
			<td>c</td>
	   </tr>
	   <tr>
	   		<td>d</td>
			<td>e</td>
			<td rowspan="2">fz</td>
	   </tr>
	   <tr>
	   		<!--
			<td>x</td>
			-->
			<td colspan = "2">xy</td>
			<!--
				<td>z</td>
			-->
	   </tr>
   </table>
 </body>
</html>

效果
在这里插入图片描述

7.3、thead tbody tfoot

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>thead tbody tfoot 在table中不是必须的，只是这样做便于后期的JS代码的编写。</title>
 </head>
 <body>
    <table border="1px" width="50%" hight="150">
		<!--头-->
  		<thead>
			<th>员工编号</th>
			<th>员工薪资</th>
			<th>部门名称</th>
		</thead>
		<!--体-->
		<tbody>
			   <tr>
					<td>a</td>
					<td>b</td>
					<td>c</td>
			   </tr>
			   <tr>
					<td>d</td>
					<td>e</td>
					<td rowspan="2">fz</td>
			   </tr>
		</tbody>
		<!--脚-->
		<tfoot>
			   <tr>
					
					<td colspan = "2">xy</td>
					
			   </tr>
		
	   </tfoot>
   </table>
 </body>
</html>

效果：
在这里插入图片描述

8、背景图片和颜色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景颜色和背景图片</title>
	</head>
	<!--
		bgcolor : 设置背景色
		background : 设置背景图片
		以上的设置都是对背景进行设置。
		-->
	<body bgcolor="aliceblue" background="img/123.jpg">
		
	</body>
</html>

效果：
在这里插入图片描述

9、图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片</title>
	</head>
	<body>
		<!--
			1、设置图片宽度和高度的时候，只设置宽度，高度会进行等比例缩放。
			2、img标签就是图片标签
			3、src属性是图片的路径
			4、width设置宽度,height设置高度
			5、title设置鼠标悬停时显示的信息。
			6、alt设置图片加载失败时显示的提示信息。
		-->
		<img src="img/1123.jpg" width="100" title="这是一个图片" alt="图片找不到"/>
		<br> <br> <br> 
		<img src="img/123.jpg" width="100" title="这是一个图片" alt="图片找不到"/>
	</body>
</html>

效果：
在这里插入图片描述

10、超链接 热链接

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>超链接 热链接</title>
	</head>
		<!--
			超链接的特点：
				有下划线
				鼠标停留在超链接上面显示小手形状。
				点击超链接之后还能跳转页面。
		-->
	<body>
		<!--加入超链接-->
		<a href = "http://www.baidu.com">百度</a>
		<a href = "http://www.jd.com">京东</a>
		<br /><br /><br />
		<!--
			href：hot references 热引用
			href属性后面一定是一个资源的地址。
			
			href后面的路径可以是绝对路径也可以是相对路径，可以是网络中某个资源的路径，也可以是本地资源的路径。
		-->
			<a href="007-背景颜色和图片.html">007</a>	
			
		<!--图片超链接-->
		<br /><br /><br />
		<a href="007-背景颜色和图片.html">
			<img src="img/123.jpg" width="100" />
		</a>
		
		<!-- 属性 -->
		<!--
			超链接有一个target属性：
				可取值：
					_blank : 新窗口
					_self ： 当前窗口（默认就是这种方式。）
					_top ： 顶级窗口
					_parent ： 父窗口
		-->		
		<br /><br /><br />
		<a href="007-背景颜色和图片.html" target="_blank">
			<img src="img/123.jpg" width="100" />
		</a>
	</body>
</html>

超链接的作用：
通过超链接可以从浏览器向服务器发送请求。
浏览器向服务器发送数据（请求：request）
服务器向浏览器发送数据（响应：response）

B/S结构的系统：每一个请求都会对应一个响应。

用户点击超链接和用户在浏览器地址栏上直接输入URL，有什么区别？
本质上没有区别，都是向服务器发送请求。
从操作上来讲，超链接使用更方便。
效果：
在这里插入图片描述

11、列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表</title>
	</head>
	<body>
		
		<!--无序列表 -->
		<ol type="A">
			<li>水果
				<ol type="i">
					<li>苹果</li>
					<li>香蕉</li>
					<li>甜瓜</li>

				</ol>
			</li>
			<li>蔬菜</li>
			<li>炒菜</li>
		</ol>
		<!-- 有序列表-->
		<ul type="circle">
			<li>小学
				<ul type="disc">
					<li>北京
						<ul type="square"
							<li>1</li>
							<li>1</li>
							<li>1</li>
						</ul>
					</li>
					<li>上海</li>
				</ul>
			</li>
			<li>初中</li>
			<li>高中</li>
		</ul>
	</body>
</html>

效果：
在这里插入图片描述

12、表单行

12.1、创建表单及提交

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单</title>
	</head>
		<!--
			1、表单有什么用？
				收集用户信息。表单展现之后，用户填写表单，点击提交按钮提交数据给服务器。
			2、怎么画一个表单？
				使用form标签画表单。
			3、一个网页当中可以有多个表单form。
			4、表单最终是需要提交数据给服务器的，form标签有一个action属性，这个属性用来指定服务器地址：
				action属性用来指定数据提交给哪个服务器。
				action属性和超链接中的href属性一样。都可以向服务器发送请求（request）
			5、http://192.168.111.3:8080/oa/save 这是请求路径，表单提交数据最终提交给：
				192.168.111.3机器上的8080端口对应的软件。
		-->	
	<body>
		<form action="http://192.168.111.3:8080/oa/save">
			<!-- 画一个提交按钮，这个按钮可以提交表单-->
			<!-- 画按钮可以使用input输入域，type="submit"的时候表示该按钮是一个提交按钮，具有提交表单的能力。-->
			<!-- 对于按钮来说，按钮的value属性用来指定按钮上显示的文本信息。默认是“提交”-->
			<input type="submit" value="注册"/>
			<!--这是一个普通按钮，不具备提交表单的能力。-->
			<input type="button" value="设置按钮上的显示"/>
		</form>
		
		<br /><br /><br />
		<!--这个按钮和普通的超链接没什么太大的区别。（超链接和表单都可以向服务器发送请求，只不过表单发送请求的同时可以携带数据。）-->
			<a href="http://www.baidu.com">百度</a>
			<form action="http://www.baidu.com">
				<input type="submit" value="百度"/>
			</form>
		<br /><br /><br />
		<form action="http://localhost:8080/login">
			登录<input type="text" /><br>
			密码<input type="password" /><br>
			<input type="submit" value="登录" />
		</form>
		
		<br /><br /><br />
		<!-- 放在表格中 -->
		<!--
			表单是以什么格式提交数据给服务器的？
				http://localhost:8080/login?username=abc&userpwd=111
				格式：action?name=value&name=value&name=value&name=value&name=value...
				W3C的HTTP协议规定的，必须以这种格式提交给服务器。
			
			重点强调：表单项写了name属性的，一律会提交给服务器。不想提交这一项，就不要写name属性。
			
			文本框和密码框的value不需要程序员指定，用户输入什么value就是什么。
			
			当name没有写的时候，该项不会提交给服务器。
			但是当value没有写的时候，value的默认值是空字符串""，会将空字符串提交给服务器。java代码得到的是：String username = "";
		-->
		<form action="http://localhost:8080/login">
		<table border="1px">
			<tr>
				<td>用户名</td>
				<td><input type="text" name="username"/></td>
			</tr>
			<tr>
				<td>密码</td>
				<td><input type="password" name="userpwd"/></td>
			</tr>
			<tr align="center">
				<td colspan="2">
					<input type="submit" value="登录" />
					&nbsp;&nbsp;&nbsp;
					<input type="reset" value="清空">
				</td>
				<!-- <td></td> -->
			</tr>
		</table>
		</form>
	</body>
</html>

效果：
在这里插入图片描述
http://localhost:8080/login?username=111&userpwd=123

12.2、用户注册页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户注册</title>
	</head>
			<!--
			用户注册：
				用户名
				姓名
				密码
				确认密码
				性别
				兴趣爱好
				学历
				简介
			
			form表单method属性：
				get:采用get方式提交的时候，用户提交的信息会显示在浏览器的地址栏上。
				post：采用post方式提交的时候，用户提交的信息不会显示在浏览器地址栏上。
				当用户提交的信息中含有敏感信息，例如：密码，建议采用post方式提交。
			
			method属性不指定，或者指定get，这种情况下都是get。
			只有当method属性指定为post的时候才是post请求。
			剩下所有的请求都是get请求。
			
			post提交的时候提交的数据格式和get还是一样的，只不过不再地址栏上显示出来。
			POST提交的数据还是：name=value&name=value&name=value.....
		-->
	<body>
		<form action="http://localhost:8080/register" method="get">
			用户名
			<input type="text" name="username" />
			<br />
			密码
			<input type="password" name="userpwd" />
			<br />
			确认密码
			<input type="password" />
			<br /> 
			性别 <!-- 单选 -->
			<input type="radio" name="gender" value="1"/>男
			<input type="radio" name="gender" value="2" checked />女 <!--单选按钮的value必须手动指定-->
			<!-- checked默认选中 -->
			<br /> 
			兴趣爱好 <!-- 多选 -->
			<input type="checkbox" name="interest" value="study1" checked />学习
			<input type="checkbox" name="interest" value="study2"/>学习
			<input type="checkbox" name="interest" value="study3" />学习
			<br /> 
			学历 <!-- 选项 -->
			<select name="grade">
				<option value="gz" selected >高中</option> <!-- selected默认选中 -->
				<option value="cz">初中</option>
				<option value="xx">小学</option>
			</select>
			<br />
			简介 <!-- 文本域,没有value属性 -->
			<textarea rows="10" cols="50" name="introduce"></textarea>
			<br />
			<input type="submit" value="登录" />
			&nbsp;&nbsp;&nbsp;
			<input type="reset" value="清空">
		</form>
		
		<!--超链接也可以提交数据给服务器，但是提交的数据都是固定不变的。-->
		<!--超链接是get请求。不是post请求。-->
		<a href="http://localhost:8080/oa/save?username=zhangsan&password=111">提交</a>
	</body>
</html>

效果：
在这里插入图片描述

http://localhost:8080/register?username=111&userpwd=123&gender=2&interest=study1&grade=gz&introduce=%E5%93%88%E5%93%88%E5%93%88%E5%93%88%E5%93%88

12.3、下拉列表支持多选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>下拉列表支持多选</title>
	</head>
	<body>
		<form>
			<select multiple="multiple" size="2"> <!-- size设置选择个数 -->
				<option>1111</option>
				<option>2222</option>
				<option>3333</option>
				<option>4444</option>
				<option>5555</option>
			</select>
		</form>
	</body>
</html>

效果
（按着ctrl可以多选）
在这里插入图片描述

12.4、file控件，hidden控件

<<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>file控件</title>
	</head>
	<body>
		<!--file控件：文件上传专用。-->
		<input type="file" />
		
		<form action="http://localhost:8080/save">
			<!--隐藏域：网页上看不到，但是表单提交的时候数据会自动提交给服务器。-->
			<input type="hidden" name="userid" value="111"/>
			
			用户代码<input type="text" name="usercode"/>
			
			<input type="submit" value="提交"/>
		</form>
	</body>
	
</html>

效果
在这里插入图片描述
在这里插入图片描述
hidden：
http://localhost:8080/save?userid=111&usercode=111

12.5 、readonly和disabled控件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>readonly disabled</title>
	</head>
	<body>
		<!--
			readonly和disabled相同点：都是只读不能修改。
			但是readonly可以提交给服务器，disabled数据不会提交（即使有name属性也不会提交。）
		-->
		<form action="http://localhost:8080/save">
			用户代码<input type="text" name="usercode" value="1111" vareadonly="readonly"/>
			<br>
			用户姓名<input type="text" name="username" value="2322" disabled="disabled"/>
			<br>
			<input type="submit" value="提交">
		</form>
	</body>
</html>

效果：
http://localhost:8080/save?usercode=1111
在这里插入图片描述

12.6、input控件的maxlength属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>input控件的maxlength属性</title>
	</head>
	<body>
		<!--
			maxlength 设置文本框中可输入的字符数量。
		-->
		<input type="text" maxlength="3"/>
	</body>
</html>

效果：
最多输入三个
在这里插入图片描述

13、HTML中元素的id属性

1、在HTML文档当中，任何元素（节点）都有id属性，id属性是该节点的唯一标识。所以在同一个HTML文档当中id值不能重复。
2、注意：表单提交数据的时候，只和name有关系，和id无关。
3、id有什么用？
javascript语言：可以对HTML文档当中的任意节点进行增删改操作。
javascript可以对HTML文档当中的任意节点进行增删改，那么增删改之前需要先拿到这个节点，通常我们通过id来拿节点对象。
id的存在让我们获取元素（节点）更方便。
4、HTML文档是一棵树，树上有很多节点，每一个节点都有唯一的id。
javascript主要就是对这棵DOM树上的节点进行增删改的。
DOM(Document)树。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML中元素的id属性</title>
	</head>
	<body id = "mybody">
		<form id = "myform">
			<input type="text" id = "username" name="username"/>
			<input type="password" id = "userpwd" name="userpwd"/>
			<!--id就是节点的身份证号码，不能重复。-->
			<!--
			<input type="text" id="username" />
			-->
		</form>
	</body>
</html>

14、HTML中的div和span

1、div和span是什么？有什么用？
div和span都可以称为“图层”
图层的作用是为了保证页面可以灵活的布局。
图层就是一个一个的盒子，div嵌套div就是盒子套盒子。
div和span是可以定位的，只要定下div的左上角的x轴和y轴坐标即可。
2、其实最早的网页是采用table进行布局的，但是table不灵活，太死板。
现代的网页开发中div布局使用最多，几乎很少使用table进行布局了。
3、div和span的区别？
div独自占用一行（默认情况下）
span不会独自占用一行。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML中的div和span</title>
	</head>
	<body>
		<div id="div1">我是一个DIV</div>
		<div id="div2">我是一个DIV</div>
		
		<span id="span1">我是一个SPAN</span>
		<span id="span2">我是一个SPAN</span>
		
		<!-- 嵌套 -->
		<div id="div3">
			<div>
				<div>test</div>
			</div>
		</div>
	</body>
</html>

效果：
在这里插入图片描述

yiersano
关注
  • 4
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
2021-08-06JavaScript代码
dasd11sda456的博客
08-07 177
020-JS的void运算符 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS的void运算符</title> </head> <body> 页面顶部<br><br><br><br><br><br><br><br><br
HTML学习笔记-快速入门
qq_44865278的博客
11-11 434
1.HTML的简单介绍 系统结构 B/S架构 Browser / Server （浏览器/服务器的交互形式。） Browser支持哪些语言：HTML CSS JavaScript 写HTML CSS JavaScript代码的这波人职位叫做：WEB前端开发工程师。（Java程序员目前来看也需要会一些前端的东西。） 前端页面上的图片需要UI设计师完成。（PS对java程序员来说没有太高的要求。） S是服务器端Server，Server端的语言很多：C C++ Java py
html中＜img src=““ alt=““＞标签里面alt的作用
热门推荐
倪灵-ziop
09-28 2万+
定义和用法 alt 属性是一个必需的属性，它规定在图像无法显示时的替代文本。假设由于下列原因用户无法查看图像，alt 属性可以为图像提供替代的信息：网速太慢src 属性中的错误浏览器禁用图像用户使用的是屏幕阅读器 标签的 alt 属性指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容。强烈推荐在文档的每个图像中都使用这个属性。这样即使图像无法显示，用户还是可以看到关于丢失了什么东西的一些信息。而且对于残疾人来说，alt 属性通常是他们了解图像内容的唯一方式。 提示和注释
前端——7.图像标签和路径
m0_52096593的博客
03-11 9353
在HTML标签中，标签用于定义HTML页面中的图像。标签是一个单标签单词 img 是 image 的缩写，意为图像其中，src是标签的必须属性，它用于指定图像文件的路径和文件名。简单理解就是属于这个图像标签的特性（其实这一点可以和java中的类进行对比理解，java中的类也有属性，标签也有属性，且属性是必须的，不可或缺）
在网页中插入一张图片，相对路径的三种写法以及alt和title的区别
weixin_44111864的博客
12-22 8710
一、在网页中插入一张图片，使用&lt; img / &gt;标签,相对路径的三种写法如下： 1.当当前文件和目标文件在同一目录下，写法为：目标文件名+扩展名； eg:&lt; img src=“poto1.jpg” / &gt; 2.当当前文件和目标文件所在文件夹在同一目录下，写法为：目标文件所在文件夹名称/目标文件名+扩展名； eg:&lt; img src=“img/poto2.jpg” / ...
老杜Servlet笔记.zip
06-09
哔哩哔哩上老杜的Servlet笔记。 2020-5-05 Servlet学习 Tomcat 服务器配置 2020-5-08 UML 2020-5-08 Servlet学习 2020-5-09 Servlet学习 2020-5-10 Servlet学习 2020-5-11 Servlet学习---Cookie 2020-5-11 Servlet中...
动力节点老杜javaweb笔记
10-03
动力节点老杜javaweb笔记
动力节点老杜Spring6，配套笔记PDF文件
02-08
动力节点老杜Spring6，配套笔记PDF文件 源自https://www.yuque.com/dujubin/ltckqu/kipzgd?singleDoc#Kp2MS
Servlet-JSP学习笔记
03-18
老杜课堂Servlet-JSP学习笔记
html+css+javascript笔记完整版
03-03
在本笔记中，你将深入理解HTML的基本语法，如何创建文档结构，以及如何使用表格、表单和框架等高级特性。此外，你还将学习到HTML5的新元素，如`<header>`、`<nav>`、`<section>`、`<article>`和`<footer>`，它们有助...
HTML颜色代码表
05-30
HTML颜色代码表提示：仅有 16 种颜色名被 W3C 的 HTML 4.0 标准支持，它们是：aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow。 如果使用其它颜色的话，就应该使用十六进制的颜色值。
HTML中 src alt align 分别是什么意思？
TwcatL_tree
01-18 1310
1、src 属性它的值是图像文件的 URL，也就是引用该图像的文件的的绝对路径或相对路径。 绝对路径：指向其他站点（比如 src=“www.example.com/example.js”）。 相对路径：指向站点内的文件（比如 src="/scripts/example.js"）。 2、alt 属性指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容。 3、align 属性规定 div 元素中的内容的水平对齐方式。 ...
html背景颜色代码格式,html常用背景颜色代码.docx
weixin_35909607的博客
06-03 6640
html常用背景颜色代码?html常用背景颜色代码标记或参数定义连结标记地址标记(斜体效果)连结区域标记(设定各连结区域)alink点击连结时的样式。例：alink="#FF0000"align水平方向摆放位置。例：align="center"alternate来回走动，例：behavior=alternatealt在连结中插入文字说明。例：alt="绿叶园"字体加粗标记(产生字体加粗的效果)正文...
src与href的区别以及title和alt属性的区别
m0_66783294的博客
04-19 1790
src与href的区别以及title和alt属性的区别
Web前端开发笔记——第二章 HTML语言 第五节 图像标签
小宇y的博客
08-21 1168
目录一、二、三、 一、 二、 三、 # 结语 以上就是全部内容，篇幅较长，感谢您的阅读和支持，若有表述或代码中有不当之处，望指出！您的指出和建议能给作者带来很大的动力！！！
常见的元素的特点属性（href、src的区别，alt和title的区别）
qq_40664253的博客
08-06 2548
jjjjj
html种颜色的三种不同表示方法,html网页背景颜色的代码是什么？颜色有几种表示方法？...
weixin_39720865的博客
06-20 3795
html网页背景颜色的代码就是background-color；颜色有6种表示方法。html网页背景颜色的代码：( ＃ 00FFFF )海蓝宝石 、( ＃ 7FFFD4 ) 湛蓝 、( ＃ F0FFFF )米色 、 ( ＃ F5F5DC )浓汤 、( ＃ FFE4C4 )黑色 、( ＃ 000000 ) blanchedalmond 、 ( ＃ FFEBCD )蓝色 、( ＃...
HTML设置背景颜色及背景图片
hff945的博客
08-26 1万+
背景 background-color 设置背景颜色 background-color: red; background-image 设置背景图片 - 可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色 - 如果背景的图片小于元素，则背景图片会自动在元素中平铺将元素铺满 - 如果背景的图片大于元素，将会一个部分背景无法完全显示 - 如果背景图片和元素一样大，则会直接正常显示 background-image: url("./img/1.png"); background-r
html标签img是什么意思,html中img标签属性是什么意思
weixin_32211599的博客
06-20 5100
html中img标签属性是什么意思发布时间：2020-12-03 11:54:11来源：亿速云阅读：124作者：小新这篇文章主要介绍html中img标签属性是什么意思，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！一：图像标签img简介一般情况下，在html当中，我们可以使用来对图像进行设置，img标签是自闭和标签，是没有结束标签的，我们只要掌握和src、alt和title这...
老杜servlet笔记
最新发布
08-19
根据引用，在哔哩哔哩上有一个叫老杜的人分享了他的Servlet笔记。他在2020年5月5日开始学习Servlet，并在接下来的几天继续学习和记录笔记。他的学习内容包括Tomcat服务器配置、UML以及一些关于Servlet的知识。...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值