Web前端学习笔记:day01(HTML)

最新推荐文章于 2024-10-29 14:54:04 发布

ℳ๓₯㎕℡ 桜

最新推荐文章于 2024-10-29 14:54:04 发布

阅读量400

点赞数

分类专栏： Web 文章标签： html html5 web

本文链接：https://blog.csdn.net/qq_44786543/article/details/104832609

版权

Web 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HTML

1.HTML概述

1.1 什么是HTML

HTML 是超文本标记语言，Hyper Text Markup Language

 超文本：
 	有流媒体、图片、声音的存在
 标记语言：
 	所有标记语言都由标签组成，有开始标签也有结束标签 ，例如：<html></html> 、<body></body>

主要用来展示页面，修饰数据

1.2 HTML基本元素

HTML标签
标签属性
引号样式

HTML特点:语法松散不严格,还有就是不区分大小写

2.HTML基本标签

段落标签 ：<p></p>
	可以把 HTML  文档分割为若干段落
标题字 ：<h1></h1> 至<h6></h6>
	标题是通过 <h1> - <h6>  等标签进行定义的，<h1>定义最大标签，<h6> 定义最小标签
换行 ：<br>
	<br>可插入一个简单的换行符,需要注意的是<br> 标签是空标签 ,它没有结束标签
注释 ：<!--  这是 HTML  注释 -->
align 属性 ： 对齐方式属性
	align = "center" 居中对齐
水平线 ：<hr/>

3.HTML常用实体符号

空格		&nbsp
小于号	&lt
大于号	&gt
乘号		&times
除号		&divide

3.HTML表格

HTML中的table标签实现表格

表格的作用：
	主要用作布局
 	先把表格画出来，然后往表格中放入数据

现在网页采用 table的比较少，采用 div 较多

表格常用元素

table标签 ：<table></table>
	table标签的border属性 ：表格的边框属性
	table标签的align属性 ：规定表格相对于周围元素的对齐方式
	table标签的width属性 ：
		width=”100px” ：表示整个表格的宽度为 100  像素
		width=”50%” ：表示整个表格占整个浏览器 50% 的宽度
	table  标签的 height  属性
		height=”200px” ：表示整个表格的高度为 200  像素
		height=”50%” ：表示整个表格占浏览器 50% 的高度
tr,td标签：每个表格均有若干行（由 <tr>  标签定义），每行被分割为若干单元格（由 <td>  标签定义）。
	tr标签 ： 定义 HTML  表格中的行
	td标签 ： 定义 HTML  表格中的标准单元格
HTML表格有两类单元格
	标准表头单元 th -  包含头部信息（由 th  元素创建）
		th标签 ： 表头单元 ，包含头部信息
	标准单元 td -  包含数据（由 td  元素创建）
thead 、tbody 、tfoot  标签
	thead标签：定义表格的表头，该标签用于组合 HTML  表格的表头内容
	tbody标签：表格主体
	tfood 标签：定义表格的页脚（脚注或表注）
单元格合并
	rowspan 行合并属性：规定单元格可横跨的行数
	colspan 列合并属性：规定单元格可横跨的列数

实例一:创建 table 表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table</title>
</head>
<body>
	<!--
	border="1px" 设置表格的边框为1像素宽度。
	width 宽度
	height 高度
	-->
    <h1 align="center">Table</h1>
    <hr color="red"/>
    <table align="center" border="1px" width="500px" height="300px">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </table>
</body>
</html>

在这里插入图片描述
实例二：行合并属性，列合并性属性rowspan ，colspan

<!doctype html>
<html>
	<head>
		<title>表格单元格合并，以及th标签</title>
	</head>
	<body>
		
		<!--注意事项：
			1、row合并的时候，删除“下面的”单元格
			2、col合并的时候，对删除哪个没有要求。
		-->
		<table border="1px" width="50%">
			<tr>
				<!--
				<td>员工编号</td>
				<td>员工薪资</td>
				<td>部门名称</td>
				-->
				<!-- th 标签也是单元格标签，比td多的是居中、加粗。-->
				<th>员工编号</th>
				<th>员工薪资</th>
				<th>部门名称</th>
			</tr>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
			</tr>
			<tr>
				<td>a</td>
				<td>b</td>
				<td rowspan="2">f</td>
			</tr>
			<tr>
				<td colspan="2">d</td>
				<!--
				<td>f</td>
				-->
			</tr>
		</table>
	</body>
