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. re模块 模块

    import re findall()  烦的奥 import re # 1. findall 查找所有结果,数据不是特别庞大 lst = re.findall('a','abcsdfasdfa') ...

  2. MySQL order by的实现

      1.使用索引的已有顺序 2.filesort算法 filesort算法的执行流程     filesort相关的参数 sort_buffer_size 算法排序缓冲区的大小,线程级缓存 max_l ...

  3. 设计模式《JAVA与模式》之命令模式

    在阎宏博士的<JAVA与模式>一书中开头是这样描述命令(Command)模式的: 命令模式属于对象的行为模式.命令模式又称为行动(Action)模式或交易(Transaction)模式. ...

  4. MyBatis全局配置文件标签详解

    一.全局配置文件结构 configuration 配置 properties 属性:可以加载properties配置文件的信息 settings 设置:可以设置mybatis的全局属性 typeAli ...

  5. iOS开发-带Placeholder的UITextView实现

    iOS中UITextField带有PlaceHolder属性,可以方便用于提示输入.但是同样可以进行文本输入的UITextView控件则没有PlaceHolder属性,还是有些不方便的,尤其是对于略带 ...

  6. postgresql-死锁

    死锁问题:1.长事务,事务中包含了文书的上传下载,导致其他表的锁等待,最终导致死锁. 2.并发更新,如果更新慢的话,很可能导致,锁等待.需要加for update或者ad lock 3.数据库中查询p ...

  7. Python小白学习之路（二十三）—【生成器补充】

    生成器的一些补充 接着下鸡蛋和吃包子! 补充一:生成器只能遍历一次 (总是把生成器比喻成母鸡下鸡蛋,需要一个下一个,首先是下出来的鸡蛋不能塞回母鸡肚子里,其次是一个母鸡一生只能下一定数量的鸡蛋,下完了 ...

  8. Java调用HTTPS接口的证书配置

    首先需要获取到证书文件. 然后,将证书导入到本地: keytool -import -noprompt -trustcacerts -alias <AliasName> -file < ...

  9. HDFS概要

    --HDFS-- Hadoop Distributed File System HDFS一个分布式,高容错,可线性扩展的文件系统 简介: Hadoop分布式文件系统(HDFS)是一种分布式文件系统,设 ...

  10. EXECUTE 后的事务计数指示缺少了 COMMIT 或 ROLLBACK TRANSACTION 语句。上一计数 = 1，当前计数 = 2

    理解这一句话: 一个begin tran会增加一个事务计数器,要有相同数量的commit与之对应,而rollback可以回滚全部计数器 这个错误一般是出现在嵌套事务中. 测试环境 sql 2008 例 ...