前端入门
开发工具:浏览器(Chrom、FireFox、Edge、Safari)
编辑器:VSCode
HTML
1.HTML
HTML:超文本标记语言 ( HTML ) 是用来构建你的网页内容并将其语义化的代码。
HTML5:HTML5指的是包括 HTML 、 CSS 和 JavaScript 在内的一套技术组合。
HTML5元素定义:
-
结构性元素:负责web上下文的定义,section、header、footer、nav、article
-
块级性元素:完成web页面区域的划分,确保内容的有效分割,aside、figure
-
行内语义元素:完成web页面具体内容的引用和描述
-
交互性元素:主要用于功能性的内容表达,会有一定的内容和数据的关联,是各种事件的基础
2.标签
radio:在使用radio标签时,为了只能单选,需要将radio标签的name属性对应的值相同
label:使用label标签绑定元素时,当点击label便签内的文本时,浏览器就会自动聚焦或者选择对应的表单元素上
性别:<label for="man">
<input type="radio" name="sex" id="man">男
</label>
<label for="woman">
<input type="radio" name="sex" id="woman">女
</label>
锚点链接:为我们点击链接,可以快速定位到页面中的某个位置
<a href="#two">第二集</a>
<h3 id="two">第二集内容</h3>
select下拉菜单:有多个选项供用户选择
<select>
<!--加入select="selected"属性为默认选择项-->
<option select="selected">选项一</option>
<option>选项二</option>
<option>选项三</option>
</select>
CSS
1.CSS
css:层叠样式表,用于设计风格和布局
css三个重要特性:
-
层叠性:相同选择器给设置相同的样式,此时一个样式就会覆盖另一个冲突的样式。样式冲突,执行就近原则,样式不冲突,不会重叠
-
继承性:子标签会继承父标签的某些样式,如字体样式等
-
优先级:当一个元素指定多个选择器,就会有优先级的产生,选择器不同,则根据选择器的权重执行,权重值大小:!important>行内样式>ID选择器>类选择器>元素选择器>继承
2.选择器
-
类型选择器:也叫做"标签名选择器"或者是"元素选择器",直接为标签加入样式
-
类选择器:以一个句点(.)开头,会选择文档中应用了这个类的所有物件,你能对一个元素应用多个类,然后分别指向它们,或者仅仅在选择器中存在所有这些类的时候选择这一元素
-
ID选择器:ID选择器开头为#而非句点,不过基本上和类选择器是同种用法
-
伪类选择器:伪类是选择器的一种,它用于选择处于特定状态的元素,比如当它们是这一类型的第一个元素时,或者是当鼠标指针悬浮在元素上面的时候
-
关系选择器:典型用单个空格字符——组合两个选择器,比如,第二个选择器匹配的元素被选择,如果他们有一个祖先(父亲,父亲的父亲,父亲的父亲的父亲,等等)元素匹配第一个选择器
<!--类型选择器-->
span {
background-color: yellow;
}
<span>Type selectors</span>
<!--类选择器-->
.highlight {
background-color: yellow;
}
<h1 class="highlight">Class selectors</h1>
<!--ID选择器-->
h1#heading {
color: rebeccapurple;
}
<h1 id="heading">ID selector</h1>
<!--属性选择器-->
<!--
使用li[class],我们就能匹配任何有class属性的选择器。这匹配了除了第一项以外的所有项。
li[class="a"]匹配带有一个a类的选择器,不过不会选中一部分值为a而另一部分是另一个用空格隔开的值的类,它选中了第二项。
li[class~="a"]会匹配一个a类,不过也可以匹配一列用空格分开、包含a类的值,它选中了第二和第三项。
-->
li[class] {
font-size: 200%;
}
li[class="a"] {
background-color: yellow;
}
li[class~="a"] {
color: red;
}
<h1>Attribute presence and value selectors</h1>
<ul>
<li>Item 1</li>
<li class="a">Item 2</li>
<li class="a b">Item 3</li>
<li class="ab">Item 4</li>
</ul>
<!--伪类选择器-->
.box::before {
content: "This should show before the other content."
}
<p class="box">Content in the box in my HTML page.</p>
<!--后代选择器-->
.box p {
color: red;
}
<div class="box">
<p>Text in .box</p>
</div>
3.文本样式
font:复合字体样式属性,用于定义字体、大小、粗细和文字样式,必须保留font-size和font-family属性,否则font属性将不起作用
body{
font:font-style font-weight font-size/line-height font-family;
}
text-decoration:给文本添加下划线(underline)、删除线(line-through)、上划线(overline)
4.CSS引入方式
-
内部样式表:在style标签中书写CSS代码,style标签写在head标签中
-
行内样式表:使用style属性引入CSS样式
-
外部样式表:CSS代码保存在扩展名为.css的样式表中,HTML文件引用扩展名为.css的样式表,有两种方式:链接式、导入式。
<!--使用行内样式引入CSS-->
<h1 style="color:red;">使用行内样式引入CSS</h1>
<!--使用内部样式表引入CSS-->
<style type="text/css">
div{
background: green;
}
</style>
<div>我是DIV</div>
<!--使用外部样式表引入CSS-->
<!--链接式-->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--导入式-->
<style type="text/css">
@import url("css/style.css");
</style>
<!--
链接式和导入式的区别
<link>
1、属于XHTML
2、优先加载CSS文件到页面
@import
1、属于CSS2.1
2、先加载HTML结构在加载CSS文件。
-->
5.background属性
background-repeat属性用于控制图像的平铺行为。可用的值是:
background-size:设置长度或百分比值,来调整图像的大小以适应背景
background-position:允许您选择背景图像显示在其应用到的盒子中的位置
background-attachment:设置背景图像是随对象滚动还是固定不动
background混合写法:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
.box{
background-image: url(star.png);
background-repeat: no-repeat;
background-position: top 20px right 10px;
background-position: top center;
}
6.盒子模型
盒子模型:CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。
-
标准盒模型(border-box):一个块的总宽度=width+margin(左右)+padding(左右)+border(左右)
-
怪异盒模型(content-box):一个块的总宽度=width+margin(左右)(既width已经包含了padding和border值)
padding:如果盒子本身没有width/padding属性,加入padding则不会撑开盒子
margin:外边距可以让块级元素水平居中,但是必须满足两个条件:
外边距合并:使用margin定义块元素的垂直外边距时,可能会出现外边距的合并
清除浮动:父元素高度自适应,子元素float后,造成父元素高度为0,造成高度塌陷
清除浮动本质
7.定位
相对定位:元素在移动位置的时候,是相对于它原来的位置来说的
绝对定位:元素在移动位置的时候,是相对于它的父元素来说的
8.元素的显示与隐藏
display:属性设置为none隐藏元素后,不再占有原来的位置
overflow:让一个元素在页面中隐藏或者显示出来
-
visible(默认选项):不剪切也不添加滚动条
-
hidden:不显示超过对象尺寸的内容,超出的部分隐藏掉
-
scroll:不管超出与否,总是显示滚动条
-
auto:超出自动显示滚动条,不超出不显示滚动条
vertical-align:用于设置图片或者表单和文字垂直对齐
单行文本溢出显示省略句:
多行文本溢出显示省略号:
calc()函数:让你在生命CSS属性值时执行一些计算,calc(100%-50px)
transition:变化的属性 花费时间 运动曲线 合适开始
CSS转换
转换(transform):可以实现元素的位移、旋转、缩放等效果
Flex布局
flex原理:flex是flexible box的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局
flex常见的父项属性(对父元素设置的):
-
flex-direction:设置主轴的方向
-
justify-content:设置主轴上的子元素的排列方式
-
flex-wrap:设置子元素是否换行
-
align-content:设置侧轴上子元素的排列方式(多行)
-
align-items:设置侧轴上的子元素排列方式(单行)
-
flex-flow:复合属性,相当于同时设置了flex-direction和flex-wrap
flex-direction设置主轴的方向:在flex布局中,是分为主轴和侧轴两个方向,同样的叫法有:行和列、x轴和y轴
justify-content:设置主轴上子元素的排列方式
-
flex-start:默认值,子元素从头开始依次排列
-
flex-end:从尾部开始排列
-
center:在主轴居中对齐
-
space-around:平分剩余空间
-
space-between:先两边贴边,在平分剩余空间(常用)
flex-wrap:设置子元素换行
align-items:设置侧轴上的子元素的排列方式(单行)
align-content:设置侧轴上子元素的排列方式(多行)
网页开发经验
Iconfont的使用:
-
Font class使用时想要对iconfont引入样式,要注意权重
-
对iconfont设置大小、颜色时,利用.iconfont.icon-对齐引入
-
如果上下不对齐可以使用vericle-align属性使其对齐
SEO优化
-
title网站标题:是我们内页的第一个重要标签,是搜索引擎了解网页的入口和对网页主题归属的最佳判断点,建议:网站名-网页的介绍
-
description网站说明:简要说明网站主要是做什么的
-
keywords关键字:页面关键词,是搜索引擎的关注点之一
class命名
对于列表页,可以使用ul然后对其使用display布局
服务器
服务器:服务器是提供计算服务的设备,它也是一台计算机。在网络环境下,根据服务器提供的服务类型不同,服务器又分为文件服务器、数据库服务器、应用程序服务器、Web服务器等
远程服务器:通常是别的公司为我们提供的一台电脑,我们只需要把网站项目上传到这台电脑上,任何人就可以利用域名访问我们的网站了
免费的远程服务器:http://free.3v.do
JavaScript
介绍
ECMAScript是一种语言标准,JavaScript是对ECMAScript的一种实现
组成:核心(ECMAScript)、文档对象模型(DOM)、浏览器对象模型(BOM )
<script>
/*内部js代码*/
alert("HELLO,WORLD!");
</script>
<!--外部js代码-->
<script type="text/javascript" src="js/index.js"></script>
1.JS数据类型
1.1基本数据类型
-
number数值类型:1,-2,3,4.5
-
string字符串类型:‘123’,‘sunx’
-
boolean类型:0(假false)和1(真true),例:表达式 3 < 4 为true
-
undefined类型:当一个变量没有被定义、只被声明的时候
-
null空对象类型:typeof null = object
1.2类型之间的转换
2.BOM
2.1BOM对象简介
BOM(浏览器对象模型)
-
window:alert()、confirm()、prompt()、setInterval()、setTimeout()
-
location:href、hash、url、reload()
-
srceen
-
history:go()
3.DOM
3.1 DOM结点类型
3.2 获取结点的方式
-
document.getElementById() :返回值为单个结点对象
-
document.getElementByTagName():返回值为结点对象集合,可以用for遍历
-
document.getElementsByClassName():返回值为结点对象集合
3.3 动态操作节点
-
创建节点:createElement()
-
插入节点:appendChild()、insertBefore(newNode,node)
-
删除节点:removeChild()
-
替换节点:replaceChild(newNode,node)
-
创建文本节点:createTextNode()
4.offset、client、scroll
4.1 Offset
-
offsetWidth / offsetHeight : 用来获取对象自身的宽度和高度 ,包括内容、边框和内边距,即:offsetWidth / Height= width + border + padding
-
offsetLeft / offsetTop : 获取距离第一个有定位的父级盒子左边和上边的距离,注意:父级盒子必须要有定位,如果没有,则最终以body为准!offsetLeft和offsetTop从从父标签的padding开始计算,不包括border。即:从子盒子边框到定位父盒子边框的距离
-
offsetParent : 返回当前对象的父级(带有定位)盒子,可能是父亲、也可能是爷爷。如果当前元素的父级元素没有进行CSS定位(position:absolute 或 relative),则其offsetParent为body; 如果当前元素的父级元素中有CSS定位(position:absolute或relative),offsetParent取最近的那个父级元素。