

首页  思维导图  详情



html前端

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





AI智能生成

HTML+CSS+canvas+js

分享共同学习

模版推荐

作者其他创作

大纲/内容

 选择器

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;

<font color="#c41230">最近使用  background-image 加其它属性不管用了，可以把image去掉</font><br><pre>background:是简写，除<a target="_blank" rel="nofollow">URL</a>外，后面还可以设置图片的其他属性，用空格隔开；<br>background-image:<a target="_blank" rel="nofollow">url</a>就只能接图片的路径这一个属性。</pre>

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

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

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

<ul><li>渐变线的长度可以改变，拉出的渐变线越长，<font color="#0076b3">色块隔得越远，渐变越自然</font>，拉出的渐变线越短，色块隔得越近，渐变越生硬。</li></ul>

子主题

盒子模型

定义宽高：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显示<br>

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;垂直对齐内联元素

<div>text-overflow: ellipsis | clip ;    inherit；继承<br></div>

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

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>

特殊符号

&nbsp;-->空格

&gt;-->大于号，&it;-->小于号

&copy；-->版权符号

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

<dt><dt>定义列表中的项目</dt>

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

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

<p><dd>描述列表中的项目</p>

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

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

强调内容<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 属性

<code>style="resize:none;</code><code> 固定大小<br></code>

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

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

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

<select>定义下拉列表

<optgroup>定义选项组

label属性必须描述text内容

<option>定义select的内容

value属性送往服务器的内容

selected属性定义预选一个项

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

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

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

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

<title></title>网页标题

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

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

查看代码源<br>

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

<h3>粘贴到地址栏</h3>

<h2><font face="宋体"><span>view-source:http://网址</span></font></h2>

Canvas绘图

canvas基本用法

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

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

可使用toDataURL(MIME类型参数)，导出在<canvas>元素绘制的图像

WebGL(3D上下文)

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

2D上下文

填充和描边

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

绘制矩形

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