曾经的前端学习笔记

最新推荐文章于 2020-12-01 04:58:34 发布

VIP文章 -红桃K

最新推荐文章于 2020-12-01 04:58:34 发布

阅读量904

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_42006733/article/details/105156105

版权

前端三板斧：

HTML：Hyper Text Markup Language 超文本标记语言常用的标签（使用标签展示效果）

CSS：Cascading Style Sheet 层叠样式表用于修饰标签

原生的 JS（DOM编程）：Javascript（面试中会问到DOM）

前端框架：Jquery：封装的 JS

以后小项目：网页版的计算器（js/jquery)

javaWeb：

原生的ajax

Jquery-ajax（使用js库实现异步操作，局部刷新）

HTML：

针对字体大小，颜色，图片，音频，视频

<font color="red" size="7">今天天气不错！</font>
<img src="图片路径"/>
<video></video>

HTML语言是结构不严谨的语言，会自动填充标签，写的时候尽量将标签写全。

HTML语言的标准结构

<!--h5的标准结构-->
<!--DOCTYPE文档类型 规定文档的版本号-->
<!DOCTYPE html>
<html> <!--根标签-->
    <head> ---->头文件：规定窗口标题以及特面的编码格式！
        <title>窗口标题内容</title>
        <meat content="text/html";charset="utf-8"></meat>
        <body>
            主题部分：显示元素（标签）的部分
        </body>
    </head>
</html>

工具：DR工具 Hbulider工具

HTML语言标签的分类

1.文本标签

标题标签：h1-h6

段落标签：p 有换行作用

滚动标签：marquee

常用属性 behaviour：滚动方式（默认从右到左交替滚动）

alternate：来回滚动

slide：滚动到一边结束

scroll：交替滚动

scrollamount：滚动的速度（赋整数值）

loop：滚动的次数

direction：滚动的方向：不指定则从右到左

bgcolor：背景颜色

段落缩进标签：blockquote(小引用，推荐使用) q（大引用标签，一般不用）

地址标签：address 特点：字体自动变成斜体

上下标标签：sup和sub

html中常用的转义字符：

空格：&nbsp；

注册商标®：&reg；

原样输出：pre 讲内容原封不动的进行输出

块标签：div （层级布局）

特点：占用一行空间（有换行效果，有四个边框必须借助CSS来进行显示）

行内标签：

span 用于表单验证原生js

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function getUserName(){
    
				//1.获取用户名的内容 ：JS dom操作
				var username = document.getElementById("username").value ;
				//2.获取span对象
				var span =document.getElementById("span_id") ;
				//3.定义规则：用户名的username如果不是”eric“，用户名可用，否则不可用
				if(username!="eric"){
    
					//设置span标签的Innerhtml属性
					span.innerHTML="当前用户名可用".fontcolor("greenyellow") ;
				}else{
    
					span.innerHTML="当前用户名不可用".fontcolor("red") ;
				}
			}
		</script>
	</head>
<body>
用户名：<input type="text" id="username" onblur="getUserName()" /><span id="span_id"><span>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lpNcmFsG-1585360324924)(F:\front_end_lesson\java6_html\resource\js表单验证.png)]

jquery-validator 前端框架的组件校验框架js

列表标签：

无序列表 ul li

type属性：置顶列表项标记类型

disc（默认）实心圆点 circle ：空心圆点 square：小正方形

有序列表 ol li

由数字1 2 3 开头

项目组织架构列表 dl dt dd （了解）

补充：

换行标签：br/

水平线：hr/

字体标签：font

2.超链接标签

a标签：属性：href 指定的url资源地址（统一资源定位符）

target：表示打开资源文件的一种方式

_blank（新建一个窗口打开）

_self(默认的方式)

<a href="url"target="_blank">跳转</a>

常见的协议

file://本地文件协议默认在本地C:\Windows\System32\drivers\etc\hosts 里面找

能够找到域名对应的ip地址就执行本地文件协议操作（直接打开）

如果找不到域名对应ip，调用网卡进行联网操作 DNS服务器：网络运营商

http:// 超文本传输协议在系统盘hosts文件中查询域名对应ip

