学习总结（一）
新手入学（第一节）
1.<!DOCTYPE html>
声明这是一个h5网页
2.<meta charset=”utf-8”>
设置网页编码格式为utf-8，避免中文乱码
3.<title>标签</title>
网页的标题
4.标签
开始标签 <英文字母>，标志着元素的开始
结束标签 </英文字母>，标志着元素的结束
元素 <英文字母>内容</英文字母>
元素内容 标签之间的内容，会显示在页面上
5.标签的分类
双标签 <body></body>
单标签 <br /> 或<br>
6.<html>
<head></head>
<body></body>
</html>
html 是根元素
head 头部标签，放页面的重要信息，引用外部文件，定义媒体，编码等
body 页面中所有可见的内容都放里面
7.<h1>内容</h1>
h标签,标题，加粗，独占一行，h1~h6
8.<p>内容</p>
p标签 段落，独占一行，两端之间有空隙
9.快捷键、注释
ctrl+/
10.<br>标签
换行，两行之间没有空隙
11.<b>内容</b>
<strong>内容</strong>
加粗，b常用，b单纯加粗，strong有强调语气，浏览器渲染时会更偏重strong
12.<i>内容</i>
<em>内容</em>
斜体、em标签有强调的语气
13.<u>内容</u>
<ins>内容</ins>
下划线、ins有强调这是插入的文本的意思
14.<del>内容</del>
<s>内容</s>
删除线，del有强调的语义，del更常用
15.转义字符 &字符名字
 ；空格
