html ：

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

　　2、开发者：

　　　　学习html规则

　　　　开发后台程序：
　　　　-写html文件(充当模板)
　　　　-数据库获取数据，然后替换到html文件的指定位置（web框架）

　　3、本地测试
　　　　-找到文件路径，直接用浏览器打开
　　　　-用pycharm打开测试

　　4、编写html文件
　　　　一对尖括号就是一对标签，标签内部就是属性<html lang=“html属性”>html标签</html>

　　5、标签
　　　　-自闭合标签
　　　　<meta charset="UTF-8">
　　　　-主动闭合标签<a>链接跳转</a>
　　　　注释<!-- -->

　　　6、head标签中

　　　　<meta ->编码，跳转，刷新，关键字，描述，IE兼容

　　　　<link/>插入图标

　　　　<style/>
　　　　<scrip/>

　　7、input系列 + form
　　　　<form action="http://sougou.com" method="GET" enctype="multipart/form-data">
　　　　action:提交表单
　　　　只有<input>中的内容才能提交到服务器
　　　　method:
　　　　GET：提交时拼接到url中提交给服务器 可在网站网址url框看到内容
　　　　POST: 提交时放到HTTP包内发给服务器，请求头，请求内容

　　　　<input type="text"/>　　　　name设置文本框属性
　　　　<input type="password"/>　　name设置文本框属性
　　　　<input type="button" value="登陆3"/> 按钮
　　　　<input type="submit" value="登陆4"/>提交表单
　　　　<input type="radio" />　　　　单选框value，name属性 checked=checked默认值（neme相同互斥）
　　　　<input type="checkbox"/>　　复选框value，name属性（批量获取数据）
　　　　<input type="file"/>　　　　上传文件依赖from表单的一个属性<form enctype="multipart/form-data">
　　　　<input type="rest"/>　　重置
　　　　<textarea name="meno">多行文本</textarea>
　　　　<select name="city" multiple="multiple">name，内部option（下拉框内容）
　　　　<option value="1">北京</option> value提交到后台 multiple多选
　　　　<a><a/>标签
　　　　做链接
　　　　做锚
　　　　<img>插入图片
　　　　列表
　　　　<ul><li>
　　　　<ol><li>
　　　　<dl><dt><dd>
　
　　表
　　　　<table border="1">
　　　　<thead>
　　　　<tr>
　　　　<th>表头一</th>
　　　　<th>表头二</th>
　　　　<th>表头三</th>
　　　　<th>表头四</th>
　　　　</tr>
　　　　</thead>
　　　　lable用于点击文件，使得关联的标签获取光标
　　　　<label for="username">用户名：</label>
　　　　<input id="username" type="text" name="user"/>

　　　　<fieldset>
　　　　<legend>登陆</legend>

　

　　　　　　
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中
　　<script>
　　//javascript代码
　　alert(123);
　　</script>

　　<script type="text/javascript">
　　//javascript代码
　　alert(123);
　　</script>
- 文件
　　<script src='js文件路径'> </script>

PS: JS代码需要放置在 <body>标签内部的最下方

　　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<a.length;i=i+1){

　　}

条件语句
　　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：

　　　　　　<div onclick='func();'>点我</div>
　　　　　　<script>
　　　　　　function func(){

　　　　　　}

　　　　　　</script>

　　　　c. checkbox
　　　　获取值
　　　　checkbox对象.checked
　　　　设置值
　　　　checkbox对象.checked = true

