前端学习
- W3C 标准：
- 结构化标准语言：HTML、XML
- 表现标准语言：CSS
- 行为标准：DOM、ECMAScript。
- IDEA 可以开发web
- 创建java项目就可以，删除src文件夹，自己创建一个包，然后创建html文件
- setting 里面搜索web browers，设置可以打开的浏览器，设置path
- 前端知识体系
- 想要真正的成为 互联网 Java 全栈工程师还有很长的路要走，npm，webpack，nodejs 等都是必学的
- css
- css 层叠样式表是一门标记语言，他并不是编程语言，因此不可以自定义变量，不可以引用等，换句话说就是不具备任何语法支持，它的主要缺陷如下：
- 语法不够强大，无法嵌套书写，即像 java 一样方法调用方法，导致模块开发中需要重复编写很多的选择器
- 没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须重复输出，导致难以维护。
- 这就导致我们在工作中增加了许多工作量，为了解决这个问题，前端人员会使用一种称之为 css预处理器的工具，提供css缺失的样式层复用机制、减少冗余代码。
- css 层叠样式表是一门标记语言，他并不是编程语言，因此不可以自定义变量，不可以引用等，换句话说就是不具备任何语法支持，它的主要缺陷如下：
- css 预处理器
- css 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为css 增加了一些编程的特性，将 css 作为目标生成文件，然后开发者只需要使用这种语言进行 css 的开发。
- 简言之，就是用一种专门的编程语言，进行web页面设计，再通过编译器转化为正常的css 文件，以供项目使用。
- 常用的 css 预处理器有哪些
- SASS：基于 Ruby，通过服务器处理，功能强大，解析效率高。需要学习 Ruby 语言，上手难度高于 LESS。
- LESS：基于NodeJS，通过客户端处理，使用简单。功能比 SASS 简单，效率也低于SASS，但在实际开发中足够了，所以我们后台人员如果需要的话，建议使用 LESS
HTML5基础
-
自闭合标签
-
开放标签、闭合标
-
<!-- 注释 --> //ctrl + / 生成注释，快捷键 <!DOCTYPE html> <html> <head> <meta> 描述性标签 </head> <body> </body> </html> -
网页基本标签
-
标题标签
-
段落标签
输入p 按table键可以只能补全标签- 这个标签用来分段，如果没有此标签，输入的文字都是在一行显示，不会分成一行一行的，且每一段中间有空行
-
换行标签
每一行中间没有空行 -
水平线标签
-
字体样式标签：
- 粗体：
- 斜体：
-
注释：ctrl + /
-
特殊符号：输入&会有提示
- 空格： ； space
- 大于号 ：>；
- 小于号：<；
- 版权所有：©
-
图像标签，它可以有很多属性
- src：图像地址
- alt：图像的替代文字
- title：鼠标悬停提示文字
- width：图像宽度
- height：图像高度
-
超链接标签
- href：连接路径
- 可以把文字和图片都做成超链接
- target ：表示窗口在哪里打开
- _blank：在新标签页中打开
- _self : 默认在当前网页打开
-
锚链接标签：页面内跳转，定位到页面的具体位置
- 例如在当前页面的底部跳转到当前页面的顶部
- 或者在当前页面跳转到目标页面的某个特定位置
- 在顶部顶一个元素，设置属性name为top，然后在底部锚链接的href中用#可以引用top，然后就可以跳转到top处
-
功能性链接
- 邮件链接 <a href = “mailto:xxxxx@qq.com”
- qq 链接，qq推广，可以直接与某人聊天。百度搜索QQ推广
-
-
块元素与行内元素
- 块元素：无论内容多少，该元素独占一行
- 行内元素：内容撑开宽度，左右都是行内元素的可以排在一行
-
列表标签
-
有序列表
- 子标签
- ordered list
- list 子列表
-
无序列表
- 子标签
- list
-
自定义列表
-
列表名称
- 列表选项
-
<dl> <dt></dt> <dd></dd> <dd></dd> <dd></dd> </dl> -
公司底部经常用到自定义列表
-
-
表格
-
<table border=" "> <tr> <td colspan="4"></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> -
三行三列
-
border 属性，边框
-
colspan属性代表跨列，值为4代表一个列占4个列的位置
-
rowspan属性代表跨行
-
-
视频和音频 resources
-
视屏元素 video
<video scr="../" controls autoplay></video>controls：可以控制播放，快进，声音，下载等
autoplay：自动播放
-
音频元素 audio
<audio src="" controls autoplay></audio>
-
-
页面结构分析
- header
- footer
- section
- article
- aside
- nav
-
iframe 内联框架
-
在一个页面内内联另外一个页面的内容，bilibili里面的视屏可以内敛到页面中
-
<iframe src="" name="mainFrame"> </iframe> <a href="www.baidu.com" target="mainFrame"></a> -
上例将target设置为iframe的名字，可以将iframe以内联框架的形式展示出来
-
例如一个网页里面通过iframe嵌套留言页面等
-
-
初识表单 post 和 get 提交
-
<form method="" action=""> <p> <input type="password" name="pwd"> </p> </form> -
method：表单提交方式
- get 方式提交，我们可以在url 看到，不安全，但高效
- post 方式提交，url没有参数，安全，可以传输大文件
- 可以通过network 查看提交的请求
-
action 表示表单提交的位置，可以是一个网页，也可以是一个请求处理地址
-
input type可以有很多类型，text，password，submit（按钮），reset，image，滑块等
-
-
文本框和单选框
-
表单元素格式
属性 说明 type text、password、checkbox、radio、submit、reset、file、hidden、image和button，默认为 text name 指定表单元素的名称，到时候用java程序获取指定元素内容时根据name value value，元素的初始值 size 元素的初始宽度 maxlength text或者password，输入的最大字符数 checked 指定radio或checkbox是否被选中 -
radio 单选框，多个选项name 必须相同，否则是两个单独的框
-
checkbox ：多选框 ，checked 默认选中
-
image：图片也可以形成一个按钮，跳转
-
file 上传文件
-
所有的需要提交的都得有name 属性，没有name属性上传不了，name属性是上传的key值
-
-
列表框文本域和文件域
- 下拉框：value 是提交的key，国家中国是显示的名字
<p>国家 <select name="列表名称"> <option value="china" selected>中国</option> <option value="usa">美国</option> </select> </p>- 文本域
<p> <textarea name="" cols="10" rows="50">文本内容 </textarea> </p> -
搜索框滑块和简单验证
- 邮件验证 input type=”email“
- url验证：type=”url“
- 数字验证：type=“number” max=100 min=0 step=10
- step 可以增加减少数字
- 滑块：input type=”range“
- 搜索框：search,后面回家一个x
-
表单的应用
- readonly 只读
- disable 禁用
- hidden 隐藏，但是仍会提交上去
- 增强鼠标可用性：当点击你点我试试这个文字时，焦点会自动锁定text输入框。通过lable 标签 for 属性绑定 其他标签的id属性
<lable for = "mark">你点我试试</lable> <input type="text" id="mark"> -
表单的初级验证
- placeholder：请输入用户名，当你真正输入文字的时候，这个提示就会消失
- required：必填
- pattern 正则表达式，直接百度常用正则表达式
CSS3 基础
- 所有的样式代码都可以在浏览器中完成并将其复制到自己的代码中
- element.style 表示当前选中的元素
发展史
- css 1.0
- css 2.0 div + css html 与 css 结构分离的思想，网页变得简单
- css 2.1 浮动 定位
- css 3.0 圆角、阴影、动画等。需要考虑浏览器的兼容性
快速入门及优势
-
现在css 与 html 一般都分开两个文件去写，在html中通过
-
优势：
- 表现与内容分离
- 网页结构统一，可以实现复用
- 样式十分丰富
- 建议使用独立于 html 的css 文件
- 利用 SEO，容易被搜索引擎收录
-
vue 做的网站就不太容易被搜索引擎收录
-
css 的三种导入方式
- 行内样式：直接在html 标签中定义style，这样定义出来的在F12审查元素时html 与css 也是结合到一起的，不符合我们的规范
- 内部样式表
- 外部样式表（推荐）
<a style=....> 行内样式 <header> <style> // 内部样式表 </style> <link rel="stylesheet" href="css文件路径"> //链接式外部语法 </header> -
三种方式的优先级是就近原则，谁在代码中距离这个标签最近，就使用谁的样式。
-
如果有多个样式，每个样式需要用分号结尾
三种基本选择器（重要）
-
作用：选择页面上的某一个或者某一类元素
-
html 的标签是一颗树，
-
基本选择器
-
标签选择器
html 中的所有h1标签都会被选中并执行改样式
这种选择器的问题在于无法指定某个标签，只能作用于所有的标签。
h1 { color:red; border-radius:20px }-
类选择器
需要在html 标签中设定class属性，不同元素的class可以相同，这就实现了css样式的复用
css 样式中使用 . 开头指定class
.className { }-
id选择器
id 全局唯一，不能复用
#idName { }- 优先级：不遵循就近原则，id 选择器 > class 选择器 > 标签选择器
-
层次选择器
- 使用层级选择器的目的：如果我们有一个 list ，我们如果要给每一个 li都定一个id，那太多了，我们只给第一个定义id 后，可以根据层级选择器选择下面的标签或者子标签
-
后代选择器
body 的所有后代的 p 标签
body p {
}
- 子选择器
body>p {
}
-
相邻兄弟选择器
只选择同辈的下面一个，只有一个，对下不对上
下面的例子选择的是
.class + p {
}
-
通用选择器
当前class标签下面的同一级的所有p元素
.class~p {
}
结构伪类选择器
所有带冒号的叫做伪类
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
ul li:first-child {
li1
}
ul li:last-child {
li3
}
li:nth-child(1) {
li1 选择当前元素的父元素的第一个子元素，如果该元素是li元素，生效，如果不是li元素，则不生效
}
li：nth-of-type(1) {
li1 选择当前元素的父元素的第一个子li元素
}
li:hover {
鼠标移动到li标签上后的特效叫hover
}
属性选择器（常用、重要）
-
将类选择器与id选择器结合了起来，高级，常用，好用，多用这个
-
可以匹配正则表达式
- $符号在正则中代表结尾
- ^在正则中代表开头
a[id] {
存在id属性的a标签
}
a[id=first] {
id属性为first 的a标签
}
a[class="links"] {
=是绝对等于
}
a[class*="links"] {
*=是class中存在links即可，包含
}
a[href^=http] {
href 以http开头的
}
a[href$=http] {
href 以http结尾的 $符号在正则中代表结尾
}
美化网页元素
- 重点要突出的子使用 span 标签套起来，span 标签本身没什么含义，约定俗成
1. 字体样式
- font 开头的
- font-family：字体样式，默认微软雅黑
- font-size
- font-weight：字体粗细
- color：字体颜色
- 可以将很多font 总结到一个属性下面
- font：oblique bolder 12px 楷体
- 上面表示的是斜体、字体粗细、字体大小、字体样式
2. 文本样式
-
颜色 color ：
- 单词：red、yellow等
- rgb：red，green，blue。FF0000，00FF00，0000FF
- rgba：rgba（255，255，255，0.5）可以加透明度，透明度的取值的范围是0-1
-
文本对齐方式
- text-align:center
-
首行缩进
- text-indent:2em
- 1em代表一个字
-
行高
- line-height：300px
- 一般要使一行文字放在div块的中间，要将行的文字的高度设置的div块的高度一样才可以
- 即单行文字上下居中
-
装饰（下划线）
- text-decoration：underline
- text-decoration： line-through
- text-decoration：overline
- text-decocation:none //a标签去下划线
-
图片和文字水平对齐
-
水平对齐有一个参照物的概念，以下代码的意思是将img与span标签中的字水平对齐
img,span { vertical-align:middle }
-
扫一扫
5290
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
