前端入门03
ynsdg
HTML
1.属于大多数html元素的属性：class(定义类名)、id、style(规定元素行内样式)
2.< hr/>（下一行生成横向分隔线）与< br/>都是单标签
3.块元素与行内元素（css前置内容）
4.class用于创建类（块）
如< div class="nav(导航)">具体要加入的超链接< /div>
快捷创建方式：.+类名
5.id(块)
快捷创建方式：标签名#+id
6.span标签（内容包装起来便于使用css和js，用于内联样式化文本）
7.html表单（类似于创建表格）
7.1form标签（input输入标签（包含type属性））
7.1.1type="规定所要输入内容的类型，例如text"
7.1.2placeholder=“所要输入文本框中默认出现的灰字”（用作提示）
7.1.3value="一段文本内容，会自动填写该文本，即规定输入文本的初始值"（用于设置输入框初始值）
7.1.4label（与input标签搭配使用，用于实现一般登录页面输入用户名密码的效果）
语法格式：<label>文本</label>
生成标签时自动出现的for元素(用于通过id值和input文本框绑定)
语法格式:<label for="所需要对应input中设置的id值">
7.1.5< input type="radio">文本（实现类似于协议前是否同意的圆圈勾选，多个并列时若不设置，默认多选）
7.1.6< input type="radio" name="比如gender">(在并列且name值相同的几个中只能勾选一个)
7.1.7< input type="password">设置密码时可以实现已输入字符自动加密的功能
7.1.8< input type="checkbox" name=“”>（用于与圆形勾选类似的方形勾选，但此处设置name后仍为多选）
7.1.8<input type="submit">(提交按钮，将form包含所填的内容提交到谋一地址)
7.2form标签自动生成的action属性
语法格式：
< form action="后端提供API或者用#占位" value="按钮名称，默认为提交，可修改为其他文本但功能不变"></label>
CSS
1.由选择器、属性、属性值组成
2.css三种导入方式：内联样式、内部样式表、外部样式表（优先级逐级递减，高可覆盖低）
3.1直接在html标签中用style属性定义样式（内联样式导入css）
语法格式：<html标签 style=“属性=属性值”></html标签>
3.2.1在html的头部中加入style标签（内部样式表导入css）
语法格式：
3.2.2属性举例：颜色color、字体大小font-size、字体样式font-family等（可借助css手册了解）
3.3同级目录下创建一个css文件夹，文件夹中创建css文件
语法格式同上（只是写在不同文件中而已）：
选择器名称（比如所要作用的html元素标签名称）{
属性1：属性1值；
属性2：属性2值；
}
编写完外部css文件后，在html文档头部加入标签link,其中的href值为css文件路径（绝对或相对）
4.css中的选择器：元素、类、ID、通用、子元素（直接选择位于父元素内部的子元素）、6后代（包含）、并集（兄弟）、伪类选择器
4.2类选择器语法：
.类名{
属性1：属性1值；
属性2：属性2值；
}
4.3ID选择器语法：
#ID名{
属性1：属性1值；
属性2：属性2值；
}
4.4通用选择器语法：
*{
属性1：属性1值；
属性2：属性2值；
}
4.5子元素选择器：
外层标签类名设为father，内层所要选择的子标签类名设为son
语法格式：
.father > .(类名或者id名都可以){
属性1：属性1值；
属性2：属性2值；
}
4.6后代选择器（子代选择器不可修改孙代的内容，且利用ID>类>标签名）
语法格式：
.father 标签名（比上一级小即可）{
属性1：属性1值；
属性2：属性2值；
}
4.7兄弟选择器（只选择之后一个标签）
如有< p >相邻<h 3 >相邻
语法格式：
h3 + p{
属性1：属性1值；
属性2：属性2值；
}
操作的是后一个p标签内容
5.font属性（复合属性，一个属性可以设置多个样式）
如：
<h 1 style="font: （font包含的多个样式对应值，中间用空格隔开）">
6.line-height属性：控制长文本之间竖直间隔
7.块元素，如div标签；行内元素，如span标签；行内块元素，如img标签；
7.1块元素：宽和高都可以设置
7.2行内元素：宽度和高度设置都无效，只由行内包含内容决定
7.3行内块元素：若只设置宽度则会将图片按比例压缩，若设置高度则会实现拉伸效果
8.display：实现三种元素之间的转化
8.1例如将块元素转化为行内元素：(设置前背景颜色独占一行，设置后与行内元素特征相同，只有包含文本部分有背景颜色，实现宽和高由行内容决定)
JS
轻量级、解释型、面向对象脚本语言用以实现网页动态效果
导入方式：1内联（利用script标签既可以在head中也可以在body中嵌入）、2外部引入：保存在外部文件中，通过script标签的src（路径，同级目录为./同级文件夹名/文件夹中所要引入文件名）属性引入
console.log('需要打印的内容')：用于实现在控制台打印内容
快捷创建方式：log+tab
alert("所要打印弹窗内容")：用于实现刷新后出现的弹窗打印
基本语法：
1.变量声明：1.1无初始值变量“var 变量；”1.2有初始值变量“let 变量=初始值”（更安全更灵活）
2.常量声明：“const 常量=固定值”
3.打印：console.log(数个变量或者常量，中间用逗号隔开)
4.字符串：（字符串类型比如）let （字符串名称比如）name="文字"
5.空值：null（已声明且赋值为空值）!=undefined(已声明但未赋值)（区别开来）
6.控制语句：1条件语句、2循环语句（和c语言差不多）
7.函数：function 函数名(){
return 返回值；
}
调用函数：函数名();
有参函数（打印字符串）：
function 函数名(name){
console.log('hello,'+name)
}
8.事件：文档或浏览器窗口发生的特定瞬间，如点击等
事件绑定：html属性、DOM属性
标签绑定点击事件语法格式举例：
<button onclick="click_event()">这是一个点击事件按钮</button>
一个标签可绑定多个事件，用script中的函数来实现
9.DOM：
网页被加载时，浏览器会创建页面的文档对象模型
9.1通过ID获取节点：document.getElementById('一id名')
var x=document.getElementById('一id名');
console.log(x);
即可打印出id对应节点，此处变量x可当做一个对象看，后续函数调用需用变量名开头
9.2通过类名获取节点：document.getElementsByClassName('类名')
由于得到的是数组，则可通过规定方括号内数(索引值)来确定获得数组中的具体某个节点,若不规定则会默认打印出此类名对应的所有节点
var x=document.getElementsByClassName('类名')[0]
9.3通过标签名Tag获取节点：document.getElementsByTagName('标签名')
得到也是数组，同上理解
9.4（通过id获取节点，接收变量名如）x.innerHTML='修改对应id选择器文本内容'（innerHTML会解析html标记，若用超链接代替文本，则文字成功变成跳转链接）
9.5（通过类名等方式获取数组节点，接收变量名如）y.innerText='修改后的类/Tag选择文本'（innerText忽略html标记而当做纯文本来处理）
9.6（通过Tag获取数组节点，接收变量名）z.style.color/fontSize...(设置文本字符样式)='样式'
9.7通过DOM属性绑定事件
首先获取对象：
比如
var button_element=document.getElementsByTagName('标签名')[0];（通过索引值获取）
//检查是否获取成功
console.log(button_element);
9.7.1然后给属性赋函数值
button_element.onclick=function(){
alert('DOM 属性 按键触发')
}
9.7.1或者使用addElementListener传递两个参数
button_element.addElementListener('触发方式'，'触发事件后程序方程：function(){
alert('DOM 属性 按键触发')
}')
或者
button_element.addElementListener('触发方式'，触发事件方程函数名：clic_kevent)
function click_event(){
alert('通过addElementListener触发按键')
}
9.8表格的增删改查（在html和css篇幅较长时一般用外部导入js）
//首先获取需要操作表格table的对象，可给表格的table标签设置id
fuction addrow(){
//设变量对象名为table
var table=document.getElementById('table')
//求表格已有多少行，编号从0,1,2...算起
var length=table.rows.length;
//插入行节点
var newRow=table.insertRow(length);
//插入列节点对象
var namecol=newRow.insertCell(0);//插入姓名列占用行的编号0单元格，下面同理
var phonecol=newRow.insertCell(1);//插入姓名列占用行的编号0单元格，下面同理
var actioncol=newRow.insertCell(2);//插入姓名列占用行的编号0单元格，下面同理
//修改节点文本内容
namecol.innerHTML='未命名'；
phonecol.innerHTML='无联系方式'；
actioncol.innerHTML='<button>编辑</button><button>删除</button>'；
}
再分别给两个button通过标签属性绑定事件，如
<button onclick="deleteRow(this)绑定删除行函数，其中this表示点击事件发生所在的button对象">删除</button>，编辑按钮同理
//删除数据函数
fuction deleteRow(button){
var row=button.parentNode.parentNode;//button对象父节点为button对象所在单元格列(td)，单元格的父节点为单元格所在的行（tr）,获取到tr对象后删除即可
//由于不能自己删除自己
row.parentNode.removeChild(row);
}
//编辑数据函数
fuction editRow(button){
var row=button.parentNode.parentNode;
var name=row.cells[0];
var phone=row.cells[1];
//弹窗输入框和提示语
var inputName=prompt("请输入名字：")；
var inputPhone=prompt("请输入联系方式：")；
//单元格文本改变由弹窗输入而改变
name.innerHTML=inputName;
phone.innerHTML=inputPhone;
}