目标：Front-end Engineer → Full-stack Engineer
浏览器及其内核
HTML
开发工具
sublime
轻量级的ide
1.使用技巧
h${}*6
vsCode
写大项目时使用
1.使用技巧
SEO-搜索引擎优化
<html lang= "en">
<head>
<meta charset="utf-8">
<!-- charset:编码字符集-->
<title>我是title</title>
<meta content="服装" name="keywords">
<meta content="这是一件你穿了就不想脱的衣服" name="description">
</head>
<body>
<!-- 告诉搜索引擎爬虫，我们的网站是关于什么内容的 -->
<!-- SEO -->
</body>
</html>
路径
1. 网上url
<img src="https://xxxxxx.jpg" style="width:200px;">
2.本地的绝对路径
D:/a/b/test.html
D:/a/b/c/123.jpg
<img src="D:/a/b/c/123.jpg>"
3. 本地的相对路径
…/来表示上一级目录
-
D:/a/b/test.html
D:/a/b/123.jpg
<img src="123.jpg>" -
D:/a/b/test.html
D:/a/c/123.jpg
<img src="../c/123.jpg>"
标签
♦ 代表h5新标签
| 标签 | 描述 |
|---|---|
<!--...--> |
定义注释。 |
<！DOCTYPE> |
定义文档类型。 |
💎<a> </a> |
1. 超链接 2. 定义锚 href="#id1" target="_blank"连接有id的元素 3. 打电话 href="tel:12345" 4. 协议限定符 href="javascript:while(1){alert('1')}" |
<abbr> </abbr> |
定义缩写。 |
<acronym> </acronym> |
定义只取首字母的缩写。 |
<address> </address> |
定义文档作者或拥有者的联系信息。 |
<applet> </applet> |
**不赞成使用。**定义嵌入的 applet。 |
<area /> |
定义图像映射内部的区域。嵌套在<map>中 |
<article> </article> ♦ |
定义文章。 |
<aside> </aside> ♦ |
定义页面内容之外的内容。 |
<audio> </audio> ♦ |
定义声音内容。 |
<b> </b> |
定义粗体字。 |
<base /> |
定义页面中所有链接的默认地址或默认目标。 |
<basefont /> |
**不赞成使用。**定义页面中文本的默认字体、颜色或尺寸。 |
<bdi> </bdi> ♦ |
定义文本的文本方向，使其脱离其周围文本的方向设置。 |
<bdo> </bdo> |
定义文字方向。 |
<big> </big> |
定义大号文本。 |
<blockquote> </blockquote> |
定义长的引用。 |
<body> </body> |
定义文档的主体。 |
<br /> |
定义简单的折行。 |
<button> </button> |
定义按钮 (push button)。 |
<canvas> </canvas> ♦ |
定义图形。 |
<caption> </caption> |
定义表格标题。 |
<center> </center> |
**不赞成使用。**定义居中文本。 |
<cite> </cite> |
定义引用(citation)。 |
<code> </code> |
定义计算机代码文本。 |
<col /> |
定义表格中一个或多个列的属性值。 |
<colgroup> </colgroup> |
定义表格中供格式化的列组。 |
<command> </command> ♦ |
定义命令按钮。 |
<datalist> </datalist> ♦ |
定义下拉列表。 |
<dd> </dd> |
定义定义列表中项目的描述。来解释<dt> |
<del> </del> |
定义被删除文本。 |
<details> </details> ♦ |
定义元素的细节。 |
<dir> </dir> |
**不赞成使用。**定义目录列表。 |
<div> </div> |
定义文档中的节。 |
<dfn> </dfn> |
定义定义项目。 |
<dialog> </dialog> ♦ |
定义对话框或窗口。 |
<dl> </dl> |
定义无序定义列表。 |
<dt> </dt> |
定义定义列表中的项目。 |
<em> </em> |
定义强调文本。 |
<embed /> ♦ |
定义外部交互内容或插件。 |
<fieldset> </fieldset> |
定义围绕表单中元素的边框。 |
<figcaption> </figcaption> ♦ |
定义<figure>的标题。 |
<figure> </figure> ♦ |
定义媒介内容的分组，以及它们的标题。 |
<font> </font> |
**不赞成使用。**定义文字的字体、尺寸和颜色。 |
<footer> </footer> ♦ |
定义 section 或 page 的页脚。 |
💎<form> </form> |
定义供用户输入的 HTML 表单。可以发送数据 method="get/post" action="地址" 里面的是<input> |
<frame /> |
定义框架集的窗口或框架。 |
<frameset> </frameset> |
定义框架集。 |
<h1> </h1>… |
定义 HTML 标题。 |
<head> </head> |
定义关于文档的信息。 |
<header> </header> |
定义 section 或 page 的页眉。 |
<hr /> |
定义水平线。 |
<html> </html> |
定义 HTML 文档。 |
<i> </i> |
定义斜体字。 |
<iframe> </iframe> |
定义内联框架。 |
💎<img /> |
定义图像。src="" style="" alt="" title="" |
💎<input /> |
定义输入控件。type="text/password/submit/radio/checkbox" value="提交" name="" 发送数据radio单选框控制name一致实现多组单选 onfocus="if(this.value=='请输入用户名'){this.value='';this.style.color='#fff'}"onblur="if(this.value==''){this.value='请输入用户名';this.style.color='#999'}"checked="checked" |
<ins> </ins> |
定义被插入文本。 |
<isindex /> |
**不赞成使用。**定义与文档相关的可搜索索引。 |
<kbd> </kbd> |
定义键盘文本。 |
<keygen /> ♦ |
定义生成密钥。 |
<label> </label> |
定义 input 元素的标注。 |
<legend> </legend> |
定义 fieldset 元素的标题。 |
💎<li> </li> |
定义有序ol无序ul列表的项目。 |
<link /> |
定义文档与外部资源的关系。 |
<map> </map> |
定义图像映射。 |
<mark> <mark> ♦ |
定义有记号的文本。 |
<menu> </menu> |
定义命令的列表或菜单。 |
<menuitem> </menuitem> |
定义用户可以从弹出菜单调用的命令/菜单项目。 |
<meta> |
定义关于 HTML 文档的元信息。 |
<meter> </meter> ♦ |
定义预定义范围内的度量。 |
<nav> </nav> ♦ |
定义导航链接。 |
<noframes> </noframes> |
定义针对不支持框架的用户的替代内容。 |
<noscript> </noscript> |
定义针对不支持客户端脚本的用户的替代内容。 |
<object> </object> |
定义内嵌对象。 |
<ol> </ol> |
定义有序列表。type=“1”(a/A/i/I) reversed=“reversed” start=“2” |
<optgroup> </optgroup> |
定义选择列表中相关选项的组合。 |
💎<option> </option> |
定义选择列表中的选项。 |
<output> </output> ♦ |
定义输出的一些类型。 |
💎<p> </p> |
定义段落。 |
<param /> |
定义对象的参数。 |
<pre> </pre> |
定义预格式文本。 |
<progress> </progress> ♦ |
定义任何类型的任务的进度。 |
<q> </q> |
定义短的引用。 |
<rp> </rp> ♦ |
定义若浏览器不支持 <ruby>显示的内容。 |
<rt> </rt> |
定义 ruby 注释的解释。 |
<ruby> </ruby> |
定义 ruby 注释。 |
<s> </s> |
**不赞成使用。**定义加删除线的文本。 |
<samp> </samp> |
定义计算机代码样本。 |
<script> </script> |
定义客户端脚本。 |
<section> </section> ♦ |
定义 section。 |
💎<select> </select> |
定义选择列表（下拉列表）。和<option>组合在一起,<select name= "province"> 而option里的字默认是value |
<small> </small> |
定义小号文本。 |
<source> ♦ |
定义媒介源。 |
<span> </span> |
定义文档中的节。 |
<strike> </strike> |
**不赞成使用。**定义加删除线文本。 |
<strong> </strong> |
定义强调文本。 |
<style> </style> |
定义文档的样式信息。 |
<sub> </sub> |
定义下标文本。 |
<summary> </summary> ♦ |
为<details>定义可见的标题。 |
<sup> </sup> |
定义上标文本。 |
<table> </table> |
定义表格。 |
<tbody> </tbody> |
定义表格中的主体内容。 |
<td> </td> |
定义表格中的单元。在<tr>里 |
<textarea> </textarea> |
定义多行的文本输入控件。 |
<tfoot> </tfoot> |
定义表格中的表注内容（脚注）。包裹住<tr> |
<th> </th> |
定义表格中的表头单元格。在<tr>里 |
<thead> </thead> |
定义表格中的表头内容。包裹住<tr> |
<time> </time> ♦ |
定义日期/时间。 |
<title> </title> |
定义文档的标题。 |
<tr> </tr> |
定义表格中的行。 |
<track> ♦ |
定义用在媒体播放器中的文本轨道。 |
<tt> </tt> |
定义打字机文本。 |
<u> </u> |
**不赞成使用。**定义下划线文本。 |
💎<ul> </ul> |
定义无序列表。type=“disc”(square/circle) |
<var> </var> |
定义文本的变量部分。 |
<video> </video> ♦ |
定义视频。 |
<wbr> ♦ |
定义可能的换行符。 |
<xmp> |
**不赞成使用。**定义预格式文本。 |
特殊标签
空格
<
小于号 less than
>
大于号 great than
发送数据
数据名
数据值
发送数据成功：
网页导航栏显示：....test.html?username= sunny&password=123
标签的归类
1. 行级元素 inline
内容决定元素所占位置；
不可以通过css改变宽高
span strong em a del
凡是有inline的，都会带有文字特性，会以4px分隔
2. 块级元素 block
独占一行；
可以通过css改变宽高
div p ul li ol form address
3.行级块元素|行内块元素 inline-block
img
凡是有inline的，都会带有文字特性，会以4px分隔
CSS
引入方式
1. 行间样式
<div style="width:100px;"> </div>
2. 页面级css
<style type="text/css"> </style>
3. 外部css文件
<link rel="stylesheet" type="text/css" href="地址">
页面加载
同步异步问题
打开一个网页加载html文件时，会异步加载css文件（异步是同时的意思）
选择器
1. id选择器
一对一对应
<div id="only"> </div>
#only {}
2. class选择器
多对多对应
<div class="demo demo1"> </div>
.demo {}
3. 标签选择器
<div></div>
div {}
4. 通配符选择器
* {}
5. 属性选择器
[class] {}
[class="demo"] {}
6. 父子选择器/派生选择器
中间以空格隔开 是包括所有的子孙
选择过程是自右向左的过程
7. 直接子元素选择器
div > em {}
8. 并列选择器
<div> <\div> <div class="demo"> </div> <p class="demo"> </p>
div.demo{}
9. 分组选择器
分开的组，共用一个代码块 公司里喜欢各组单独成行
em, strong, span {}
10. 伪类选择器
a:hover {} [href]:hover {}
权重值
单个的大小比较
!important–>行间样式–>id–>class | 属性 | 伪类–>标签选择器–>通配符
css权重
Infinity<Infinity+1
| 元素 | 权重值(进制256) |
|---|---|
| !important | Infinity |
| 行间样式 | 1 0 0 0 |
| id | 1 0 0 |
| class|属性|伪类 | 1 0 |
| 标签|伪元素 | 1 |
| 通配符 | 0 |
属性名：属性值；
善用字典查询
注释
/*我是注释,只有块注释*/
字体相关属性
font-size: 12px;
设置字体大小（字体的高） 浏览器默认是16px，常用是12，14px
font-weight: bold;
lighter normal|400 bold|700 bolder (数字表示100-900)，有没有变得更粗取决于改字体的字体包
font-style: italic;
normal：默认值，浏览器会显示标准的字体样式，italic: 斜体
font-family: arial;
乔布斯发明的字体：arial
color: #ffffff;
- low式：pink; (transparent是透明色)
- 颜色代码：#ffffff; 可简化 #fff;
- 颜色函数: rgb(255,255,255);
text-align: left;
center: 居中显示
line-height: 12px;
单行文本所占高度 line-height = height:单行文本垂直居中
1.2em: font-size*1.2
text-indent: 2em;
首行缩进2个单位
1em= 1* font-size
text-decoration: line-through;
none:这个元素的样式清除
underline; overline
cursor:pointer;
pointer： 鼠标在上面变成小手
help：变成问号
copy…有很多
opacity:0.5;
不透明度 (1为默认代表完全不透明)
盒子相关属性
width: 100px;
内部盒子的宽
height: 100px;
内部盒子的高
border: 1px solid black;
1: 代表border-width 粗细
2: 代表border-style 样式：
- none：没有边框即忽略所有边框的宽度（默认值）
- solid：边框为单实线(最为常用的)
- dashed：边框为条虚线
- dotted：边框为点虚线
- double：边框为双实线
3: 代表border-color 颜色
border四个边还可以拆分为border-left,border-right,border-top,border-bottom
还可以：border-left-color: red;
border是在width height之外的
border-radius: 10px;
盒子的圆角
border-radius: 50% 是一个正圆
display: block;
inline 行级元素
block 块级元素
inline-block 行内块元素
margin: padding: border-width:
padding: 100px 150px 100px; 上 左右 下
padding: 上下 左右
padding-top|left|right|bottom
层模型相关属性（定位 浮动）
position: absolute;
绝对定位
left, right, top, bottom都是对于浏览器的哪边的边框的距离
- 脱离原来位置进行定位（每一个absolute都是一个新的层）
- 子绝父相
- 最近的有相对定位的父级进行定位，如果没有相对于文档进行定位
position: relative;
- 保留原来位置进行定位
- 相对于原来自己的位置进行定位
position: fixed;
广告定位
z-index: 1;
z轴触发点是屏幕，箭头向人延伸，值越大 层越在上面
overflow: hidden;
溢出部分隐藏
float: left/right;
无论标签的属性如何(block,inline,inline-block)，都可以让其站队(按照父盒子的大小进行自动换行，按次序分配位置)，并且也可以修改各个的margin等值
- 浮动元素产生了浮动流
- 所有产生了浮动流的元素，块级元素看不到他们
- 产生了bfc的元素和文本类属性(带有inline属性包括inline-block)的元素以及文本和带有浮动流的元素 都能看到浮动元素
- ===>(比如“123”的文字可以在一个float元素的右面，但是一个div却和该float元素重叠)
一些布局
相对于屏幕的居中：
div { position: fixed; left: 50%; top: 50%; width: 100px; height: 100px; margin-top: -50px; margin-left: -50px; }
两栏布局
<div class="right"></div><div class="left"></div>要先写right,不然没有规定.right的top值会被上面的div顶下来.right { position: absolute; right: 0; width: 100px; height: 100px; background-color: #fcc; } .left { margin-right: 100px; height: 100px; background-color: #123; }
CSS语言BUG
1. margin塌陷
父子嵌套 垂直方向的margin会取最大值
解决方法:
- 父盒子触发bfc (block format context) = 特定的盒子设置另一套语法规则【只加了css即可】
- 为父元素定义1像素的上边框或上内边距。(不推荐)
如何触发一个盒子的bfc(触发后该盒子变成BFC,改变了渲染规则):
- position: absolute;
- display: inline-block;
- float: left/right;
- overflow: hidden;
2. margin合并
兄弟上下，垂直margin会合并，取其中的最大值
解决方法：
- 新建一个盒子，包裹住(下面的)兄弟盒子，新盒子触发BFC【必须要加一层html再加css】(在开发里面不能随意改变html的结构，所以是坚决不允许这种方法的)
- 不解决，尽量避免（比如上面的盒子的margin达到目标值）
标签的初始化
a
a {
text-decoration: none;
color: #424242;
}
em
em {
font-style: normal;
color: #c00;
}
ul
ul {
list-style: none;
padding: 0;
margin: 0;
}
通配符
一般来说浏览器的body会有默认的8像素的margin
* {
padding: 0;
margin: 0;
}
开发经验
先写css后面写html 先写功能后选配置
eg:
.red { n background-color: red; } .green { background-color: green; } .size1 { width: 100px; height: 100px; } .size2 { width: 200px; height: 200px; }之后写html就可以根据功能拿相应的class
盒子模型
内 --------------------------------------------------------------------------->外
盒子内容（蓝）----->内边距（绿）------>盒子壁（黄）----->盒子外面的间距（橙）
width+height--------->padding------------->border--------------->margin
来源：oschina
链接：https://my.oschina.net/u/4352371/blog/4949989