前端学习记录1
基本结构
<html>
<head>
<title>我的第一个页面<title>
</head>
<body>主题内容</body>
<html>
快捷键
快速复制一行 shift + alt +上下箭头
选中多个相同单词 ctrl + d
添加多个光标 ctrl + alt +上下箭头
全局替换某个单词 ctrl + h
快速定位到某一行 ctrl + g
选择某个区块 shift + alt
<！DOCTYPE html>
文档类型声明标签，告诉浏览器这个页面采取htm15版本来显示页面.<html lang= “en”>
告诉浏览器或者搜索引擎这是一个英文网站 本页面采取英文来显示
<meta charset=“UTF—8”/>
必须写，采取 UTF—8来保存文字.如果不写就会乱码
常用标签
| 标签 | 案例 |
|---|---|
| 标题标签 | <h1>今天17点59分</h1> |
| 段落标签 | <p>我是一个段落标签 </p> |
| 换行标签 | <br />(单标签) |
| 链接 | 这是一个链接 href:属性中指定链接 |
| 图像 | |
| 水平线 | <hr> |
| 注释 | <!-- 这是一个注释 --> |
| 标签 | 案例 |
|---|---|
| 加粗 | <p>这是一个普通的文本- <b>这是一个加粗文本</b>。</p> |
| 斜体字 | <i>The lightning</i> |
| 小号字 | <small> Copyright 1999-2050 by Refsnes Data.</small> |
| 着重 | <strong>加粗文本</strong> |
| 上标字 | <p>这个文本包含 <sup>上标</sup> 文本</p> |
| 下标字 | <p>这个文本包含 <sub>下标</sub>文本。</p> |
空元素：没有内容的 HTML 元素，空元素是在开始标签中关闭的。
<div><span>:没有语义 相当于一个盒子 用来装内容
<div>这是头部</div> 自己独占一行
<span>今日价格</span> 都在一行 跨距
<alt>
<h4> 图像标签的使用：</h4>>
<img src="img.jpg"/>
<h4> alt 替换文本 图像显示不出来的时候用文字替换：</h4>
<img src=“img1.jpg” alt=“我是pink老师”/>
title
<h4> title 提示文本 鼠标放到图像上提示的文字：</h4>
<img src="img1.png" alt=“我是pink老师” title=我是LianJXian思密达>
图像标签属性注意点：
① 图像标签可以拥有多个属性，必须写在标签名的后面。
② 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
③ 属性采取键值对的格式，即 key= “value”的格式，属性 =“属性值”。
超链接标签
在HTML标签中，<a>标签用于定义超链接，作用是从一个页面链接到另一个页面。
<a href=“跳转目标”target=“目标窗口的弹出方式”> 文本或图像 </a>
| 属性 | 作用 |
|---|---|
| href | 用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能 |
| target | 用于指定链接页面的打开方式，其中self为默认值，blank为在新窗口中打开方式。 |
1.外部链接：例如< a href=“http：//www.baidu.com”>百度</a >.
2.内部链接：网站内部页面之间的相互链接.直接链接内部页面名称即可，例如< a href=“index.html”> 首页</a>.
3.锚点链接：<a href=“#oldman”>圣诞老人的由来</a>
<h2 id=“oldman”> 圣诞老人的由来</h2>
表格标签
<table>
<tr>
<td>单元格内的文字</td>
..
</tr>
</table>
注：
<table> </table>是用于定义表格的标签。
<tr> </tr>标签用于定义表格中的行，必须嵌套在<table> </table>标签中。
<td> </td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
字母 td 指表格数据（table data），即数据单元格的内容。
<table>
<tr><td>姓名</td><td>性别</td><td>年龄</td></tr>
<tr><td>连君贤</td><td>男</td><td>20</td></tr>
<tr><td>樊士豪</td><td>男</td><td>20</td></tr>
<tr><td>抽象类</td><td>男</td><td>20</td></tr>
<tr><td>尚进哲</td><td>男</td><td>20</td></tr>
</table>
<th>： 标签表示HTML 表格的表头部分（table head 的缩写）
<thead>标签表格的头部区域、<tbody>标签表格的主体区域.
合并单元格
跨行合并：ro wspan=“合并单元格的个数”
跨列合并： colspan=“合并单元格的个数”
列表标签
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签：
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
无序列表使用 <ul> 标签：
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
表单标签
input输入
写表单元素 先写表单域<from></from>
文本域
<input type="text"> 标签来设定
当用户要在表单中键入字母、数字等内容时，就会用到文本域。
密码字段
<input type="password">
button
定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。
checkbox
定义复选框。
file
定义输入字段和“浏览”按钮，供文件上传。
hidden
定义隐藏的输入字段。
image
定义图像形式的提交按钮。
password
定义密码字段。该字段中的字符被掩码。
radio
定义单选按钮。
reset
定义重置按钮。重置按钮会清除表单中的所有数据。
submit
定义提交按钮。提交按钮会把表单数据发送到服务器。
text
定义单行的输入字段，用户可在其中输入文本。默认宽度为 20个字符。
注：name 表单元素的名字，要求 单选按钮和复选框要有相同的name值.
<form>
姓名：<input type="text" id="name" name="name"><br><br>
电子邮箱：<input type="email" id="email" name="email"><br> 选项：<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女<br><br>
多选：<input type="checkbox" name="interest"value="reading">阅读
<input type="checkbox" name="interest" value="swimming">游泳
<input type="checkbox" name="interest" value="running">跑步<br><br>
按钮： <input type="button" value="提交" onclick="submitForm()"><br><br>
</form>
<label for="sex">男</label><input type="radio" name="sex" id="sex" />
注：<label> 标签的 for属性应当与相关元素的 id属性相同。
select下拉
<form>
籍贯：
<select>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
<option select="selected">辉县</option>
<option value="杭州">杭州</option>
<option value="南京">南京</option>
<option value="苏州">苏州</option>
<option value="无锡">无锡</option>
</select>
</form>
textarea文本域
<textarea rows="3" cols="20">
文本内容
</textarea>
CSS
CSS 规则由两个主要的部分构成：选择器以及一条或多条声明。
选择器
类选择器
样式 .定义，结构 class调用
id选择器
样式 #定义，结构 id调用，只能调用一次，别人切勿使用
标签选择器 可以选出所有相同的标签，比如p
类选择器 可以选出1个或者多个标签
id选择器 一次只能选择1个标签
通配符选择器 选择所有的标签
字体属性
font-family: 'Microsoft YaHei';
font-style: italic; //斜体
font-size: 30px;
复合属性
body {
font: font-style font-weight font-size/line-height font-family;
}
必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
字号和字体必须同时出现
文本属性
text-align: center //居中对齐
让行高等于盒子的高度就是垂直居中
eg: height: 40px;
line-height: 40px;
ext-decoration: underline; //装饰文本
text-indent: 2em; //首行缩进
line-height: 2; //行间距
引入方式
内部样式表
是写到html页面内部. 是将所有的 CSS 代码抽取出来，单独放到一个<style> 标签中。
行内样式表
是在元素标签内部的 style 属性中设定CSS 样式。适合于修改简单样式.
<div style=“color： red； font—size： 12px；”>青春不常在，抓紧谈恋爱</div>
直接在body语句中添加即可
外部样式表
实际开发都是外部样式表.适合于样式比较多的情况.
核心是：样式单独写到CSS文件中，之后把CSS文件引入到 HTML 页面中使用.
<link rel="stylesheet" href="test-1.css">
Emmet语法
想要生成多个相同标签加上*就可以了比如 div*3就可以快速生成3个div
有父子级关系的标签，可以用> 比如 ul> li就可以了
有兄弟关系的标签，用+就可以了比如div+p
生成带有类名或者id名字的，直接写 .demo 或者 #two tab 键就可以了
生成的div类名是有顺序的，可以用自增符号 $
复合选择器
后代选择器
又称为包含选择器，可以选择父元素里面子元素。
其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
元素1 元素2 { 样式声明 }
<style>
ol li {
color: red;
}
.re li {
color: blue;
}
</style>
</head>
<body>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ul class="re">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body> //指定ul列
子选择器
子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素
div > p{样式声明 } /* 选择 div 里面所有最近一级 p 标签元素
并集选择器
并集选择器可以选择多组标签同时为他们定义相同的样式。通常用于集体声明.
div,p {
color:pink;
}
格式：
元素1，元素2 {样式声明}
伪类选择器
用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。
a:link /* 选择所有未被访问的链接 */
a:visited /* 选择所有已被访问的链接 */
a:hover /*选择鼠标指针位于其上的链接*/
a:active /* 选择活动链接（鼠标按下未弹起的链接） */
写的顺序按照lvha
实际开发写法：
/* a是标签选择器 所有的链接+/
a{
color: gray;
}
/* ：hover是链接伪类选择器 鼠标经过*/
a：hover {
color： red； /*鼠标经过的时候，由原来的灰色变成了红色+/
}
focus
用于选取获得焦点的表单元素。
焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。
input:focus {
background-color:yellow;
}
总结
| 选择器 | 作用 | 特征 | 使用情 况 | 隔开符号及用法 |
|---|---|---|---|---|
| 后代选择器 | 用来选择后代元素 | 可以是子孙后 代 | 较多 | 符号是空格.nava |
| 子代选择器 并集选择器 | 选择最近一级元素 | 只选亲儿子 | 较少 | 符号是大于.nav>p |
| 选择某些相同样式的 元素 | 可以用于集体 声明 | 较多 | 符号是逗号.nav,.header | |
| 链接伪类选择 器 | 选择不同状态的链接 | 跟链接相关 | 较多 | 重点记住a{}和 a:hover实际开发 的写法 |
| :focus选择器 | 选择获得光标的表单 | 跟表单相关 | 较少 | input:focus记住这个写法 |
元素显示模式
"常见的块元素有<h1>~<h6>.<p>.<div>.<ul>、<ol>、<li>等,其中<div>标签是最典型的块元素。 "
块元素
块级元素的特点: ①比较霸道,自己独占一行。 ②高度,宽度、外边距以及内边距都可以控制 ③宽度默认是容器(父级宽度)的100%。 ④是一个容器及盒子,里面可以放行内或者块级元素。 注： 文字类的元素内不能使用块级元素 <p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div 同理，<h1>～<h6>等都是文字类块级标签，里面也不能放其他块级元素
行内元素
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span> 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。 特点： ① 相邻行内元素在一行上，一行可以显示多个。 ② 高、宽直接设置是无效的。 ③ 默认宽度就是它本身内容的宽度。 ④行内元素只能容纳文本或其他行内元素。
行内块元素
在行内元素中有几个特殊的标签——<img/>、<input/>、<td>，它们同时具有块元素和行内元素的特点。素有些资料称它们为行内块元素。特点：① 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。② 默认宽度就是它本身内容的宽度（行内元素特点）。③ 高度，行高、外边距以及内边距都可以控制（块级元素特点）。
转换：
转换为块元素： display：block； 转换为行内元素： display：inline； 转换为行内块: display: inline-block;
背景属性
背景图片
background-image: none | url (url) 如果需要在HTML页面上对背景图像进行平铺，可以使用 background—repeat属性。 background-repeat: repeat | no-repeat | repeat-x | repeat-y
background—attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。 background—attachment 后期可以制作视差滚动的效果。 background-attachment: scroll | fixed
复合写法
当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为： background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置；
背景色半透明写法：background: rgba (0, 0, 0, 0.3);
三大特性
层叠性 相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。 主要解决样式冲突的问题 层叠性原则： 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式 样式不冲突，不会层叠
继承性 现实中的继承：我们继承了父亲的姓 CSS中的继承：子标签会继承父标签的某些样式，如文本颜色和字号。简单的理解就是：子承父业。
优先级 元素选择器 < 类选择器，伪类选择器 < ID选择器 < 行内样式 style=""
注：继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0。复合选择器会有权重叠加的问题
盒子模型
边框、外边距、内边距、和实际内容
边框
border可以设置元素的边框。
边框有三部分组成：边框宽度（粗细） 边框样式 边框颜色
border: border-width || border-style || border-color
边框简写：
border： 1px solid red； 没有顺序
内边距
padding 属性用于设置内边距，即边框与内容之间的距离。
外边距
margin 属性用于设置外边距，即控制盒子和盒子之间的距离。
外边距可以让块级盒子水平居中，但是必须满足两个条件：
①盒子必须指定了宽度（width）。
②盒子左右的外边距都设置为auto。
.header{ width:960px;
margin:0 auto;}
清除内外边距
网页元素很多都带有默认的内外边距
因此在布局前，首先要清除下网页元素的内外边距。
*{
padding：0； /* 清除内边距
margin：0； /* 清除外边距
}
盒子阴影
box-shadow: 20px 10px 20px 10px rgba(0, 0, 0, 0.3); h-shadow 必需。水平阴影的位置。允许负值。 v-shadow 必需。垂直阴影的位置。允许负值。 blur 可选。模糊距离。 spread 可选。阴影的尺寸。 color 可选。阴影的颜色。请参阅 CSS 颜色值。 inset 可选。将外部阴影（outset）改为内部阴影。
浮动
设置了浮动（float）的元素最重要特性： 1.脱离标准普通流的控制（浮）移动到指定位置（动） （俗称脱标） 2.浮动的盒子不再保留原先的位置 3.浮动元素会具有行内块元素特性。 p178
p182
