web前端笔记整理
有哪些端?
- Web前端手机也行电脑也行-浏览器
- 移动端在手机
- PC客户端在电脑
- 后端/后台
前端主要负责两个事:
1.负责用户数据的输入
2.负责向用户展示数据
前端主要的知识点
- HTML
- CSS
- JavaScript
第一部分 HTML5
HTML:超文本标记语言 将数据进行基础的排版 根据标签的定义进行语义或排版
1.1 HTML5常见元素与属性
1.1.1 基本元素
- html:HTML文档的根标签
- head:页面的头部,存放的是一些关于页面的设置等信息,不会当成正文显示在网页里
- body:页面的主体,正文,其内容都会呈现在网页中
- title:网页的标题 meta:主要用于设置网页内容
- style:用于使用CSS样式表
- h1-h6:标题1-标题6,块级元素
- p:段落,块级元素,段前段后间距
- span:一段文字,内联元素,不换行
- font:字体标签,内联
- hr:一条水平线,块级
- div:盒子,容器,文档的节,主要用于页面布局,块级,它可以容纳很多其他元素
<!--声明为HTML5文档-->
<!DOCTYPE html>
<!--HTML的根标签-->
<html>
<!--页面头部信息-->
<head>
<title>01基本元素</title>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
</head>
<!--页面主体信息-->
<body>
<h1>这是h1</h1>
<h6>这是h6</h6>
<!-- #RGB #RRGGBB 0~F -->
<span>
<font color="#FF1188">
这是一句孤立的话
</font>
</span> <br>
<span>
<font color="#00f">
这也是一句孤立的话
</font>
</span>
<p align="center">
这是一段话
</p>
<hr>
<p align="right">
这又是一段话
<span>
<font color="#00f">
这也是一句孤立的话
</font>
</span>
</p>
<div style="background-color: aqua; width: 50%;height: 200px;">
<p align="center">
这是div1中的一段话
</p>
</div>
<div style="background-color: brown;">
<p align="center" style="color:aliceblue">
这是div2中的一段话
</p>
</div>
</body>
</html>
1.1.2 文本格式化元素
- b/strong:加粗
- i/em:斜体
- sup:上标文本
- sub:下标文本
- small:小号文本
- big:大号文本
- bdo:文本方向
- dir属性来标记文本方向
- ltr:从左到右显示
- rtl:从右到左显示
<!DOCTYPE html>
<html>
<head>
<title>02文本格式化元素</title>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
</head>
<body>
<span>
<b><i>加粗斜体文本</i></b>
</span>
<br>
<span>
<small>小号文本</small><br>
<big>大号文本</big><br>
</span>
<!--An=A1+(n-1)*d-->
<p>
A<sub>n</sub>=A<sub>1</sub>+(n-1)*d<br>
</p>
<!-- 2^x=n 推出 x=log2n-->
<p>
2<sup>x</sup>=n 推出 x=log<sub>2</sub>n<br>
</p>
<bdo dir="ltr">
JavaPythonC++
</bdo>
<br>
<bdo dir="rtl">
JavaPythonC++
</bdo>
</body>
</html>
常见的转义字符
<
:<>
:>
:空格¥
:¥"
:"÷
:֩
:©®
: ®
1.1.3 语义相关元素
- abbr:缩写,用title属性来标记全称
- address:地址,块级元素
- blockquote:长段引用,用cite属性标记引用的出处 块级元素
- q:短引用,用cite属性标记引用的出处,默认加双引号
- cite:表示作品的名称
- code:表示一段代码 块级
- pre:预格式化 块级
- kbd:键盘录入标记
- dfn:专业术语
- var:变量标签
- del:删除文本
- ins:插入文本
<!DOCTYPE html>
<html>
<head>
<title>03语义相关元素</title>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
</head>
<body>
<abbr title="XXX全称">XXX缩写</abbr><br>
XXX的地址是<address>陕西省西安市XXX</address>
呵呵呵<br>
<blockquote>
北国风光,千里冰封,万里雪飘,望长城内外,惟余莽莽,大河上下,顿失滔滔,山舞银蛇,原驰蜡象,欲与天公试比高,须晴日,看红装素裹,分外妖娆,江山如此多娇,引无数英雄竞折腰,惜秦皇汉武,略输文采,唐宗宋祖,稍逊风骚,一代天骄,成吉思汗,只识弯弓射大雕,俱往矣,数风流人物,还看今朝。
</blockquote>
<q>Java很好学,呵呵~</q>
上述话是<cite>XXX</cite>说的
<br>
<code>
#include<stdio.h><br>
void main(){<br>
printf("HelloWorld!");<br>
}
</code>
<pre>
#include<stdio.h>
void main(){
printf("HelloWorld!");
}
</pre>
呵呵
众所周知<kbd>ctrl + c</kbd>是复制<br>
在Linux中<kbd>list -l</kbd>显示当前目录的信息<br>
<dfn>HTML</dfn>是超文本标记语言<br>
<var>i</var>+<var>j</var>=10
在Java多线程中,<del>stop()</del>方法已经过时,推荐使用<ins>interrupt()</ins>
</body>
</html>
1.1.4 超链接和锚点
只有一个标签,有如下几个重要的属性:
- href:所链接到的资源,可以是本地的,也可以是互联网上的
- target:新链接的打开方式,
- _self:在自身标签页打开,默认方式
- _blank:在新标签页打开
- media:媒体类型
<!DOCTYPE html>
<html>
<head>
<title>04超链接与锚点</title>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
</head>
<body>
<a href="04超链接与锚点.html#end">点击此处到达文章末尾</a>
<a href="http://www.baidu.com" target="_self">点击打开百度</a><br>
<a href="http://www.baidu.com" target="_blank">点击打开百度</a><br>
<a href="C:\Users\HENG\Desktop\WebDay01\01基本元素.html" target="_blank">打开01基本元素.html</a><br>
<a href="http://www.baidu.com">
<img src="logo.jpg" width="100px">
</a><br>
<!--做一个锚点-->
<a name="end">这是一个页面的结尾锚点</a>
</body>
</html>
1.1.5 列表相关元素
- ul:无序列表
- type属性:circle、disc、square
- ol:有序列表
- type属性:1,A,a,I,i
- start:起始编号
- li:有序和无序列表的子选项
- dl:自定列表
- dt:自定义分类
- dd:自定义的选项
<!DOCTYPE html>
<html>
<head>
<title>05列表相关</title>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
</head>
<body>
<ul type="square">
<li>java</li>
<li>C++</li>
<li>Python</li>
</ul>
<ol type="I" start="2">
<li>java</li>
<li>C++</li>
<li>Python</li>
<li>java</li>
<li>C++</li>
<li>Python</li>
</ol>
<dl>
<dt>宇智波家族有谁:</dt>
<dd>一打七</dd>
<dd>马达拉</dd>
<dt>千手家族有谁:</dt>
<dd>大奶牛</dd>
<dd>哈希他妈</dd>
</dl>
</body>
</html>
1.1.6 图形图形相关元素
- img标签主要用于表示一个图像,有这么几个重要的属性:
- src:图片的路径 可以是本地的 可以是网络上的
- width:宽度
- height:高度
- alt:如果图片加载不出来,则用alt文本表示
- title:图片的文字说明
- bodder:边框
<!DOCTYPE html>
<html>
<head>
<title>06图形图像</title>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
</head>
<body>
<img src="logo.jpg" width="400px" title="XXX我爱你"/><br>
<img src="logo.jpg" height="200px" border=10/><br>
<img src="https://bkimg.cdn.bcebos.com/pic/37d3d539b6003af33a87a65fc160d15c1038534318f3?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2UxMTY=,g_7,xp_5,yp_5" height="100px"/>
<br>
<img src="" alt="图片正在加载"/>
<p>
这是XXX<img src="logo.jpg" height="200px"><br>
这是XXX<img src="logo.jpg" height="200px" align="center"><br>
这是XXX<img src="logo.jpg" height="200px" align="top"><br>
这是XXX<img src="logo.jpg" height="200px" align="bottom"><br>
这是XXX<img src="logo.jpg" height="200px" align="middle"><br>
这是XXX<img src="logo.jpg" height="200px" align="left"><br>
这是XXX<img src="logo.jpg" height="200px" align="right"><br>
</p>
<hr>
<br>
<img src="logo.jpg" usemap="#Map"/>
<map name="Map">
<area shape="circle" coords="402,299,23" href="http://www.newcoder.com" target="_blank">
<area shape="rect" coords="456,251,485,319" href="http://www.newcoder.com" target="_blank">
<area shape="poly" coords="400,365,446,268,446,381" href="http://www.newcoder.com" target="_blank">
</map>
</body>
</html>
1.1.7 表格相关元素
- table:表示表格的标签,最多有一个caption表格标题,最多有一个theader表头,最多有一个tfoot表尾,多个tr行,多个td单元格,多个th加粗的tr
- cellspacing:单元格与单元格之间的间距
- cellpadding:单元格内的内边距
- width:表格的宽度
- align:表格内容的对齐方式
- bgcolor:表格的背景颜色
- background:表格的背景图片
- caption:表格的标题
- tr:表格的行
- td:表格的单元格
- rowspan:跨行
- colspan:跨列
- height:高度
- width:宽度
- th:页眉单元格
- tbody:表格的主体部分
- thead:表头
- tfoot:表尾
<!DOCTYPE html>
<html>
<head>
<title>07表格相关元素</title>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
</head>
<body>
<table background="logo.jpg" border="1" width=400 cellspacing=0 cellpadding=0 align="center" style="text-align: center;">
<colgroup >
<col style="width: 50%;" bgcolor=#0f0>
<col style="width: 50%;">
</colgroup>
<caption><b>上课安排表</b></caption>
<thead></thead>
<th>课程</th>
<th>老师</th>
</thead>
<tbody>
<tr>
<td>Web前置课</td>
<td>LI</td>
</tr>
<tr>
<td>JavaSE</td>
<td>LI</td>
</tr>
</tbody>
<tfoot>
<td colspan="2" style="text-align: right;">共计两门课程</td>
</tfoot>
</table>
</body>
</html>
1.1.8 表单相关元素
之前所说的标签元素,都是以展示数据为主,为了增强网页的交互效果,让用户从网页上提交一些数据给服务器,就需要表单相关的元素
- form标签:表单标签,form当中的其他控件当做整体去提交给我们的服务器的。
对于form的属性而言: - action属性:我们将表单的数据提交到哪里去?一般会去提交到服务器上的一个专门处理数据提交的文件。
- method属性:数据的提交方式,post和get。get提交的数据是明文的,post提交的数据经过封装的。
常见的一些控件
- input:其中有type属性,type属性的不同,则会导致input表现的形式也会不同
- text:文本框
- password:密码框
- radio:单选框
- checkbox:复选框
- submit:提交按钮
- reset:重置按钮
- button:按钮
- image:图像
- file:文件上传
- select
- textarea
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<title>01表单相关元素</title>
</head>
<body>
<!--定义表单-->
<form action="#" method="get">
单行文本框:<input type="text" placeholder="请输入XXX"><br>
不可编辑的文本框:<input type="text" readonly><br>
密码框:<input type="password"><br>
隐藏文本框:<input type="hidden"><br>
第一组单选框:<br>
<input type="radio" name="wife">迪丽热巴<br>
<input type="radio" name="wife">哈妮克孜<br>
<input type="radio" name="wife">马尔扎哈<br>
第二组单选框:<br>
<input type="radio" name="boyfirend">王一博<br>
<input type="radio" name="boyfirend">朱一龙<br>
<input type="radio" name="boyfirend">吴彦祖<br>
复选框:<br>
<input type="checkbox" name="myboy">王一博<br>
<input type="checkbox" name="myboy">朱一龙<br>
<input type="checkbox" name="myboy">吴彦祖<br>
文件上传:<input type="file"><br>
图像域:<input type="image" src="logo.jpg"><br>
下面是常见的四个按钮:<br>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="submit" value="取消" disabled >
<input type="button" value="按钮">
<button>登录</button>
</form>
</body>
</html>
使用label标签
扩大当前控件的点击空间,当前控件+文字说明
<label for="username">单行文本框:</label>
<input id="username" type="text" placeholder="请输入XXX"><br>
不可编辑的文本框:<input type="text" readonly><br>
<label>密码框:<input type="password"><br></label>
隐藏文本框:<input type="hidden"><br>
第一组单选框:<br>
<label><input type="radio" name="wife">迪丽热巴</label><br>
<label><input type="radio" name="wife">哈妮克孜</label><br>
<label><input type="radio" name="wife">马尔扎哈</label><br>
select标签下拉框
<!--展开+多选-->
<select name="高级编程语言" multiple size="3">
<option>Java</option>
<option>C++</option>
<option>Python</option>
<option>Java</option>
<option>C++</option>
<option>Python</option>
<option>Java</option>
<option>C++</option>
<option>Python</option>
</select>
<br>
<select name="城市选择" >
<optgroup label="西安">
<option value="高新区">高新区</option>
<option value="雁塔区">雁塔区</option>
<option value="碑林区">碑林区</option>
</optgroup>
<optgroup label="咸阳">
<option value="渭城区" selected>渭城区</option>
<option value="秦都区">秦都区</option>
</optgroup>
</select>
textarea标签
用于输入一段文字的
- cols:横向的宽度
- rows:纵向的高度
<textarea cols="50" rows="50">
</textarea>
HTML5新增的一些表单属性
- placeholder:作为文本框的输入提示
- autofocus:自动获取焦点
- required:提交后的检查,必须填写
- list:是将下拉框和文本框进行结合
<form>
请输入书名:<input type="text" list="books"><br>
</form>
<datalist id="books">
<option>Java从入门到放弃</option>
<option>深入浅出Java</option>
<option>7天精通Java</option>
</datalist>
HTML5新增的一些input的类型
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<title>02新增input类型</title>
</head>
<body>
<form action="#" method="get">
选择颜色:<input type="color"><br>
选择日期:<input type="date"><br>
选择时间:<input type="time"><br>
选择月份:<input type="month"><br>
选择周期:<input type="week"><br>
<!--输入类型检测 在提交数据的时候检测-->
检测邮箱:<input type="email"><br>
检测网址:<input type="url"><br>
选择数字:<input type="number"><br>
选择区间:<input type="range"><br>
<button type="submit">提交</button>
</form>
</body>
</html>
1.2 HTML5 新增的属性
1.2.1 contentEditable属性
将那些原本不可编辑的元素,变成可编辑的状态,该属性具有继承性,上层元素如果定义了该属性,则下层元素都可被编辑
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<title>03新增属性</title>
</head>
<body>
<div contenteditable="true">
<table border="1" width=400 cellspacing=0 cellpadding=0>
<tr>
<th>商品名</th>
<th>价格</th>
</tr>
<tr>
<td>Java</td>
<td>123.32</td>
</tr>
<tr>
<td>C++</td>
<td>267.76</td>
</tr>
</table>
</div>
<div ondblclick="this.contentEditable=true">
<table border="1" width=400 cellspacing=0 cellpadding=0>
<tr>
<th>商品名</th>
<th>价格</th>
</tr>
<tr>
<td>Java</td>
<td>123.32</td>
</tr>
<tr>
<td>C++</td>
<td>267.76</td>
</tr>
</table>
</div>
</body>
</html>
1.2.2 designMode属性
相当于全局的contentEditable属性,designMode不属于html中的属性,在js中调用
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<title>03新增属性</title>
</head>
<body ondblclick="document.designMode='on'">
<div>
<table border="1" width=400 cellspacing=0 cellpadding=0>
<tr>
<th>商品名</th>
<th>价格</th>
</tr>
<tr>
<td>Java</td>
<td>123.32</td>
</tr>
<tr>
<td>C++</td>
<td>267.76</td>
</tr>
</table>
</div>
<div>
<table border="1" width=400 cellspacing=0 cellpadding=0>
<tr>
<th>商品名</th>
<th>价格</th>
</tr>
<tr>
<td>Java</td>
<td>123.32</td>
</tr>
<tr>
<td>C++</td>
<td>267.76</td>
</tr>
</table>
</div>
</body>
</html>
1.2.3 hidden属性
隐藏属性
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<title>03新增属性</title>
</head>
<body>
<div id="target" hidden="true">
文字内容
</div>
<button onclick="var target=document.getElementById('target');target.hidden=!target.hidden">显示/隐藏</button>
</body>
</html>
1.2.4 spellcheck属性
拼写检查,主要用于输入框
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
<title>03新增属性</title>
</head>
<body>
<form>
<textarea cols="10" rows="10" spellcheck="true">
</textarea>
</form>
</body>
</html>
1.3 HTML5新增常用元素
1.3.1 文档结构元素
- article:表示一遍独立的文章
- 内部用header来表示标题
- 内部用footer表示脚注
- 内部用section表示段落/文章
- 内部用article表示回复的文章
- section:文章的段落
- nav:导航栏
- aside:附属信息
- header:文章头部信息
- footer:文章脚注信息
- figure:表示一块独立的图片区域,可以包含多image图片
- figcation:图片区域的标题
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
</head>
<body>
<!--一篇独立的文章-->
<article>
<header>
<h1>高考750分和750w那个重要?</h1>
<div>作者:XXXX</div>
</header>
<p>
一年前,你选了750分,我选了750万人民币。<br>
11个月前,你成为全国家喻户晓的考神;我成为鼠目寸光的笑柄。
</p>
<!--第一个回答-->
<section>
<article>
<header>
<h3>我觉得750分很重要</h3>
<div>作者:啦啦</div>
</header>
<p>
高考750,如果是裸分,你将会是历史上第一个真正高考拿满的人,<br>
这样的奇迹在几百年内也很难说会再次出现。<br>
你会立刻登顶各平台热搜榜,全国人民愿称你为真正的考神,<br>
几十年后营销号还会不依不饶拿你开刀。拥有这样的流量,<br>
你的潜在财富难道没有750w吗?高考750,<br>
意味着你拥有一颗极其聪明而严谨的大脑,<br>
能够拿下所有难题并且保证细节上也不丢一分,<br>
还能写出满分语文和英语作文。拥有这样强大的大脑,<br>
你难道想不出几百种办法去赚够750w吗?
</p>
</article>
</section>
<!--第二个回答-->
<section>
<article>
<header>
<h3>我觉得750w很重要</h3>
<div>作者:嘻嘻</div>
</header>
<p>
当然是考750分的能力。我考了750分,肯定成网红。<br>
<img width=200px src="https://pic1.zhimg.com/80/v2-9841b837264cd8eda4ba282193bae9f0_1440w.jpg?source=1940ef5c">
</p>
</article>
</section>
<footer>
以上言论仅代表作者自身观点,与本平台无关!
</footer>
<aside>
<h3>关于楼主</h3>
<section>
<div>用户组:管理员</div>
<div>注册日期:2020-02-02</div>
</section>
</aside>
</article>
<aside>
<h3>页面导航</h3>
<nav>
<ul>
<li><a href="http://www.baidu.com">首页</a></li>
<li><a href="http://www.baidu.com">最新</a></li>
<li><a href="http://www.baidu.com">热门</a></li>
</ul>
</nav>
</aside>
<figure style="border: 2px solid black;padding:5px;width:500px;">
<figcaption>图片集</figcaption>
<img src="logo.jpg">
<img src="logo.jpg">
<img src="logo.jpg">
</figure>
</body>
</html>
1.3.2 语义相关元素
- mark:重点标记
- meter:已知最大值和最小值的计数器
- value属性:当前值
- min:最小值
- max:最大值
- low:最小范围
- high:最大范围
- optimum:最佳范围
- progress:进度条
- max:最大值
- value:当前值
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
</head>
<body>
<mark>HTML5</mark>是非常简单的技术<br>
<meter min="0" max="100" low="30" high="80" value="10">10</meter><br>
<progress value="30" max="100"></progress>
<progress ></progress>
</body>
</html>