这是我当年学习html和css记的笔记，槽点很多，留档纪念一下
基本标签
html的常用标签以及速记技巧
- h是标题符号 h是好的拼音 你说好好好就代表要写标题了
- 换行用br 是补入的拼音 补一行
- 划线 好人和坏人划距离 所以好人的拼音hr是划线
- p 写作文经常水p话，所以p是分段
- b big很粗 所以是加粗
- i 当你i了i了的时候会倾斜，所以i是倾斜
- u u是下滑
- alt 当你图片加载失败你会说“啊咧，图？”所以alt是图片稀碎的显示
- pre pre（破）软件不给我按格式写字，所以pre是按格式的意思
- div标签可以放入一切内容 加上会换行
- span标签只能存放文字 加上什么都不会发生
- 比如 离离原上草一岁一枯荣
全称标签
全称会被seo注重
- strong 强壮的人胳膊粗
- em 你给别人干无语emm的时候别人都想跑，所以em是倾斜
- ins 下滑
排序方法
- ul wu序lie表简称ul
- li lie的拼音
- ol you序lie表的简称
- dt 是down标ti的简称
- dd 是downdown的简称，人下人，所以是最低级的列表
列表方法
- table是列表的意思 让你的表格有大框架 大桌子
- tr 图入是一行的意思 图里面入需要建一行
- td 退订是一列的意思 比较恶“列” 所以禁用退订td
- th是标题的标签,可以加粗用
- caption 标签叫做表头,可以放在表格上面 只能加table上
- cellspacing是单元格间距 默认合并
- cellpadding是单元格边框尺寸
- align="center"是水平居中，其他也可以改 每个表格标签都可以改
- valign是竖直居中 如上
- colspan=2 意味着合并两个横排单元格
- rowspan=2 意味着合并两个竖排单元格
- 举个栗子：
| 课程表 | 周三 | 周六 |
|---|---|---|
| 上午 | c#开发 | js入门 |
| 下午 | html练习 | |
关于定义属性
- 标签后加 name=“张三” 无需定义就可以用
- color=“颜色”
- size大小
- face 字体
- herf 链接 用a属性声明
html end....?....？？？还没开始呢
关于html基础介绍
- !doctype html
意思是doc 的 type 是html - 默认dreamcs6 使用的是严格或者过度 对语法很严格，没必要，用html5就行
- 不想让其解析就byd只能用转义符，无语了
左半括号是 & lt; 速记：是老铁； 实例“<”
右半边括号 & gt; 速记: 是钢铁； 实例“>”
空格符号是 & nbsp; 速记:牛逼视频; 实例“ ”
一般都是这些，当然也可以别的
练习：
雌小鬼： <杂鱼>整个就是在形容 前辈 吧！♥
- 每个元素都可以加id=>用于js 也可以加class class是一个类，一组数=>用于css 也可以加name=>用于表单 style属性=>临时代替css
- <meta setchar=“utf-8” /> 设置格式比如utf8
- meta还用于设置关键字便于搜索引擎收录
关于表单
- placeholder是文本框里面的水印字
- value里面的值是文本框文字的默认值
- input类型默认就是文本框
- type="password"密码框"radio"单选框 "checkbox"多选框 "file" 文件上传款
- button是按钮 也可以input type去改属性，input一般用于表单，button就是按钮
- multiple是允许多文件上传
- checked是默认选中
- 只需要给单选框赋值同一个name就可以让他们二选一
- 用for属性可以远程操作空间
- select是多选条 里面包裹 option为选项 可以用selected来设置默认选中
- textarea是大文本框 可以输入大量文字 cols rows来设置尺寸
- required可以用在输入框，意思必须填写，不可空
- autofocus意思是自动选择输入框
input type也有email格式还有date日期week星期等color range number
表单实例：
<input placeholder="这是测试">
<!-- 默认是text -->
<input type="password">
单选：<input type="radio" name="sex" checked>
<!-- checked是默认选中的意思 -->
单选：<input type="radio" name="sex">
<!-- name意味着一类 -->
<!-- 单选框 -->
多选：<input type="checkbox">
<input type="file" multiple>
<!-- multiple是多文件允许上传的意思 -->
<br>
<input type="button" value="按钮扭">
<button>按钮扭</button>
<input type="reset">
<input type="submit">
</form>
<br>
<select>
<option value="">北京</option>
<option value="" selected>上海</option>
<!-- selectd是默认选中 -->
</select>
<br>
<!-- form显示的是作用域 -->
<textarea name="" id="" cols="30" rows="10" placeholder="文本框" required="required"></textarea>
<!-- 上面两个值是设置尺寸 -->
<BR>
<label><input type="radio" name="1" id="2">单选</label>
<label><input type="radio" name="1">单选</label>
<!-- label指定了选 择的范围 -->
<label for="2">也可以用for来远程选择</label>
（github无法正常显示，请下载md文件查看）
<br>
<br>
<br>
HTML进阶版
框架
- frameset rows是行数 cols是列数 横行竖列 src=""表示链接的位置
- a标签 属性target：跳转页面的框架选择
取值可以是name 也可以是_blank 新窗口打开 或者 _parent直接当前页面跳转 - 可以进行内嵌框架 比如用一个包含了css的div包住框架 用sytle="width：200 heigh：999;border：10 dotted #颜色"可以设置边框 这是div属性
特殊控件
<hr><video src="./1.mp4" autoplay loop controls muted></video>
<!-- 视频和音频一样 加上muted后谷歌浏览器可以自动播放，可惜静音-->
<hr>
<embed src="video.mp4" width="400" height="300">会自动调用浏览器的一切组件加载多媒体文件，而没有内置播放器 兼容可能差 autostart是自动播放 loop循环可以赋值次数 hidden用来设置是否隐藏面板
这下html真暂时完结了
CSS
关于选择器
- <sytle> 标签可声明css
- 标签选择器语法 标签名{} 比如p{}
- id选择器 定义一个标签id #id名{}
- class选择器 .class名字{}
- class可以是多个 只需要空格分开就行
- 多样选择器--
标签名.classname1.classname2{ }
不存在的可以删去 - 后代选择器 比如一个p在div里 我们可以直接 div p{sytle} 这样写就可以中间是空格
- 子元素选择器 div>p{} 只选择div下的p，其他更下级就无视
- 多元素选择器 div,p,span{}写了很多元素，他们同时选择，用逗号分隔
- 统配选择器*{}全局选中
- 伪类选择器 a:link{}正常链接状态 后面改为visited就是点击之后hover是移动上去 active是按下去
- 伪对象选择 p：first-letter 这里是选择第一个字 letter改line是第一行
- 相邻元素选择器 div+p div与p相邻的项数选择p
- 属性选择器[age]{ } 通过[]里面的属性选择 定义比如：《p age=“1”》 也可以acg后面加上数值
- 伪对象 .XXX：：after{ content"123";} 会在开头或结尾增加内容 是行元素 可以用display转换block块元素
16.
关于属性
.csss{
/* 不用class是通用控件更改 用。来识别class */
width：200px；
height：200px;
//盒子属性
font-size: 50px;
/* 文字大小 */
font-weight: 600;
/* 无极粗细 */
font-style: italic;
/* 倾斜 */
font-style: normal;
/* 恢复 */
font-family: "华文行楷","黑体","微软雅黑";
/* 字体 按顺序有哪个用哪个 还可以调用字符字体webdings*/
text-decoration:line-through;
/* 划线 */
text-decoration: none;
/* 恢复 可设置超链接无下划线*/
text-transform: uppercase;
/* 变大写 还有capitalize叫首字母大写 lowercase转换小写 */
text-transform: none;
/* 恢复 */
text-align: left;
/* 对齐方式-居中 left center right*/
text-indent: 2em;
/* 首行缩进两字符 */
line-height: 100px;
//距离顶部行高100px
background-image：url(1.png)
//背景图
background-repeat：no/repeat/repeat-x/y
//拉伸设置
background-position：bottom right;
//所在位置
background-color：red;
//背景颜色
backgrond：pink url（1.png） no-reapeat left top /50px 50px
//无敌结合版 直接设置全部属性
background：linear-gradien（to right,20% red，green）;
//背景渐变从20%红到绿 从左到右 可以更多种颜色 不过这也太土了
background：radial-gardient（circle,red，green）;
//背景渐变之从里向外圆形渐变 土味程度堪比测视力用的图片
list-style-type：none；
//列表 去掉小圆点 也可以utl加图片
overflow-x：auto;
//自动兼容滚动条 只有横向 防止内容溢出 hidden隐藏滚动条 scroll-强制显示两边滚动条 x、y或者不写都可以，x只有横向超出隐藏 y同样
padding-top：50px
//上面填充50px的空白 空白会直接加边距 所以需要在盒子的宽高给减去
//也可以
padding：50px 20px：是左右上下两个方向的填充
margin-left：50px 外边距 盒子距离页边距的远近
margin：0 auto 让盒子居中
//直接padding：0；margin：0；就是清除间距
通过这个控制logo位置
boarder-radius：100px；
//100px的圆角 或者百分之几也可以
也可以直接四个赋值 分别代表四个角 两个数值是一半一半
boarder-bottom-right-radius：100px；
//一个边角
}
综合学习
- 一般图片使用img标签 大图或者背景才用背景图
- 内联样式：直接写css标签
- 外联样式：用<link rel="stylesheet" href="./hellocss.css">这种格式链接css文件
- 行内样式就是简单直接写里面
- 继承 css中的继承就是div里的东西被改属性了，就叫继承div属性
冲突时候以子元素为准 不继承了 - 对于某一条属性 在后面加上！important 可以进行强制执行，优先级第一名
- 块元素 有宽高 可以独占一块 比如div 行元素不行比如span
- 行内块元素 可以设置宽高不可以设置换行显示 比如img
- 行元素块元素可以通过display进行转换，语法：display：inline；或display：block；
<!-- <div class="csss">更改这里的属性abc</div> -->
案例:谷歌（css渲染）
G
O
O
G
l
E
<br>
JS的学习
- <script src="./js.js"></script>
代表外置加载js - alert("helloworld，你好js");
弹出helloworld - var a=10;
a="helloworld";
alert(a);
// 弱类型语言的体现 - var date=new Date();
alert(date);
显示日期 - alert(date.toString());
转向字符串 用于把数字转换 - function showTime()
{
//定义方法
var date=new Date();
alert(date)
} - eval('alert("hello?");');
将一段字符串当成代码 可以用于将获取的字符串执行 - for (let i = 0; i < 10; i++)
{
document.write(i); }
for循环写在页面 - <button onclick="showTime();">点我显示时间</button>
在按钮中嵌套点击属性 - 方法的完整用法
function 方法名(参数值1,参数值n)
{
alert (a+b) //弹出结果
return (a+b); //返回结果
}
因为是弱类型不用写返回值 - 调用上边的方法
var a= 方法名(1,2);
如果是执行的方法就写
方法名(); js不存在类似各路c语言类似的方法重载
后声明的覆盖先声明的function sum()
{ var sum=0;
for (var i = 0; i < arguments.length; i++)
{
sum+=arguments[i];
}
alert(sum);
}sum(1,2,3,4,5);
- 匿名方法--不写方法名
在大括号后面写上小括号里面放上参数,用于调用一次的时候
你也可以使用function(参数){return xxx}会将return的数值赋值
可以var a =new function （"n1","n2","return n1+n2"） ;
同样也可以将方法赋值给var数值 - 事件也可以写成比如 xxx.onclick 就是点击时候的事件
- 闭包的概念 在函数内部调用之前声明过的变量 --避免闭包以免问题 每次先声明再使用
- 面向对象 方法和类其实都是funtion 区别是方法名首字母小写 类名大写（byd,人工区分是吧） 可以声明字段 如this.Name=name;
调用操作就是 var 名字=new 类名（）;
名字.方法(); 就像c#一样 - 原型 通过对象往类里加方法或者字段 比如p1方法里 通过p1.--proto--.Title="abc";添加title字段
- 数组与键值对 数组比如 var array1={a，123,“abc”}
键值对 var a ={name："123",age:66};
访问方法 a[‘name’]; - 三个提示框 1.alert()弹出提示 2.confirm()确认对话框 返回true和flase 3.prompt() 返回用户输入或者空或null
- setinterval("代码"/方法名,间隔毫秒) 定时器间隔执行，会反复执行
- clearinterval(id) 清除上方定时器
- settimeout(代码，延时) 延迟执行一次代码
- location.herf="github.com" 表示当前浏览器地址栏显示什么
- 匿名方法--不写方法名
事件的学习1. var temp1=document.getelementbyid()根据id获取元素
- var templ2=docment.getelementbyname()根据name获取元素 返回数组
- 想改的话比如 temp1.value=显示时间 就可以更改其内容
- 在元素中注册时间 比如在控件的最后写上 onclick=""； 取到元素后输入例如.onclick就可以绑定事件
- onload叫做加载完成事件 全加载完使用这个 使用方法：onload="xxx" 或者等于一个方法 会自动触发 用这个方法可以避免控件位置导致的事件不执行