HTML中用于框架定位的语言,html前端学习

html ：

1、相当于没有穿衣服的人，一套浏览器认识的规则，

2、开发者：

学习html规则

开发后台程序：

-写html文件(充当模板)

-数据库获取数据，然后替换到html文件的指定位置(web框架)

3、本地测试

-找到文件路径，直接用浏览器打开

-用pycharm打开测试

4、编写html文件

一对尖括号就是一对标签，标签内部就是属性html标签

5、标签

-自闭合标签

-主动闭合标签链接跳转

注释

6、head标签中

编码，跳转，刷新，关键字，描述，IE兼容

插入图标

7、input系列 + form

action:提交表单

只有中的内容才能提交到服务器

method:

GET：提交时拼接到url中提交给服务器 可在网站网址url框看到内容

POST: 提交时放到HTTP包内发给服务器，请求头，请求内容

　　　　name设置文本框属性

　　name设置文本框属性

按钮

提交表单

　　　　单选框value，name属性 checked=checked默认值(neme相同互斥)

　　复选框value，name属性(批量获取数据)

　　　　上传文件依赖from表单的一个属性

　　重置

多行文本

name，内部option(下拉框内容)

北京 value提交到后台 multiple多选

标签

做链接

做锚

　　　　插入图片

列表

• 1. 表

     表头一表头二表头三表头四

     lable用于点击文件，使得关联的标签获取光标

     用户名：

     登陆

     css ：穿上衣服的人但不能动的人

     颜色

     位置

     在标签上设置style属性

     id选择器

     标签选择器

     class选择器

     .c选择器

     /* 注释*/

     优先级就近原则

     height 高度

     width 宽度

     text-align:ceter,水平居中

     line-height, 垂直方向根据标签例如div的高度

     color 字体颜色

     font-size 字体大小

     font-weight 字体加粗

     块标签可以修改height, weight

     行内标签不能修改 height, weight

     display:none;让标签消失

     display: inline;行属性

     display: black;块属性

     display: inline-block;既有inline的属性，又有block的属性

     padding 内边距

     margin 外边距

     position:

     fixed用于固定在某个位置

     top,bottom,left,right

     relative+absolute 依赖父标签相对定位

     opacity: style里的opacity可添加透明

     z-index:层级顺序谁的值大谁就在前面

     overflow:hidden,隐藏多余部分，auto为多余部分添加滚动条

     hover 鼠标移动到标签上时他的css样式才会被使用

     background-image: 添加背景图片

     background-repeat: 使图片y轴平铺repeat-y

     background-position-x: 背景位置

     background-position-y:

     background-position:

     js ： 穿上衣服还可以动的人

     浏览器相当于客户端，浏览器如果恰好可以解析服务端返回的字符串就可以显示特殊的效果

     网站相当于服务器，服务端返回的就是一个字符串

     JavaScript

     独立的语言，浏览器具有js解释器

     JavaScript代码存在形式：

     - Head中

     //javascript代码

     alert(123);

     //javascript代码

     alert(123);

     - 文件

     PS: JS代码需要放置在

     标签内部的最下方

     var neme = 'a' 局部变量

     name = 'w'全局变量

     基本数据类型

     数字

     a = 18;

     字符串

     a = "alex"

     a.chartAt(索引位置)

     a.substring(起始位置，结束位置)

     a.lenght 获取当前字符串长度

     ...

     列表(数组)

     a = [11,22,33]

     字典

     a = {'k1':'v1','k2':'v2'}

     布尔类型

     小写

     列表(数组)

     a = [11,22,33]

     字典

     a = {'k1':'v1','k2':'v2'}

     布尔类型

     小写

     for循环

     1. 循环时，循环的元素是索引，支持字符串和字典类型

     a = [11,22,33,44]

     for(var item in a){

     console.log(item);

     }

     a = {'k1':'v1','k2':'v2'}

     for(var item in a){

     console.log(item);

     }

     2. 不支持字典的循环

     for(var i=0;i<10;i=i+1){

     }

     a = [11,22,33,44]

     for(var i=0;i

     }

     条件语句

     if(条件){

     }else if(条件){

     }else if(条件){

     }else{

     }

     == 值相等

     === 值和类型都相等

     && and

     || or

     函数：

     function 函数名(a,b,c){

     }

     函数名(1,2,3)

     Dom

     1、找到标签

     获取单个元素 document.getElementById('i1')

     获取多个元素(列表)document.getElementsByTagName('div')

     获取多个元素(列表)document.getElementsByClassName('c1')

     a. 直接找

     document.getElementById 根据ID获取一个标签

     document.getElementsByName 根据name属性获取标签集合

     document.getElementsByClassName 根据class属性获取标签集合

     document.getElementsByTagName 根据标签名获取标签集合

     b. 间接

     tag = document.getElementById('i1')

     parentElement // 父节点标签元素

     children // 所有子标签

     firstElementChild // 第一个子标签元素

     lastElementChild // 最后一个子标签元素

     nextElementtSibling // 下一个兄弟标签元素

     previousElementSibling // 上一个兄弟标签元素

     2、操作标签

     a. innerText

     获取标签中的文本内容

     标签.innerText

     对标签内部文本进行重新复制

     标签.innerText = ""

     b. className

     tag.className =》 直接整体做操作

     tag.classList.add('样式名') 添加指定样式

     tag.classList.remove('样式名') 删除指定样式

     PS：

     点我

     function func(){

     }

     c. checkbox

     获取值

     checkbox对象.checked

     设置值

     checkbox对象.checked = true

     内容来源于网络如有侵权请私信删除