HTML+CSS WEB前端开发总结

2019-07-19 本文已影响0人南极小丑

初识Html

HTML, 超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计赏心悦目的网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。

基本结构

<!DOCTYPE html> 声明文件语言类型 H5文档头
<html>  ####    包裹所有标签
   <head>  ### 头部标签 包裹网页相关信息
    #### 设置字符集 中文 gb2312 GBK（早期的）UTF-8(全世界所有语言的字符集编码)
       <meta charset="UTF-8"/> 
    <title>这是我的第一个网页</title>####  设置网页名字
   </head>
   <body>###包裹网页内容 肉眼看到的
   </body>
</html>

基本元素属性

标签	定义
h1-h6	标题标签
a	超链接标签通过 href属性控制跳转地址可以在新的页面打开也可以在当前页打开
p	段落标签
b	字体加粗
u	字体下划线
s	字体删除线
i	字体斜体
`<hr/>`	横线
`<br/>`	换行
div	无意义标签
span	无意义标签
img	图片一般通过src属性给图片路径可单独设置宽高

行内元素和块级元素

独占一行的是块级标签（元素）行内标签（元素）可以跟其他元素在同一行

列表

1.无序列表 ul+li
2.有序列表 ol+li

表格

使用table标签包含tr标签（代表行）tr标签包含th（加粗）或者td

路径

1.绝对路径相对于操作系统所处在的位置
2.相对路径相对于当前文件目标文件所在的位置 ../(返回上一级)./(当前目录)
3.网络路径

初始CSS

什么是CSS

层叠样式表（英语：Cascading Style Sheets，简写CSS），又称串样式列表、级联样式表、串接样式表、阶层式样式表，一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护。当前最新版本是CSS2.1，为W3C的推荐标准。CSS3现在已被大部分现代浏览器支持，而下一版的CSS4仍在开发中。

CSS引入方式

1.将CSS语句写在style标签中 style写在head标签中
2.使用link标签将CSS文件引入
3.在标签的style属性写CSS语句

语法

1>标签选择器
标签名{
    属性：值
}

2>class选择器
.类名{
    属性：值
}

3>id选择器
#类名{
    属性：值
}

4>通配符选择器
*{
    属性：值
}

选择器优先级

通配符选择器<标签选择器<class选择器<id选择器<行内样式<!important

代码注释

html注释 <!--这里写注释-->
css注释  /*这里写注释*/

解决margin塌陷

在父级加上overflow：hidden

浮动布局

float(浮动):让某个元素浮动起来就是让元素脱离标准文档流

定位布局

相对定位position:relative会保留原先位置
绝对定位position:absolute不会保留原先位置

注：想要挪动谁，就给绝对定位。同时观察本身父级，如果父级没有定位，就给父级相对定位。否则就不管。

兼容性

条件注释法

<!--[if it IE6]>
中间的内容在IE6中可以显示，其他的都不显示。
<![endif]>

边框常用属性

border-width；
border-style；
border-color；

颜色取值

red yellow green....
Rgb/rgba rgb(255,0,0,1)最后一个是透明度
二进制 #a1b2c3

背景颜色

background ：背景图片地址平铺方式背景定位 xy；

字体引用

fong-family：‘引入字体命名’；
src：url（）；
}

常用的字体属性

font-size 大小
font-weight 权重（粗细）
font-family 字体样式

文本处理

文本超出部分隐藏并且显示三个点

    text-overflow：ellipsis；
    white-space：nowrap；
    overflow：hidden；
    line-height和text-align 实现字体水平垂直居中
    text-decoration:none；去除a链接字体下划线

伪类选择器

     link 没有单击访问时超链接样式
     visited 单机访问之后超链接样式
     hover鼠标放上去时候
     active  鼠标单击未释放

阴影

box-shadow
第一个值  在X轴上移动的距离
第二个值  在Y轴的距离
第三个值  距离物体的距离
第四个值  阴影大小

弹性盒模型

盒子模型

div 主要用于PC端，浮动定位...

弹性和模型（flex）

主要针对移动端。容器：div。只对直系子元素有效。

开启弹性布局

display：flex；//给父级

轴概念（默认情况）

主轴	横向为主轴X
从轴	纵向为从轴Y

元素在主轴的排序方式（父级）

justify-content:flex-start;//开始位置 默认值
justify-content:flex-end;//针对主轴排到末尾
justify-content:space-around;//自适应排列 两边有缝
justify-content:space-between;//两边对齐没有缝
justify-content:flex-center;//针对主轴排到中间

设置主从轴

flex-direction:row;//默认X轴
flex-direction:column;//Y轴为主轴
flex-direction:column-reverse;//Y轴翻转
flex-direction:row-reverse;//X轴翻转

元素在从轴的排序方式（父级）

align-items:center;//居中
align-items:baseline;//基线 按照内容高度设置排列方式

元素操作（父级）

flex-wrap:wrap;//当内部子元素超出父容器 换行
flex-wrap:nowrap;//不换行
flex-wrap:nowrap-reverse;//换行反转

操作子元素（子集）