</html>

在这里插入图片描述
实例三：thead tbody tfoot标签
加上去对表格其实没有影响，只是为了让我们更好地维护表格

4.HTML背景色背景图片

bgcolor，background属性

bgcolor : 设置背景色
background : 设置背景图片

实例一

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

5.HTML图片

图片相关基本元素

1、设置图片宽度和高度的时候，只设置宽度，高度会进行等比例缩放。
2、img标签就是图片标签
3、src属性是图片的路径
4、width设置宽度,height设置高度
5、title设置鼠标悬停时显示的信息。
6、alt设置图片加载失败时显示的提示信息。

实例一

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

6.HTML超链接

超链接的特点

1、有下划线
2、鼠标停留在超链接上面显示小手形状。
3、点击超链接之后还能跳转页面。

超链接的作用

超链接的作用：
	通过超链接可以从浏览器向服务器发送请求。
	浏览器向服务器发送数据（请求：request）
	服务器向浏览器发送数据（响应：response）
	
	B/S结构的系统：每一个请求都会对应一个响应。
	
用户点击超链接和用户在浏览器地址栏上直接输入URL，有什么区别？
	本质上没有区别，都是向服务器发送请求。
	从操作上来讲，超链接使用更方便。

超链接相关元素

1、a标签就是超链接标签
2、href：hot references 热引用
	href属性后面一定是一个资源的地址。
	href后面的路径可以是绝对路径也可以是相对路径，可以是网络中某个资源的路径，也可以是本地资源的路径。
3、超链接有一个target属性：
	可取值：
		_blank : 新窗口
		_self ： 当前窗口（默认就是这种方式。）
		_top ： 顶级窗口
		_parent ： 父窗口

实例一

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

<!--
	超链接的作用：
		通过超链接可以从浏览器向服务器发送请求。
		浏览器向服务器发送数据（请求：request）
		服务器向浏览器发送数据（响应：response）
		
		B/S结构的系统：每一个请求都会对应一个响应。
	
	用户点击超链接和用户在浏览器地址栏上直接输入URL，有什么区别？
		本质上没有区别，都是向服务器发送请求。
	
	从操作上来讲，超链接使用更方便。
-->

7.列表

无序列表

1、<ul><li></li></ul>
2、type属性可选值:
	disc  默认值 ，实心圆
	circle  空心圆
	square 实心方块

有序列表

1、<ol><li></li></ol>
2、type属性可选值:
	大小写字母
	阿拉伯数字
	I、II、III、IV、V

实例一

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表</title>
	</head>
	<body>
		<!--有序列表-->
		<ol type="I">
			<li>水果
				<ol type="a">
					<li>苹果</li>
					<li>西瓜</li>
					<li>桃子</li>
				</ol>
			</li>
			<li>蔬菜
				<ol>
					<li>西红柿</li>
				</ol>
			</li>
			<li>甜点</li>
		</ol>
		
		<!--无序列表-->
		<ul type="circle">
			<li>中国
				<ul type="square">
					<li>北京
						<ul type="disc">
							<li>东城区</li>
							<li>西城区</li>
							<li>海淀区</li>
							<li>朝阳区</li>
						</ul>
					</li>
					<li>天津</li>
					<li>上海</li>
				</ul>
			</li>
			<li>美国</li>
			<li>日本</li>
		</ul>
	</body>
</html>

在这里插入图片描述

8.表单

表单基本信息

1、表单有什么用？
	收集用户信息。表单展现之后，用户填写表单，点击提交按钮提交数据给服务器。
2、怎么画一个表单？
	使用form标签画表单。
3、一个网页当中可以有多个表单form。
4、表单最终是需要提交数据给服务器的，form标签有一个action属性，这个属性用来指定服务器地址：
	action属性用来指定数据提交给哪个服务器。
	action属性和超链接中的href属性一样。都可以向服务器发送请求（request）
5、method 属性：用来设置表单提交 数据 的方式：get 、post
	get 方式：为默认提交方式，提交的数据会显示在地址栏中
	post 方式：提交的数据不会在地址栏中显示，相对安全
6、http://192.168.111.3:8080/oa/save 这是请求路径，表单提交数据最终提交给：
	192.168.111.3机器上的8080端口对应的软件。
