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. padding(内边框), border(边框), margin, 标准文档流, 块级元素和行内元素, 浮动 ,margin的用法

    盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型 ...

  2. spring cloud学习(三) 断路器

    在Spring Cloud中使用了Hystrix 来实现断路器的功能.Hystrix是Netflix开源的微服务框架套件之一,该框架目标在于通过控制那些访问远程系统.服务和第三方库的节点,从而对延迟和 ...

  3. Freemarker实例教程

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本人声明.否则将追究法律责任.作者:永恒の_☆ 地址:http://blog.csdn.net/chenghui0317/a ...

  4. Hadoop环境搭建及wordcount程序

    目的: 前期学习了一些机器学习基本算法,实际企业应用中算法是核心,运行的环境和数据处理的平台是基础. 手段: 搭建简易hadoop集群(由于机器限制在自己的笔记本上通过虚拟机搭建) 一.基础环境介绍 ...

  5. 源码分析篇 - Android绘制流程（二）measure、layout、draw流程

    performTraversals方法会经过measure.layout和draw三个流程才能将一帧View需要显示的内容绘制到屏幕上,用最简化的方式看ViewRootImpl.performTrav ...

  6. 【转】Intellij IDEA使用总结

    原文地址:http://totohust.iteye.com/blog/1035550 1. IDEA内存优化 先看看你机器本身的配置而配置. \IntelliJ IDEA 8\bin\idea.ex ...

  7. JavaScript -- FileSystemObject-文件夹

    -----057-FileSystemObject-文件夹.html----- <!DOCTYPE html> <html> <head> <meta htt ...

  8. 基于boot2docker部署Docker环境

    Docker轻量级的特性使得我们可以快速打包开发环境:一处编译,到处使用.我们可以在第一次编译好需要的开发环境,然后把镜像导出打包,只有有docker环境,便可以快速还原原来的开发环境. 很常用的一个 ...

  9. solr(四) : springboot 整合 solr

    前言: solr服务器搭起来, 数据导入之后, 就该应用到项目中去了. 那在项目中, 该怎么整合和应用solr呢? 接下来, 就来整合和应用solr 一. 整合 1. 引入jar包 <prope ...

  10. linux sticky

    文件的粘滞位(sticky)位是作什么用的? 普通文件的sticky位会被linux内核忽略, 目录的sticky位表示这个目录里的文件只能被owner和root删除 粘着位(Sticky bit) ...