首页  思维导图  详情

html前端

2020-01-20 11:41:53   43  举报





AI智能生成

HTML+CSS+canvas+js

分享共同学习

作者其他创作

大纲/内容

CSS

选择器

ID选择器

#id{属性名：属性；}

注意:“#”表示“id”

类选择器

.class｛color:red;｝

注意:“.”表示“类”

标签选择器

div{width:80px;}

群组选择器

如：<ul>与<div>共用一种颜色

ul ，div{color:red;}

通配符选择器

*｛margin:0;padding:0;｝

"*"代表全局属性一般作用于初始化

后代选择器

#links a {color:red;}

后代选择器顾名思义所有#links下的<a>链接“全部”字体颜色变成red

子选择器

#links > a {color:blue;}

基本上在CSS中用好以上选择器就够了,后面学习jQuery与css3知识，新增了多种选择器

伪类选择器

a:link 是用在未访问的链接的选择器

a:link { font-size: 14px; text-decoration: underline; color: blue; }

a:visited 是用在已访问过的链接的选择器

a:visited { font-size: 14px; text-decoration: underline; color: orange; }

a:hover 是用在鼠标光标放在其上的链接的选择器

a:hover { text-decoration: underline; color:green; } 与 a:hover span{ color:red; }

a:active 是用在获得焦点（比如，被点击）的链接的选择器

a:ctive{text-decoration: underline; color: gray; }

CSS引入的几种样式

外部样式

内嵌样式

行内样式

CSS属性

背景属性