https:// 超文本传输安全协议

mail://邮件协议

thunder://迅雷协议

jdbc:mysql://jdbc协议

ftp://文件传输协议

http协议的执行流程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aX7Och4a-1585360324928)(F:\front_end_lesson\java6_html\resource\http协议的执行流程.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TehjwXUx-1585360324930)(F:\front_end_lesson\java6_html\resource\不同域名之间的跨域访问.png)]

超链接两个作用：

1.跳转资源文件

2.作为锚链接使用

在同一个html页面中使用

1.设置锚点（跳转标记）

<a name="锚点名称"></a>

2.创建一个跳转链接

<a href ="#锚点名称">执行跳转</a>

在不同html页面中使用（在另一个页面某个位置设置锚点）

1.设置锚点（跳转标记）

2.从当前页面跳转到置顶资源文件的文字

<a href="url地址#锚点名称">执行跳转</a>

3.图像标签

img标签

属性： src：加载图片资源的url

alt：替代文本（当图片是小的时候，替代文本起作用）

width/height：图片的宽高（px（像素）/百分比例）

title：鼠标悬浮到图片上的文字提示

在img中指定样式属性：（所有的html标签都有style）

css的display属性： none 操作图片的隐藏

<img style="display: none;"src="xxx">

<script>
	//点击隐藏：将图片隐藏掉
	function hideImg(){
    
		//1)通过id="img1"获取标签对象
		var img = document.getElementById("img1") ;
		//2）通过img标签对象操作style属性 的dispaly属性
		img.style.display="none" ;//隐藏
		
	}
	
	//点击显示，将图片显示
	function showImg(){
    
		//1)通过id="img1"获取标签对象
		var img = document.getElementById("img1") ;
		//2)通过img标签对象操作style属性 的dispaly属性
		img.style.display="block" ;//显示图片
	}
</script>

	</head>
<body>
<!--<img style="display: none;" src="img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" />-->
<img id="img1" alt="这是一个广告图片" title="广告" src="img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" />
<button id="show" onclick="showImg()">显示</button>
<button id="hide" onclick="hideImg()">隐藏</button>
</body>

4.表格标签

html语言表格是没有列的概念，列是通过一个单元格td来表现

布局方式
1)早期：table标签:表格布局
2)div+css布局方式：层级布局

table标签

属性：border ：边框大小
align:表格对齐方式

cellspacing:单元格和边框之间的空隙 cellpadding：单元格和单元格之间的空间

bgcolor:背景色

widht/height:宽高（px/百分比）

caption：标题标签

子标签：
tr:行标签
th：表头标签：自动居中并且加粗
td：单元格

单元格的合并：
行合并:rowspan:占了几个单元格
列合并:colspan：占了几个单元格

<table border="1px" bgcolor="pink" cellspacing="0" width="300px" align="center" height="300px">
	<tr>
		<th>姓名</th>
		<th>班级</th>
		<th>成绩</th>
	</tr>
	<tr align="center">
		<td rowspan="2">狗娃</td>
		<td>
			<!--嵌套表格-->
			<table border="1px" cellspacing="0" height="100%" width="100%">
				<tr> 
					<td>11</td>
					<td>12</td>
					<td>13</td>
				</tr>
				<tr>
					<td>21</td>
					<td>22</td>
					<td>23</td>
				</tr>
				<tr>
					<td>31</td>
					<td>32</td>
					<td>33</td>
				</tr>
			</table>
		</td>
		<td>90</td>
	</tr>
	<tr align="center">
		<!--<td>狗蛋</td>-->
		<td>计算机1班</td>
		<td>87</td>
	</tr>
	<tr align="center">
		<td>狗剩</td>
		<td colspan="2">计算机1班</td>
		<!--<td>79</td>-->
	</tr>
</table>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HFSfqsu8-1585360324931)(F:\front_end_lesson\java6_html\resource\table.png)]

5.表单标签

表单标签的应用场景

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kdzWxbBf-1585360324934)(F:\front_end_lesson\java6_html_css\resource\表单标签应用场景.png)]