html前端学习的更多相关文章

  1. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

  2. web前端学习部落22群分享给需要前端练手项目

    前端学习还是很有趣的,可以较快的上手然后自己开发一些好玩的项目来练手,网上也可以一抓一大把关于前端开发的小项目,可是还是有新手在学习的时候不知道可以做什么,以及怎么做,因此,就整理了一些前端项目教程, ...

  3. 【web前端学习部落22群】分享 碰撞的小球开源小案例

    对于课程中的疑问,大家可以加 web前端学习部落22群 120342833和其他老师还有众多的小伙伴们进行沟通交流哦,群里还有不少技术大拿.行业大牛 可以一起探讨问题,我们也会安排专业的技术老师为大家 ...

  4. web前端学习部落22群开源分享 左边菜单导航

    有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 <!DOCTYPE html> <html lang ...

  5. 【前端】Web前端学习笔记【2】

    [2016.02.22至今]的学习笔记. 相关博客: Web前端学习笔记[1] 1. this在 JavaScript 中主要有以下五种使用场景 在全局函数调用中,this 绑定全局对象,浏览器环境全 ...

  6. 前端学习 第七弹： Javascript实现图片的延迟加载

    前端学习 第七弹: Javascript实现图片的延迟加载 为了实现图片进入视野范围才开始加载首先: <img    src="" x-src="/acsascas ...

  7. 前端学习 第六弹： javascript中的函数与闭包

    前端学习 第六弹:  javascript中的函数与闭包 当function里嵌套function时,内部的function可以访问外部function里的变量 function foo(x) {   ...

  8. 前端学习 第五弹： CSS （一）

    前端学习 第五弹: CSS (一) 创建css: <link rel="stylesheet" type="text/css" href="my ...

  9. 前端学习 第四弹： HTML（一）

    前端学习 第四弹: HTML(一) 元素分类:块元素 内联元素 块级元素在浏览器显示时,通常会以新行来开始(和结束). 例子:<h1>, <p>, <ul>, &l ...

  10. 前端学习 第三弹： JavaScript语言的特性与发展

    前端学习 第三弹: JavaScript语言的特性与发展 javascript的缺点 1.没有命名空间,没有多文件的规范,同名函数相互覆盖 导致js的模块化很差 2.标准库很小 3.null和unde ...

随机推荐

  1. ubuntu下wps无法使用搜狗输入法输入中文

    sudo vim /usr/bin/et sudo vim /usr/bin/wps sudo vim /usr/bin/wpp 以上三个文件,都加入如下内容后重新打开文档即可 export XMOD ...

  2. 简单记录常用git 命令

    声明:仅作笔记用 拉取远程代码 1.git pull 2.如果需要,输入账户名密码 将本地代码推送到远程 1.git push 2.如果需要,输入账户名密码 同步远程分支 1.git fetch 2. ...

  3. 组件基础(插槽slot)—Vue学习笔记

    刚开始我们淡淡提过<slot></slot>现在深入了解一下. slot可以进行父组件传值到子组件. 比如:我们将hiboy通过<slot>传递到组件中. < ...

  4. Java - 集成开发环境Eclipse的使用方法和技巧

    00 - Eclipse教程 Eclipse 教程 01 - Eclipse设置编译和运行的环境 建议编译和运行的版本保持一致,否则请特别注意: 低编译,高运行 ---> 可行. 高编译,低运行 ...

  5. tkinter如何设置界面消失 当制作一个登陆界面时，登陆成功之后，如何让登陆界面本身消失

    tkinter如何设置界面消失 当制作一个登陆界面时,登陆成功之后,如何让登陆界面本身消失 if querySQL.checkAll():#用户名和密码都输入正确 self.root.withdraw ...

  6. idea安装破解永久有效

    首先先在下面地址下载好idea安装包 链接:https://pan.baidu.com/s/1gVl3WAjC_H6jrH2cjK1paw提取码:i2t5 再下载好破解所需的jar包 链接:https ...

  7. POJ 2560

    #include<iostream> #include<algorithm> #include<cmath> #include<iomanip> #de ...

  8. ThreadLocal是否会引发内存泄露的分析 good

    这篇文章,主要解决一下疑惑: 1. ThreadLocal.ThreadLocalMap中提到的弱引用,弱引用究竟会不会被回收? 2. 弱引用什么情况下回收? 3. JAVA的ThreadLocal和 ...

  9. 计算机网络 之 TCP协议报文结构

    前言:上学期实训课,由于要做一个网络通信的应用,期间遇到各种问题,让我深感计算机网络知识的薄弱.于是上网查找大量的资料,期间偶然发现了roc大神的博客,很喜欢他简明易懂的博文风格.本文受roc的< ...

  10. 分析Item

    分析Item例子1: class Parent { /* <init>() { super(); // JCES树节点,Item(void) px = 0; // JCES树节点,Assi ...