html前端学习

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/>插入图标

　　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"/>

　　　　　　
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{

　　}

== 值相等
=== 值和类型都相等
&& 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前端学习

最新文章

热门文章