Web前端技术

html——结构标准：负责网页结构的搭建

css——样式标准/表现标准：负责网页的美化工作

js——行为标准：负责网页的行为动作

浏览器：IE、谷歌、火狐

HTML：超文本标记语言

html5.0和xhtml1.0

html网页:

1、打开hbuilder后，把自己代码文件夹拖拽到“项目管理器“下

2、ctrl+n新建”html文件“

3、head中写网页的头部信息

4、meta中写网页编码集（必须是utf-8）

5、title中写网页的标题内容

6、body中写网页的主体内容

空格：&nbsp 三个&nbsp相当于1个汉字

换行：<br />

标题标签：<h1>hehe</h1> 独占1行，只有1—6级

<p>段落内容<p>

标签语义化

<b>文字加粗</b>

<u>下划线</u>

<i>文字倾斜</i>

<strong>文字加粗</strong>

<del>删除线</del>

<div>表示一个大盒子，可嵌套很多其他小盒子</div> 一行存一个

<span>表示一个小盒子，一般存放文字</span>    一行存多个

<img src="图片路径" title="鼠标悬停后提示文字" alt="图片资源加载不出提示文字" width="宽度" height="高度"/>

src为设置的图片资源     属性名=“属性值”为“键值对”也叫“KV对”

路径：src=”相对路径（同级、../上级、文件名/下级）”三种方式；不会出现绝对路径；图片格式标准，不能改后缀

超链接：<a href="http://www.baidu.com">点我去百度</a>

Href:网址   ><:链接名称

<a href="http://www.baidu.com" target="_blank">点我去百度，新窗口打开</a>

target="_blank"——新窗口打开；

<a href="#">空链接</a>

<a href="javascript:;">空链接</a>

表单：form标签/input标签

<form action="后台处理数据的地址" method="post">

         用户名：<input type="text" />

         <br />

         <input type="submit" value="提交按钮"/>

      </form>

 表单：所有用户输入的；用户名，账户，密码，邮箱、、、统一称为表单数据；表单数据必须放在form标签中；

Form中的属性：action中的值代表，当前的表单要提交给那个后台程序XXX.jsp；method中的值代表传输数据的过程中使用哪种方法：

1. get  不加密传输
2. post   加密传输

input标签的type类型不同就可以实现不一样的效果：

（1）type=”text”   普通文本框

（2）type=”submit” 提交按钮

实现效果：

Input标签的type类型效果：

Type=”text”  普通文本框

Type=”password” 密码框

Type=”submit”   提交按钮

Type=”radio” 单选框

Type=”checkbox” 多选框、复选框

注释：   ctrl+？

实现效果：  <!--添加注释-->

实现效果：

Type="button"  普通按钮

Type="reset"   重置按钮

  

CSS技术

CSS：设置网页样式；又称级联样式、层叠样式、样式表

1. head标签中间最后位置；放在style中；px代表像素；background代表背景色

1. 标签选择器

定义：页面中找元素、标签、标记的方法

标签选择器：只需要写要找的标签的名字即可

1. id选择器

给标签设置id属性，在css代码中使用#id名字的方式来寻找页面的元素、标签、标记

例：#div1{XXX}

<div id=”div1”>111</div>

注意：其中id不能以数字开头；不能中文；不允许特殊符号（下划线_ 中划线-可以）

4、类选择器

给标签设置class属性，在css中设置.class名字；

例：.div1{xxx}

<div class=”div1”>xxx</div>

注意：1）id命名不能冲突

      2）id命名不能一个标签设置多个

      3）class命名可以冲突

      4）class命名还可以给一个标签设置多个

1. 继承性

父子包括类型标签具有继承性，子类可继承父类元素样式；但子类单独设置；根据自己设置来

1. 覆盖性

最后写的样式为准（代码从上往下执行）（权重相同的前提下）

1. 优先级比较（权重对比）

Id选择器（100斤）>类选择器（10斤）>标签选择器(1斤)

1. CSS书写位置（CSS引入方式）

1. 内嵌式css：代码写在style标签中，放在head标签的里面，title标签的下面
2. 外链式css：css代码单独写在css文件中，通过link标签，里面的href设置的路径来选中；此种写法实现了css代码和html代码的分离，修改代码更容易查找

1. 后代选择器

 div span{}

在css选择器中出现空格；表示寻找后代{儿子、孙子、重孙子、、、}

1. 并列选择器

h1,h2,div,.div1,.div3{background: green;}

英文,隔离元素

1. 引入方式权重对比

（外链式=内嵌式）<行内

{background: green!important;}是权限最高的

11、Id 100斤  class 10斤 标签 1斤

只要是给同一个标签设置的样式；就会根据最后数值的相加结果来定优先级，数值越大，优先级越高

（继承优先级低！！！）

1. 边框属性

就是给页面中的元素添加的外围边框线属性；

程序员称呼“边框”；UI称呼“描边”

只有实线/虚线没有兼容性问题；其他都有

1. 音频标签

1. 视频标签

1. H5

H5代指HTML5+CSS+JavaScript的集合体

1. 浏览器内核

Trident:IE浏览器内核

Gecko：火狐浏览器内核

Blink：Chrome浏览器内核

1. 常见图片类型

.jpg：颜色信息丰富的一种图片格式

.png：可以支持透明的一种图片格式

.gif：支持动图，占用体积小

.psd：分层的图片

JS基础

1. js基础语法

1）、写script标签；放在html页面的最后位置

2）、从script标签中间，alert（’写啥显示啥’）

1. 事件三要素

事件源.事件类型=执行的命令

——两种实现方式（对比区别）