HTML+CSS零基础学习笔记

学科来自慕客网:http://www.imooc.com/code/49

直白以来,大家都抑郁怎么落实微信公众帐号可以接抱客服,也因此不少老三着接口平台为支付客服系统CRM系统,不过未是操作复杂就是资本不过胜。今天享受一个比不上本钱又方便的计,让你的公众帐号接入QQ客服。下面介绍具体的不二法门:

另外有网易coursera合作之教程:网技术 –
网络技术同HTML5简介

1、首先,这个点子目前微信时的手机版都是适用的,测试了微信5.0安卓版本还有点问题,主要是点击了下持续地刷新一个空白的网页。

W3school:

2、公众帐号有于定义菜单功能。有从定义菜单的尽管好一直将QQ客服链接网址放在菜单上,我们的粉丝点击菜单就见面自动跳转。如果粉丝的手机内部来安手机QQ的,那就是直接打开粉丝的手机QQ跟咱们的客服QQ进行聊天。

提前准备:安装Dreamweaver 6

3、公众帐号没有打定义菜单功能。那就由此重点词回复触发,你可以用要词自动回复同样条链接给粉丝,粉丝点击链接吗克进行QQ聊天。站帮网微管家文本回复或图文回复都装有该功能。文本关键词回复添加以下代码
<a href=”QQ客服链接网址”/>点击这里咨询</>
即可,中间的QQ客服链接网址获取请圈下的操作。如果是图文回复的,直接选择链接模块,然后放入下QQ客服链接网址即可

点击安装Dreamweaver
6 亲测破解版可用,算是及时片上最为老的落了。

3.1、第一步,准备一个QQ号,可是企业QQ,也可是是私有QQ。登录网址:http://shang.qq.com/widget/consult.php
开通你的QQ通讯组件,一般登录上便开通了,点击重新多安装,然后设置一下权,添加你的QQ号码上即可。

注意:安装着温馨撞了点儿独问题,解决办法如下:

3.2、第二步,复制如下链接,修改中的QQ号码即可:
http://wpa.qq.com/msgrd?v=3&uin=在这里填写上你自己的QQ号码&site=qq&menu=yes&from=message&isappinstalled=0

1-安装到一半提示用再开电脑。

3.3、第三步,将地方的QQ客服链接网址放在自定义菜单上,或者文本以及图文关键词回复就可了。

    原因:之前安装不成功留下了笔录

解决办法:进入注册表删除注册不成事记录

2-安装提示连接不达到网络

    原因:不知

   
解决办法:先断网,然后重新运行安装。(坑爹啊,连正在网的当儿唤醒连接不达到网络;断网之后,反而安装成功了)

2015-1-20 学习笔记

1-1:代码初体验

1-2:html 和 CSS的涉嫌:内容和表达形式的涉及

1-3&1-4: 标签及标签的写法

1-5:html 语言的核心结构:

        <html>

         <head></head>

          <body></body>

        </html>

1-6:文档头:<head></head>,包含文档的基本信息,如title等,但一般不会见来得被用户看。

1-7:代码注释方式:<!–注释文字–>

2-1:语义化

2-2:容纳具体网站内容之签:<body></body>

2-3:旁标签:<p></p>

2-4:字体大小:<h1></h1>-><h6></h6>

2-5:
<em>这是斜体</em>;<strong>这是加粗</strong>

2-6:用span设置文本格式:

    a-先设定span的意思:比如“蓝色”

      <style>

                  <span>color:blue;</span>

       </style>

        b-指定应用范围: <span>文本</span>

2-7:一如既往句话的援:<q></q>

2-8:长段文章引述:<blockquote></blockquote>

2-9:使用</br>标签分行显示文本

2-10:补加空格: 

2-11: 加入分隔线: <hr> 或者 <hr/>, 空标签

2-12: 加入地方标签(变斜体):<address></address>

2-13: 加入一句代码标签: <code></code>

2-14:保存原来文本格式(加入大段代码)标签:

         <pre></pre>

3-1:信列表: <ul>

                             <li></li>

                       </ul>

3-2:ol 有序信息列表: <ol>

                                          <li></li>

                                     </ol>

3-3:<div></div> 逻辑板块分类(division)

3-4:给DIV命名<div id=xxx></div>