背景颜色：background-color：颜色值；三种表现形式：red(英文表示)，十六进制(#FFFFFF,或#FFF)，agb(255，255，255)，后扩展alpha 通道 - 规定对象的透明度0~1之间表示 agba(255,0,0,0.5) 刚开始看会有些懵.

背景图像：background-image:url(图像路径);

设置背景图片不重复：background-repeat:no-repeat；默认重复

设置X(水平),Y(垂直)起始位置：background-position:三种表达方式(px)(%)(center);

以上两句结合使用：background-image:url() 0 0 no-repeat;

最近使用 background-image 加其它属性不管用了，可以把image去掉

background:是简写，除URL外，后面还可以设置图片的其他属性，用空格隔开；
background-image:url就只能接图片的路径这一个属性。

background-attachment 属性设置背景图像是否固定(fixed)或者随着页面的其余部分(scroll)滚动。

background-size属性用来处理一些不规则图片，实际运用比较少，图片已经处理好了

background-image: （线性渐变）linear-gradient(方向，起始颜色，过度颜色）；radial-gradient(径向渐变)

渐变线的长度可以改变，拉出的渐变线越长，色块隔得越远，渐变越自然，拉出的渐变线越短，色块隔得越近，渐变越生硬。

子主题

盒子模型

定义宽高：width，height

内边距上右下左：padding:top right bottom left;

也可以单独设定如：padding-top:50px;

外边距：margin:top right bottom left;

margin:0 auto;网页居中

边框属性

边框颜色：border-color

也可以通过上下左右规定单独风格如：border-top-color

边框风格：border-style

风格属性值

solid实线 dashed虚线 dotted点状 double双线 none无边框

groove 3D 凹槽边框 ridge垄状边框

大部分时候我们通过简写方式：border:soild 1px red;来实现正常效果

border-radius:px与%;添加圆角边框

当然也可以单独规定border-top-left-radius

轮廓属性：outline:color style width;

向方框添加一个或多个阴影:box-shadow:0(水平) 0(垂直偏移) 0(模糊半径) 颜色;

文本也有个渲染效果text-shadow

边框宽度与上下左右的设置比较随心，多种多样，真正用处较少，了解即可

如：border-top-width，border-top-style.....

布局相关属性

浮动float

left 与right

清除浮动clear:both;

overflow溢出处理

hidden隐藏超出规定内容，scroll无论是否超出添加滚动条 auto超出自动添加滚动条 visible显示

display显示属性

none元素隐藏或关闭 block 生成一个块元素 inline生成一个或多个行内元素 inline-block该元素生成一个块状盒，随着周围内容流动，如同它是一个单独的行内盒子（表现更像是一个被替换的元素）

opacity属性设置元素的透明度 0~1之间变化

position定位方式，没有任何继承性，只读

relative相对于其正常位置进行定位 absolute相对于第一个父元素进行定位 fixed相对于浏览器窗口进行定位

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定

堆叠层级通过z-index进行对比（优先级）较大的元素会覆盖较小的一个

字体与文本属性

font-family字体定义 font-size字体大小 font-style:italic(斜体) oblique(倾斜);

cursive草书字体 serif 带衬线字体可以了解一些带有特色的字体

font-weight字体粗细 font-variant字体大写

bold(粗) bolder(更粗) inghter(更细) 700=blod 400=normal

文本修饰text-decoration:underline(下划线) line-through(删除线) ;

单词间距word-spacing 字母间距letter-spacing 行高line-height text-indent首行缩进

text-align:left，right，center;水平对齐作用块元素 vertical-align:top、middle、bottom;垂直对齐内联元素

text-overflow: ellipsis | clip ; inherit；继承

文本溢出省略号代表和修剪

white-space:nowrap; 属性设置如何处理元素内的空白。

nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。

列表属性

编号类型:list-style-type 定义列表项符号

编号图像:list-style-image

标记位置：list-style-position:inside(里面) onside(外面);

光标cursor

Pointer(一只手) wait(程序等候) help(问号) Move(可被移动) Crosshair(十字线) text(文本)

HTML

列表

定义列表<dl>

特殊符号

 -->空格

>-->大于号，⁢-->小于号

&copy；-->版权符号

<aside> 的内容可用作文章的侧栏。

<dt>定义列表中的项目

<a href="#c">用于跳转段落

<hr/>水平线 <br/>换行 <pre>定义预格式化的文本

<b>实体标签 <strong>逻辑标签

<dd>描述列表中的项目

<del>定义文档中已被删除的文本替代<s>

<ins>被插入文档中的文本替代<u>用户会把它混淆为一个超链接

强调内容<em>， <i>基于物理的斜体

有序列表

Type属性：1(默认值number)，A，a，i，I

CSS样式：list-style-type: none，upper-roman，lower-alpha 其它不支持

无序列表

type属性：disc(实心圆，默认值)，circle(空心圆)，square(正方形)，decimal(数字)

XHTML 1.0 Strict DTD与html4.01中不被支持和不赞成使用

表格由<table>定义

<tr>定义表格中若干行

每行被分割为若干单元格由<td>定义

数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格...

colspan 和 rowspan 属性可横跨的列数与行数

valign 属性：top，bottom，baseline(与基线对齐)，middle

表格的表头使用 <th> 定义呈现粗体居中效果

<table>属性

border表格边框的宽度

border-collapse:collapse,separate; css拽写单元格边框之间是否有间隙

border-top-width，border-left-style 通过这两种方式可以满足大部分边框样式需求

cellpadding单元格内文字与边框的距离，cellspacing单元之间的距离

frame规定外侧边框哪个部分可见

above 显示上部的外侧边框，below显示下部的外侧边框

lhs 显示左边 rhs显示右边

hsides 显示上部和下部 vsides显示左边和右边

rules规定内侧边框哪个部分可见

rows位于行 cols位于列之间的线条 all位于行和列之间的线条

rules 属性无法在 Internet Explorer、Chrome 或者 Safari 中正确地显示。

大部分表格属性在html5中都不支持或不赞成使用，以上是一些的特殊方法使用，其它推荐使用css边框样式拽写

<frameset>定义框架集

rows cols 属性表示横向与纵向分割，frameborder属性:是否显示框架边框 0(NO)和1(YES)两个值

<frame>与<ifrsme>标签

name属性 src属性 scrolling属性：是否显示滚动条在html5中不支持这两个标签了，了解就好

表单由<form>定义

<form>标签

action 属性：规定向何处提交表单的地址（URL）

method 属性：定在提交表单时所用的 HTTP 方法：（默认：GET），POST

<input> 标签的属性

不同的 type 属性，可以变化为多种形态。

button点击，submit提交， reset重置，image(alt)定义图像作为提交按钮 file浏览选择文件上传

checkbox(复选框) radio(单选) text(文本) password(密码遮蔽)等常用属性值。html5中增加了多种形态变化

checked(预选) size属性 src 属性 name属性在html常用

disabled属性规定应该禁用的input ， readonly属性规定文本只读通过js判定布尔值实现目的

input其它属性和值就不多介绍...

<label>不会向用户呈现任何特殊效果,但浏览器就会自动关联相关的表单控件上

for属性规定 label 与哪个表单元素绑定

通过在 <label>中放入<input>来隐式地连接起来的

<textarea>定义多行的文本输入控件

可以通过 cols 和 rows 属性来规定 textarea 的尺寸

更好的办法是使用 CSS 的 height 和 width 属性

style="resize:none;

 固定大小

<fieldset> 将表单内容的一部分打包，生成一组相关表单的字段

<legend> 标签为 fieldset 元素定义标题

name 属性是 <fieldset> 在 HTML5 中的新属性

<select>定义下拉列表

<optgroup>定义选项组

label属性必须描述text内容

<option>定义select的内容

value属性送往服务器的内容

selected属性定义预选一个项

multiple属性同时选择多个选项 windows：按住 Ctrl 按钮 Mac：按住 command 按钮

name属性用于对提交到服务器后的表单数据进行标识或引用数据 size属性：可选数目

<head></head>之间是网页头部可见内容

php编码格式-->header("Content-Type:text/html; charset=utf-8");

<title></title>网页标题

<body></body>之间是页面可见内容

注意：HTML执行顺序是从上而下，依次执行。菜鸟最容易犯语法错误--->编译错误 , 还有一种是“运行错误”

查看代码源

javascript: s=document.documentElement.outerHTML;document.write("<body></body>");document.body.innerText=s;

粘贴到地址栏

view-source:http://网址

Canvas绘图

canvas基本用法

设置width和height属性，指定绘图区域的大小

调用getContext()并传入上下文的名字，如：2d

可使用toDataURL(MIME类型参数)，导出在

WebGL(3D上下文)

参考：http://www.hiwebgl.com/?p=42

2D上下文

填充和描边

取决于fillStyle和strokeStyle属性,属性值可以是字符串,渐变对象,模式对象

绘制矩形

矩形是唯一一个可在2D上下文中绘制的形状