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. FileAttributeView出现空指针异常原因分析

    问题?   Java7新增了关于文件属性信息的一些新特性,通过java.nio.file.*包下面的类可以实现设置或者读取文件的元数据信息(比如最后修改时间,创建时间,文件大小,是否为目录等等).尤其 ...

  2. 获取请求地址的IP地址

    public static String getIpAddr(HttpServletRequest request) throws Exception { String ip = request.ge ...

  3. Java几种单例模式的实现与利弊

    饿汉式 提前new出来实例了,并不是在第一次调用get方法时才实例化,没有进行延迟加载 public class Singleton1 { private static Singleton1 inst ...

  4. [原创]Base32加密解密工具

    工具: Base32_Decode编译: VS2012  C# (.NET Framework v2.0)组织: K8搞基大队[K8team]作者: K8拉登哥哥博客: http://qqhack8. ...

  5. How To Scan QRCode For UWP (1)

    本文将介绍实现一个类似于微信扫一扫功能的UI界面,后续会再实现具体的识别二维码的功能. 实例使用的Win10 SDK Version是Windows 10 Anniversary Edition(10 ...

  6. 剑指offer八之跳台阶

    一.题目 一只青蛙一次可以跳上1级台阶,也可以跳上2级.求该青蛙跳上一个n级的台阶总共有多少种跳法. 二.思路 a.如果两种跳法,1阶或者2阶,那么假定第一次跳的是一阶,那么剩下的是n-1个台阶,跳法 ...

  7. 【从0到1学Web前端】CSS定位问题一(盒模型,浮动,BFC) 分类： HTML+CSS 2015-05-27 22:24 813人阅读 评论(1) 收藏

    引子: 在谈到css定位问题的时候先来看一个小问题: 已知宽度(假如:100px)div框,水平居中,左右两百年的分别使用div框填充.且左右div自适应. 效果如下图: 这个问题的难点主要是浏览器宽 ...

  8. iconfont 批量把图标加入购物车的方法

    在浏览器中按 f12 打开[开发人员工具],找到[console(控制台)],输入以下代码,再按回车,稍等片刻即可把全部图标加入购物车 var ll = document.getElementsByC ...

  9. Installation failed with message...It is possible that this issue is resolved by uninstalling an existing version of the apk if it is present, and then re-installing.

    错误弹窗如图: Installation failed with message Failed to finalize session: INSTALL_FAILED_TEST_ONLY:instal ...

  10. Centos7下安装redis实战(单机版以及集群)

    一.背景 因项目需要,要引入redis做缓存,就在centos7下亲自安装了一遍redis,刚好趁着这个机会就来把redis的概念以及单机版和集群版redis安装步骤记录下来,在此和大家一起分享. 二 ...