2015-1-21 学习笔记

3-5表格标签:

     <table>

     <–!以下是表头,一般表头默认为相同实践,由任意个表格组成–>

     <th>

     <td>这是表格<td>

     </th>

      <–!以下是表格内容,默认为同一推行,由随机个表格组成–>

      <tr><td>内容</td></tr>

      </table>

3-6 用CSS样式,为表上加边框

     <style type=”style/css”>

      table,tr,td,th{border:1px,solid,#000;}

      </style>

3-7:表格摘要和标题:

      <table summary=”摘要内容”>

      <caption>标题</caption>

4-1:认识<a>标签,链接到另外一个页面,默认为以老浏览器打开

       <a href=”链接”
title=”鼠标滑动了亮的文本”>展示的文本</a>

比如:<a href=”http://xxx” title=”学习网站”>点击这里</a>

4-2: 在新建浏览器打开页面:目标网址后+ target=”_blank”

4-3:下mailto
发送邮件,重复多详细说明点击这里

<a
href=”mailto:xx@xx.com?cc=xx@xx.com&bcc=xx@xx.com&subject=文本内容&body=文本内容></a>

4-4:插图片

<img src=”图片地址” alt=”下载失败时之更迭文本” title = “提示文本”>

1-22 学习笔记

5-1 表单文件

<form method=“传送方式” action=”服务器文件” ></form>

举例:

<form method=”post”  action=”save.php”>

        <label for=”username”>用户名:</label>

        <input type=”text” name=”username” /> 

       <label for=”pass”>密码:</label>        <input
type=”password” name=”pass”/></form>

5-2 文本输入框 密码输入框

<form>

             <input type=”text/password” name=”名称”
value=”文本”/>

</form>

当type=”text”时,输入框为文本输入框.当type=”password”时,输入框为密码输入框。

5-3 文本域,支持多行文本输入

<textarea rows=”行数” cols=”列数”>文本</textarea>

5-4 单选框,复选框

<input type=”radio/checkbox” value=”值” name=”名称”
checked=”checked”/>

    1、type:

     
当type=”radio”时,控件为单选框.name取值一定要平等,这样才能够起及单选作用。

      当type=”checkbox”时,控件为复选框

    2、value:提交数据到服务器的价值(后台程序PHP使用)

    3、name:为控件命名,以备后台程序ASP、PHP使用

    4、checked:当装checked=”checked”时,该选择被默认选中

5-5 使用下拉表框进行单选,节省空间

<select>

<option value=”提交值”>选项</option>

</select>

selected 属性为默认选项,使用方式:selected=”selected”.

5-6 使用下拉表框进行多选

于<select>标签中安装
multiple=”multiple”属性,就好兑现多选择功能。size=”2″,
size为展示出来的取舍项数。

5-7 使用提交钮,提交数据

<input type=”submit” value=”提交”>

5-8 使用重置按钮,重置表单信息

<input type=”reset” value=”重置”>

5-9 form表单中之label标签

<label for=”空间id名称”>,
标签的for属性中的价值应该与相关控件的id相同。

1-23 学习日志

6-1: 认识CSS

CSS全名叫“层叠样式表 (Cascading Style
Sheets)”,它要是用于定义HTML内容以浏览器内的亮样式,如文字大小、颜色、字体加粗等。

6-2:CSS的优势

怎么使用css样式来设置网页的外观样式也?右边编辑器是均等段子文字,我们想把“超酷的互联网”、“服务及时贴心”、“有趣易学”这三独短语的公文颜色设置也红,这时就
可以由此设置样式来安,而且只是待编制一修css样式语句。

第一步:把立即三个短语用<span></span>括起来。(见右手边代码编辑器13实践)

次步:写副下列代码:span{ color:red;}

6-3:CSS语法

css
样式由精选适合和声明组成,而声明同时由于属性和价值组成。如图所示。

声称:在英文大括声泪俱下“{}”中的之就是宣称,属性与价值期间因此英文冒号“:”分隔。当有差不多长长的声明时,中间可以英文分号“;”分隔,如下所示:

p{color:blue;fontsize:12px;

6-4: 注释代码 /*文内容*/

7-1内联式:

<p style=”color:red”>这里文字是革命。</p>

7-2镶嵌入式:嵌入式css样式,就是得管css样式代码写于<style
type=”text/css”></style>标签内。

7-3 外部式:

外部式css样式(也可称之为外联式)就是把css代码写一个单身的表面文件中,这个css样式文件为“.css”为扩大名,在<head>内(不是以<style>标签内)使用<link>标签将css样式文件链接到HTML文件内,如下面代码:

<link href=”base.css” rel=”stylesheet” type=”text/css” />

注意:

1、css样式文件名称以生意义的英文字母命名,如 main.css。

2、rel=”stylesheet” type=”text/css” 是一贯写法不可修改。

3、标签位置一般写于标签中。

7-4 不同款式之先期级:就近原则。一般:内联式 > 嵌入式 > 外部式

8-1 选择器

各国一样条css样式声明(定义)由片组成部分组成:选择器{样式}

于{}之前的一些就是“选择器”,“选择器”指明了{}中之“样式”的企图对象,也就算是“样式”作用为网页遭到的安因素。

8-2 标签选择器

标签选择器其实就算是html代码中的签。如右代码编辑器中之<html>、<body>、<h1>、<p>、<img>。

8-3 类选择器

.类选器名称{css样式代码;

步骤:

先是步:使用方便的签把要修饰的情节标记起来:<span>胆小如鼠</span>

第二步:使用class=”类选择器名称”为标签设置一个接近,如下:<span
class=”stress”>胆小如鼠</span>

其三步:设置类选器css样式,如下:.stress{color:red;}/*好像前面要在一个英文圆点*/

8-4 ID选择器

当不少上面,ID选择器都类似于类选择切合,但也出部分着重的区分:

1、为标签设置id=”ID名称”,而未是class=”类名称”。

2、ID选择适合的前是井号(#)号,而非是英文圆点(.)。

8-5 ID选择器和类选择器的于

相同点:可以使被其它因素

不同点:

1、ID选择器只能在文档中利用相同软。与类选择器不同,在一个HTML文档中,ID选择器只能采用同一破,而且仅一破。而接近选择器可以运用频繁。

2、可以用类选择器词列表方法吗一个因素而安装多只样式。我们得吧一个元素而要多个样式,但唯有可用类选择器的道实现,ID选择器是免得以的(不克应用
ID 词列表)。

8-6 子选择器

还有一个比可行之取舍器子选择器,即超过标志(>),用于选择指定标签元素的率先代子元素。

.food>li{border:1px solid red;}

马上行代码会如class名为food下的子元素li(水果、蔬菜)加入红色实线边框。

8-7 包含(后代)选择器

.first  span{color:red;}

跟子选择器的歧异:包含有后代,子选择器只含直接后代。

8-8 通用选择器

通用选择器是作用最精锐的选择器,它用一个(*)号指定,它的打算是匹配html中存有标签元素,

8-9 伪类选择切合

a:hover{color:red;}

8-9 分组选择符合

.first,#second span{color:green;}

9-1,9-2

位标签号的权值:权值越强,对点名文本的控制度越强。

p{color:red;}/*权值为1*/

p span{color:green;}/*权值为1+1=2*/

.warning{color:white;}/*权值为10*/

p span.warning{color:purple;}/*权值为1+1+10=12*/

#footer .note p{color:yellow;}/*权值为100+10+1=111*/

9-3 CSS底层叠:就近原则

9-4 重要性:

p{color:red!important;}

p{color:green;}

<p
class=”first”>三年级时,我要么一个<span>胆小如鼠</span>的微女孩。</p>

10-1 字体

body{font-family:”宋体”;}

10-2 文字排版–字号、颜色

body{font-size:12px;color:#666}

10-3,4 文字排版–粗体,斜体,下划线,删除线

p span{font-weight:bold;}

p a{font-style:italic;}

p a{text-decoration:underline;}

.oldPrice{text-decoration:line-through;}

10-7 段落排版 缩进

p{text-indent:2em;}

10-8 段落排版–行间距(行高)

p{line-height:1.5em;}

10-9 段落排版–字间距、字母间距

设若想在网页排版中安装文字间隔或字母间隔就可以行使letter-spacing来兑现.

假定我思念装英文单词之间的距离为?可以以word-spacing来促成。

10-10 段落排版–对伙同

怀念吧片状元素中的文件、图片设置居中样式也?可以应用text-align样式代码,如下代码可实现文件居中显示。

text-align:center;

text-align:left;

text-align:right;

11-1 元素分类

当讲解CSS布局之前,我们用提前领略有些学问,在CSS中,html中之签元素大体为分成三栽不同之档次:块状元素、内联元素(又叫行内元素)和外联块状元素。

常用之块长素有:

<div>、<p>、<h1>…<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>
、<form>

常用的内联元素来:

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常用之内联块状元素有:

<img><input>

11-2 元素分类–块级元素

在html中<div>、 <p>、<h1>、<form>、<ul> 和
<li>就是块级元素。设置<display:block>就是将元素显示也块级元素。

块级元素特点:

1、每个块级元素还打新的一条龙开始,并且其后之因素呢别从一行。(真霸道,一个块级元素独占一行)

2、元素的莫大、宽度、行高以及到和底部距都只是安装。

3、元素宽度在匪装的状态下,是它自己父容器的100%(和父元素的升幅一致),除非设定一个升幅。

11-3 内联元素

在html中,<span>、<a>、<label>、<input>、
<img>、 <strong>
和<em>就是名列前茅的内联元素(行内元素)(inline)元素。当然片状元素也足以经代码display:inline将元素设置也内联元素。如下代码就是以片长素div转换为内联元素,从页使用div元素具有内联元素特点。

外联元素特点:

1、和外因素都于一行上;

2、元素的万丈、宽度、行高及顶部同底边距不可设置;

3、元素的宽度就是它们蕴含的契或图片的幅度,不可更改。

11-4 元素分类–内联块状元素

内联块状元素(inline-block)就是以拥有内联元素、块状元素的风味,代码display:inline-block就是将元素设置为外联块状元素。(css2.1初长),<img>、<input>标签就是是这种外联块状标签。

inline-block元素特点:

1、和外因素都于一行上;

2、元素的莫大、宽度、行高以及到和底部距都可安装。

11-5 盒子模型(视频)

margin, padding,border

11-6 盒子模型(边框)

盒子模型的边框就是环着内容以及补白的线,这漫漫线若可安装它的粗细、样式与颜色(边框三单特性)。

注意:

1、border-style(边框样式)常见样式有:

dashed(虚线)| dotted(点线)| solid(实线)。

2、border-color(边框颜色)中之颜料可安装为十六上前制颜色,如:border-color:#888;//前面的井号不要遗忘。

3、border-width(边框宽度)中的宽度为堪设置也:

thin | medium | thick(但不是深常用),最常还是用象素(px)。

例子:p{border:2px dotted #ccc;}

11-7 盒子模型 边框(二)

今日出一个题目,如果发生想念为p标签单独设置下边框,而另三止还无装边框样式怎么收拾也?css样式中允许就吗一个势的边框设置样式:div{border-bottom:1px
solid red;}

也可以 border-right, border-left, border top.

11-8 盒模型–宽度与高度

盒模型宽度和可观与咱们平常所说的物体的宽度和惊人理解是不同等的,css内定义的有钱(width)和大(height),指的凡填充以里的内容范围。

故此一个元素实际增长率(盒子的涨幅)=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。见图。

11-9 盒模型–填充

素内容与边框之间是得装距离的,称之为“填充”(padding)。填充也不过分为上、右、下、左(顺时针)。如下代码:

div{

padding-top:20px;

padding-right:10px;

padding-bottom:15px;

padding-left:30px;

}

11-10 盒模型–边界

素以及另外元素中的离开可以采用边界(margin)来装。边界也是不过分为上、右、下、左。如下代码:div{margin:20px
10px 15px 30px;}

12-1 css布局模型

CSS包含3种植为主的布局模型,用英文概括为:Flow、Layer 和 Float。

当网页遭到,元素来三种植布局模型:

1、流动模型(Flow)

2、浮动模型 (Float)

3、层模型(Layer)

12-2 流模型

横流布局模型有2单比独立的特色:

先是碰,块状元素都见面在所处之含元素外由上万一下以顺序垂直延伸分布,因为以默认状态下,块状元素的涨幅都为100%。实际上,块状元素都见面以行的形式占位置。如右代码编辑器中三个片状元素标签(div,h1,p)宽度显示为100%。

12-2 流模型(2)

第二沾,在流模型下,内联元素都见面在所处的蕴藏元素外从左到右水平分布显示。(内联元素可免像块状元素这么不近人情独占一行)

右手代码编辑器中内联元素标签a、span、em、strong都是外联元素。

12-3 浮动模型

12-5 什么是层模型?

臃肿布局模型就比如是图像软件PhotoShop中杀流行的图层编辑功能雷同,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局尚未能被热捧。

臃肿模型产生三种植样式:

1、绝对定位(position: absolute)

2、相对固化(position: relative)

3、固定定位(position: fixed)

12-6 绝对定位

倘若想为要素设置层模型中之断定位,需要设置position:absolute(表示绝对定位),这漫长告句的打算将元素于文档流中拖出去,然后利用left、right、top、bottom属性相对于该尽相仿的一个兼有定位属性之父包含块进行绝对定位。如果不在这么的隐含块,则相对于body元素,即相对于浏览器窗口。

12-7 层模型–相对定位

倘想为因素设置层模型中之对立稳定,需要装position:relative(表示相对固定),它经过left、right、top、bottom属性确定因素于正规文档流中之晃动位置。相对固化好的长河是率先按static(float)方式转变一个因素(并且元素如叠罗汉一样变更了起),然后相对于以前的职务走,移动的趋势和宽度由left、right、top、bottom属性确定,偏移前的职保留不动。

12-8 relative 和 absolute 的铺垫使用

  1. 于参照定位的元素一定要是是参照定位元素的父元素。

  <div id=”box1″><!–被参照定位的要素–>

<div
id=”box2″>相对参照元素进行定位</div><!–相对定位元素–>

2、被参照定位的元素必须投入position:relative;

3、参照定位的因素必须参加 position:absolute;

13-1 盒模型代码简写

一般性发生下三种植缩写方法:

1、如果top、right、bottom、left的价值相同,写一个。如:margin:10px;

2、如果top和bottom值相同、left和 right的价相同,如下面代码:margin:10px
20px;

3、如果left和right的价相同,如下面代码:margin:10px 20px 30px;

13-2 颜色值缩写

有关颜色的css样式也是得缩写的,当您设置的颜料是16进制的色彩值时,如果各国半个之值相同,可以缩写一半。

13-3 字体缩写

body{

font-style:italic;

font-variant:small-caps;

font-weight:bold;

font-size:12px;

line-height:1.5em;

font-family:”宋体”,sans-serif;

}

好简写为:

body{

font:italic  small-caps  bold  12px/1.5em  “宋体”,sans-serif;

}

1、使用即时等同简写方式而至少要指定 font-size 和 font-family
属性,其他的性(如
font-weight、font-style、font-varient、line-height)如无指定将活动使用默认值。

2、在缩写时 font-size 与 line-height 中间要入“/”斜扛。

W3school 练习

1-不带来产划线的链接

<a href=”地址”
 style=”textdecoration:none”>这是一个链接!</a>

2-外部样式表

外表样式表

当样式需要给运用到很多页面的时光,外部体制表将是拔尖的选择。使用外部样式表,你尽管得经转移一个文书来改整个站点的外观。

3-内部样式表

其中样式表

当单个文件需要专门样式时,就好采用中样式表。你得在 head 部分通过
<style> 标签定义内部样式表。

<head><style type=”text/css”>

body {background-color: red}

p {margin-left: 20px}

</style></head>

4-插入图像作为超链接:

若为足以以图像来作链接:

<p>

<a href=”链接”>

<img src=””>

</a>

</p>

我们透过行使 <a> 标签在 HTML 中创造链接。

发生三三两两种植下 标签的不二法门:

由此下 href 属性 – 创建指向任何一个文档的链接

经过使用 name 属性 – 创建文档内之书签

5-设置图像在文件中针对同

<img src=”链接” align=”bottom”>, 还可以用  middle, top.

6-图片转

<img src=”链接” align=”left”>, 还好就此 right

7-改变图片大小

<img src=”链接” width=100px height=100px>

8-无法展示图片时(比如由于浏览器不配合),可以展示替换文本

<img src=”链接” alt=”向左转”>