7、表单是以什么格式提交数据给服务器的？
	http://localhost:8080/jd/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 = "";

表单下常用标签信息

1、input  标签
1.1、input type  类型为 text: 文本输入域
	 <input type=”text” name=”username” />
1.2、 input type  类型为 password: 密码输入框
	<input type=”password” name=”password” />
1.3、input type  类型为 radio: 单选按钮
 	<input type=”radio” name=”sex” />
1.4、input type  类型为 checkbox ：多选按钮
	<input type=”checkbox” name=”interest” />
1.5、input type  类型为 submit ：表单提交按钮
	<input type=”submit” name=” 注册” />
1.6、input type  类型为 button: 普通按钮
	<input type=”button” name=” 提交注册” />
1.7、input type  类型为 reset: 表单重置按钮
	<input type=”reset” name=” 重置” />
1.8 input type  类型为 file ：文件上传组件
 	<input type=”file” name=”filename” />
1.9 input type  类型为 hidden ：隐藏控件
	在浏览器上看不到，但提交表单的时候会提交给服务器
	<input type=”hidden” name=”usercode” />
1.10只读控件 readonly ：只能看不能改， 数据 也会提交给服务器
	<input type=”text” name=”username” value=”zhangsan” readonly />
1.11  无效控件 disabled ： 只能看不能改，数据不会提交给服务器
	 <input type=”text” name=”user” value=”wangwu” disabled />
1.12、input  控件 size  属 性： 设置文本框的 可视 长度
 	<input type=”text” name=”username” size=”10” />
1.13、 input  控件 maxlength  属性： 设置文本框中可编写的长度
 	<input type=”text” name=”uname” maxlength=”100” />
2、下拉列表标签：<select><option></option></select>
	<select name=”grade” >
	<option value=”gz”> 高中</option>
	<option value=”dz”> 大专</option>
	</select>
3、 文本域标签 <textarea></texarea>
 	<textarea name=”introduce” cols=”50” rows=”10”></textarea>

实例一

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单form</title>
	</head>
	<body>
		<!--
			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端口对应的软件。
		-->
		<form action="http://192.168.111.3:8080/oa/save">
			<!-- 画一个提交按钮，这个按钮可以提交表单-->
			<!-- 画按钮可以使用input输入域，type="submit"的时候表示该按钮是一个提交按钮，具有提交表单的能力。-->
			<!-- 对于按钮来说，按钮的value属性用来指定按钮上显示的文本信息。-->
			<input type="submit" value="登录"/>
			
			<!--这是一个普通按钮，不具备提交表单的能力。-->
			<input type="button" value="设置按钮上显示的文本"/>
			
		</form>
		
		<a href="http://www.baidu.com">百度</a>
		
		<!--这个按钮和普通的超链接没什么太大的区别。（超链接和表单都可以向服务器发送请求，只不过表单发送请求的同时可以携带数据。）-->
		<form action="http://www.baidu.com">
			<input type="submit" value="百度" />
		</form>
		
		<br>
		<br>
		
		<form action="http://localhost:8080/jd/login">
			用户名<input type="text" /><br>
			密码<input type="password" /><br>
			<input type="submit" value="登录" />
		</form>
		
		<!--
			表单是以什么格式提交数据给服务器的？
				http://localhost:8080/jd/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/jd/login">
			<table>
				<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;&nbsp;&nbsp;&nbsp;
						<input type="reset" value="清空" />
					</td>
				</tr>
			</table>
		</form>
		
		<!--submit必须放到form标签内部-->
		<input type="submit" value="登录" />
		
		<!--必须放到form标签内部-->
		<input type="reset" value="清空" />
		
		<form></form>
	</body>
</html>

9.HTML标签的id属性

1、HTML标签：
在HTML页面中任何一个标签都可以看做一个节点
	整个HTML页面可以看作是节点的集合
	整个HTML页面也可以看作一棵树
	这棵树的根是<html></html>, 这个根节点里有两个子节点<head></head>和<body></body>
	任何一个节点都有id属性，id在同一个页面中不能重复，id是这个节点的身份证号，是这个节点的唯一标识
2、id属性的作用
	任何一个标签都有id属性
	在同一个页面中id属性的值 不能重复 ，是唯一标识
	通过节点的 id 获取该节点对象，然后对这个节点对象进行增删改的操作从而达到页面的动态效果

10.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不会独自占用一行。