&lsaquo； <
&rsaquo； >
&trade； TM
©right； 版权符号
16.<sup>2</sup>
<sub>2</sub>
sup上标签，让元素显示在右上角
sub下标签，让元素显示在右下角
17.块元素：独占一行，可以包含其他元素或行内元素，如h1、p，p元素里不能放块元素
行内元素：不独占一行，一行里可以有多个行内元素，如b、u、i、del等
18.style=””
样式
19.color
颜色
20.内容
本身没有语义，用来帮助处理文本
21.img
图片
22.src
地址
23.标签的属性
格式 属性名=”属性值”
位置 开始标签里
作用 设置标签的附加信息
24.<img src=”” alt=”” title=””>
作用 显示图片
属性 src 必要属性，定位图片的位置
alt 图片的描述信息，在图片无法正常显示时显示
title 图片的标题，鼠标悬停在图片上时显示
25.width 宽度，height 高度
26.路径
相当于电子路线，定位到计算机上的资源文件，
相对路径：相对当前文件的位置，寻找其他目标资源的路线
./或者文件名 在当前文件的相同目录下
./xxx 进入下一级文件
…/ 进入上一级文件
绝对路径：全本地地址，文件在计算机上的完整地址，通过以盘符开头，通过Hbuilder等工具运行的html页面是通过它的内置服务器显示的，浏览器为了安全，不允许服务器上的html页面访问本地文件。
27.无序列表 ul
<ul type=””>
<li>内容</li>
</ul>
li标签表示列表项可以放其他任何标签，常用的是a标签，无序标签前面是项目符号，可以通过type属性修改项目符号默认空心圆，disc 实心圆点，circle 空心圆，square 正方形
28.有序列表 ol
可以通过type修改序号，默认1，1 阿拉伯数字，A/a 英文字母，I/i 罗马数字
29.自定义列表 dl
<dl>
<dt>内容</dt>
<dd>内容</dd>
</dl>
dt 表示术语，标题，dd 表示对术语的解释，dt和dd标签里都可以嵌套其他标签
30.a标签
< a href=”” target=””>内容</a>
href 定义超链接跳转的路径。target 定义跳转的方式，_self 默认，在当前窗口显示，_blank 空白页面显示，_parent 在父页面的窗口显示
31.锚点
< a href=”#XXX” >内容</a>
<p id=”XXX”>内容</p>
定位的点，设置id属性，a标签里的href属性值=”#对应锚点的id属性值”
新手入学（第二节）
32.表格table
<table border=”1”>
<thead>
<tr>
<td rowspan=”x”></td>
</tr>
</thead>
</table>
tr 表示一行，td 表示一个单元格无加粗效果，th 表示标头单元、有加粗效果
border 表格的边框、值是数字，cellspacing 单元格之间的空隙、值是像素px，cellpadding 单元格的内边距、值是像素px，align 控制表格的位置、值center、left、right,
表格的结构：thead>tbody>tfoot、显示顺序不会改变
rowspan 合并行，colspan合并列
33.表单域 form
<form name=”xxx” action=”url”></form>
name 表单域的名字、一个html中可以有多个表单域，action 设置处理表单的服务器程序的url地址，method 设置提交表单的方法、get把提交的参数附在action的url地址中、会显示在地址栏、用于不需要保密的信息、如分页，post 把提交的参数包含在表单中、不会显示在地址栏
34.表单元素input
<form>
<input type=”XXXX”/>内容
</form>
表单元素需要放在表单域中，行内元素，type属性、text 输入框、password 密码框、
raaio 单元按钮（男/女）、checkbok 复选框（记住密码）、date 日期 （yyyy/mm/dd）、datetime-local 日期 时间、color 颜色选择框、file 文件选择框（选择上传照片）、
month 日期、button 按钮 value=”登录”、submit 提交、reset 重置
其他：
<form action=”” method=”get”>
<label for=”user”>用户：</label>
<input type=”” name=”user” value=”man”>男
<input type=”” name=”user” value=”woman”>女
<button disabled>验证</button>
</form>
label 为元素设置标注，label的for属性可以绑定一个元素、当点击label时，被绑定的元素会获取到焦点，for=”被绑定元素的id值”、没有#号
disabled 设置元素不可用
name 定义元素的名字，它的值来自输入的值或者value中设置的值，一组单选按钮的name属性值应该设置为同一个值、被选种的按钮的value值会赋值给name，一组复选框的name属性值应该设置为同一个值、被选种的复选框的value值构成一个数组
value 设置元素的值，placeholder 设置输入框中的提示文字，required 设置必填项，如果不填将会弹出提示信息，checekd 在打开页面时、让元素选中状态，readonly 设置元素只读
35.select标签
<select name=”job”>
<option value=”it”>程序员</option>
</select>
定义一个下拉列表，选项用标签包裹，name属性写在select标签中，选项的值写在option中
36.textarea标签
<form>
<textarea name=”words”></textarea>
</form>
多行文本框
37.内联框架 iframe
<iframe name=”content” src=”www.com”></iframe>
在页面中嵌入另一个页面，src设置嵌入页面的url地址
实现点击链接切换页面
<a href=”” target=”content”>选择页面</a>
为iframe页面设置name属性，a链接的target=”iframe的name属性值”，a链接的href写要跳转的页面url地址
38.div标签
<div>
<p></P>
</div>
块元素，相当于一个透明的盒子，常用于页面布局
39.音频 audio
<audio src=”www.com” autoplay=”autoplay” controls=”controls” muted=”muted”>
不支持
</audio>
src 设置音频的url地址，controls 设置显示音频的控件、属性值设置为controls，muted 设置音频禁音状态
40.视频 video
<video src=”www.com”>
不支持
</video>
新手入学（第三节）
41.<p align=” center”><b>内容</b></p>
居中
42.Padding
内边距
43.<table border=”1” cellspacing=”10” cellpadding=”20” align=”center”>
表格中单元格的内边距 cellpadding 值px
单元格之间的边距 cellspacing 值 px
44.快捷键 光标选中所在行移动
alt + 上下键
45.<iframe src =”./mmm” frameborder=”0” naem=”1”></iframe>
src=""代表默认的页面路径
Frameborder=“0” 设置iframe的边框 值为0/1
46.a标签中如果不添加target属性值，他会自动跳转至其他页面，不会在iframe内部进行跳转，a标签中的target和iframe中的name属性相同时，就会在iframe内部进行展示对应的页面——内联框架的切换
47.音频audio
<audio autoplay loop controls src= "www.com>
controls用户控制，src音频地址:可以用本地路径、也可以用在线路径，autoplay自动播放，这个属性并不是所有浏览器都支持、基本不设置，loop循环播放
48.css 构建衣服
叠层样式表cascading style sheet
语法规范
样式属性： 样式属性值
外部 选择器{
样式属性：样式属性值
}
49.内联样式
<h1 style=" text-align: center;" >内容</h31>
居中center，right靠右
通过;分割，小缺点只会对其中一个标签生效，开发中不推荐使用该方法:会影响页面生成的速率，如果祥式多了、采用此方法就会影响代码结构、不方便修改
如果需要对某一个标签单独设置特别的样式、并且不需要太多的代码量、就使用内联样式
50.内部样式
<style>
选择器{
color：#111；
}
</style>
文字颜色
51.外部样式
<link rel=" stylesheet" href=”地址”>
rel=“stylesheet“声明引入文件为css样式文件，href=”“引入css样式文件地址
@import url("day03-css外部样式.Cs5");
外部样式引入部分浏览器、老版本浏览器不支持
link标签 推荐使用、代码量多，
52.样式的优先级
行内/内联样式>内部样式>外部样式
53.样式写法规定
外部样式、最先写、页面加载时、link会同时被加载出来、里面的样式最先读取
内部样式第二写
最后补充写内联样式
54.id选择器
#设置的样式名{
样式属性：样式属性值；
}
必须唯一、在js操作中会产生的影响，或者需要对a标签进行锚点跳转时会有影响
<a href="#tit1" >内容</a>
<h1 id="tit1" >内容</h1>
55.多个样式
自定义样式名后通过空格分割再对其添加某一个单独设置的样式
56.元素/标签选择器
如果说整个页面中只有一个标签需要对其设置样式， 那么就可以使用这个选择器
a{
}
57.通配符选择器
*{
}
58.复合选择器
交集选择器-- -需要满足所有条件
选择器1选择器2{
}
并集选择器-----满足一个条件即可
选择器1，选择器2{
}
59.关系选择器
后代选择器
父亲后面的所有相同类型子元素
父选择器 子选择器{
}
子代选择器
父亲的直接子元素选择
父选择器>子选择器{
}
60.紧挨着的兄弟关系
前一个+后一个{
}
61.哥哥后面的所有弟弟
后一个相同类型的所有选择器
前一个~后一个{
}
62.标签成对出现，单标签在最末尾加上/表示结束
63. 表示一个空格键的间距
半角空格，所占的位置代表了1个中文字符宽度的1/2
全角空格，所占的位置代表1个中文字符的宽度
64.设置文本缩进
text- indent: 2em;
em相对单位，1em=1个文字的大小
65.font-size: 50px; 字体大小
66.动态伪类
未点击
标签:link{
}
鼠标移入 如果放在visited之前不会有效果
标签:hover{
}
点击时 如果放在hover之前会没有效果
标签:active{
}
点击后
标签:visited{
}
1172
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