form 常用属性：

1.action:提交到后台url地址（http://localhost:8080/xxx）

2.method:提交方式

常用两个：get、post

3.onsubmit（用户提交是否成功，js去讲）

get方式的特点：

1.提交的数据会显示在地址栏上

url?key1(name属性的参数值)=value1&key2（name属性）=value2#

2.提交的数据大小有限制

3.不适合提交私有（敏感）数据：举例密码

密码数据：加密 web：md5 EE：springSecurity：安全框架

post方式的特点：

1.不会将用户数据提交到地址栏上

2.提交的数据大小没有限制

请求头

响应头

实体参数：formData： username=lisi&password=123456

3.适合提交敏感数据（也要进行密码加密）

input标签

input必填属性：name属性

作用：给系统后台进行标记

input标签
type=“text” 文本输入框
type="password"密码输入框
type="radio"单选按钮

<!--必填项：将type="radio"当做同一组信息
	需要指定相同name属性	
-->
<input type="radio" value="男" name="gender"  />男
<input type="radio" value="女" name="gender" />女

type="checkbox"复选框

<!--必填项：将type="checkbox"当做同一组信息
	需要指定相同name属性
-->
<input type="checkbox" value="足球" name="hobit" />足球
<input type="checkbox" value="篮球球" name="hobit" />篮球
<input type="checkbox" value="跑步"  name="hobit"/>跑步

type=“date” (h5 特效：日期组件)

出生日期：
<input type="date" name="birth" />

联系电话：
<input type="tel" name="phone" />
非数字字符串会报错

type=“email”（h5里的email组件：符合邮箱格式)
type=“hidden”:隐藏域（没有效果,但是会携带参数到后台）

<input type="hidden" name="id" />

type="file"上传文件（重点）
（web：文件上传：后台commos-io/commons-fileupload）

<input type="file" name="photo" />

type="button"普通按钮（必须要指定默认值value）
type=“rest”：重置按钮
type="submit"提交按钮

下拉菜单select
option:下拉选项
应用场景：省市联动

<select name="jiguan">
	<option value="请选择">-请选择-</option>
	<option value="陕西省">陕西省</option>
	<option value="山西省">山西省</option>
	<option value="广东省">广东省</option>
</select>

文本域：textarea
rows:文本域中指定行数
cols：指定行中的字符数

自我描述：
<textarea rows="5" name="description" cols="20">
xxxx
</textarea>

按钮相关的
button:按钮组件（h5）

type="button"普通按钮（必须要指定默认值value）
type=“rest”：重置按钮
type="submit"提交按钮

<button>按钮组件</button>
<input type="button" value="input的button" />
<input type="reset" value="重置"  />
<input type="submit" value="提交" /><!--value不指定 谷歌默认提交 火狐默认提交查询

浏览器的默认拆分表格

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yF7j1E3a-1585360324938)(F:\front_end_lesson\java6_css_js\resource\表格默认拆分.png)]

框架标签

frame:包含一个html页面

Src属性：链接当前所包含的html页面

frameset :框架集（包含两个或两个以上的html页面）

rows/cols

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gKYeWCNu-1585360324938)(F:\front_end_lesson\java6_html_css\resource\frame.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IKYPwIsX-1585360324940)(F:\front_end_lesson\java6_html_css\resource\frame1.jpg)]

一般是frame+bootstrap（前端组件响应式页面）组合使用

frameset框架标签不能和body共存（不写body或者写在body之前）

<!--<body>-->
	
	<!--注意：frameset不能和body共存-->
<frameset rows="20%,*,10%">
	<!--链接每个具体的页面-->
	<frame src=

最低0.47元/天解锁文章

-红桃K

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
曾经的前端学习笔记

前端三板斧：HTML：Hyper Text Markup Language 超文本标记语言常用的标签（使用标签展示效果）CSS：Cascading Style Sheet 层叠样式表用于修饰标签原生的 JS（DOM编程）：Javascript（面试中会问到DOM）前端框架：Jquery：封装的 JS以后小项目：网页版的计算器（js/jquery)javaWeb： ...
复制链接

扫一扫