align-self:center;//针对单个元素 让他单独对于从轴居中
align-self:flex-end;//针对单个元素 让他单独对于从轴尾部
order:1;//排序，值越大越靠后 默认为0 
flex-grow:1;//控制元素拉伸比 撑满
flex-shrink:.5;//控制元素的损失比 比例越大损失越多

H5

H5新增标签

textarea标签输入文字文本域

input type 新增标签

正常属性input type=""

正常属性可选值：

email   邮箱
parrern   写正则表达式的
url内容需要包含 http;// 或者 https://
color 取色版
search 搜索框 比text多一个X按钮
number 数值类型
range  拖动条 特定值范围的数值选择器

其他属性

parrern   写正则表达式的
autofocus 自动获取焦点
required  必须填入类容
placeholder  提示语
contenteditable  全局可编辑属性
tabindex     tab键跳转顺序
：before、：after 在某个元素前面或者后面加内容 内容写在centent属性后面，
也可以使用attr获取当前元素的某个属性值

用于媒介播放的标签

video 视频 
controls 控制
autoplay 自动播放
loop 循环播放
relod 页面加载时 进行视频加载
audio 音频

CSS高级选择器

first-child   找到其父级的第一个元素
last-child     找到其父级的最后一个元素

注意：元素本身的位置是父级的第几个元素

nth-child（n） 找到其父级元素的第N个元素

Canvas

Canvas是H5提供的绘图容器

绘制线段

var canvas = document.getElementById("canvas");
//创建2d画布
var cxt = canvas.getContext("2d");
//线 图形 圆 文字都可以画....
cxt.beginPath();//设置开始
cxt.moveTo(50,100);//起点 X Y
cxt.lineTo(150,100);//终点  X Y
cxt.strokeStyle = "#ddd";//设置描边颜色
cxt.lineWidth = "5";//设置宽度
cxt.stroke();//描边
cxt.closePath();//设置结束

绘制三角形

var canvas = document.getElementById("canvas");
//创建2d画布
var cxt = canvas.getContext("2d");
//线 图形 圆 文字都可以画....
cxt.beginPath();//设置开始
cxt.moveTo(50,50);//起点 X Y
cxt.lineTo(100,100);//中点  X Y
cxt.lineTo(200,50);//中点  X Y
cxt.lineTo(50,50);//终点  X Y
cxt.strokeStyle = "#ddd";//设置描边颜色
cxt.fillStyle = "yellow";//设置填充颜色
cxt.fill()
cxt.lineWidth = "5";//设置宽度
cxt.stroke();//描边 cxt.fill() 填充
cxt.closePath();//设置结束

或者 结束绘制之后再描边 //只需要画两根线

cxt.beginPath();//设置开始
cxt.moveTo(50,50);//起点 X Y
cxt.lineTo(100,100);//中点  X Y
cxt.lineTo(200,50);//中点  X Y
cxt.strokeStyle = "#ddd";//设置描边颜色
cxt.fillStyle = "yellow";//设置填充颜色
cxt.fill()
cxt.lineWidth = "5";//设置宽度
cxt.closePath();//设置结束
cxt.stroke();//描边 cxt.fill() 填充

绘制统计图

var cxt = canvas.getContext("2d");
//竖线和横线 X Y 轴
cxt.beginPath();
cxt.moveTo(50,50);
cxt.lineTo(50,350);
cxt.lineTo(451,350);
cxt.strokeStyle="red";
cxt.stroke();
cxt.closePath();
//Y轴刻度
for(var i=1;i<=6;i++){
    cxt.beginPath();
    cxt.moveTo(51,50*i);
    cxt.lineTo(40,50*i);
    cxt.strokeStyle="red";
    cxt.stroke();
    cxt.closePath();
}
//X轴刻度和矩形
for(var i=1;i<=7;i++){
    cxt.save()  // 保存 当前的绘制状态
    cxt.beginPath()
    // y 轴 刻度
    cxt.translate(50,349) //平移 基点(重置 绘制基点)
    cxt.moveTo(58*i,0)   
    cxt.lineTo(58*i,10)  //当前终点
    cxt.stroke()
    var offsetheight = Math.random()*160+40;
    // 矩形 
    cxt.fillStyle = "red";
    cxt.fillRect(58*(i-1)+5 ,0,50,-offsetheight)
    cxt.closePath()
    cxt.restore()  // 初始化
}

属性和方法

属性	功能
lineTo(x,y)	线段的终点
moveTo(x,y)	线段的起点
stroke() 方法	绘制、描边
strokeStyle="color";	设置描边着色
lineWidth="px";	设置当前描边颜色
beginPath() 方法	起始路径
closePath() 方法	闭合路径
fill() 方法	填充形状
fillStyle="color"	填充颜色
translate(x,y)	平移基点
save( ) 方法	保存状态
restore( ) 方法	撤销保存的状态
fillRect(x,y,width,height)	填充矩形
strokeRect(x,y,width,height)	描边矩形
fillText("text",x,y,maxwidth)	填充字体
strokeText("text",x,y,maxwidth)	描边字体
font="bold px 微软雅黑"	设置字体必须有字体设置才生效
textAlign="left/right/center"	水平文本以基线对齐
textBaseline="top/bottom/center"	垂直文本以基线对齐
rotate(deg)	旋转度数括号内不带单位