前端培训总结week01
前端培训总结week01
HTML基础
注释
注释 ： 便于开发人员对开发项目解释和说明的文字
快捷键 ctrl+/
注释不会被应用程序解析
html 超文本标记语言，严格意义上来讲，不是一种开发语言
html5 html的第五个版本，添加了一些新标签和api，使用h5必须在页面开头添加以下代码
<!DOCTYPE html>
他的含义是 声明当前文档类型是html5 标注的文档，这样浏览器在解析渲染的时候会按照h5
的标准解析
html文档是由标签组成
标签分为单标签和双标签，他们的闭合方式不同
单标签： <img />
双标签： <div> 内容 </div>
head标签
head标签中的内容不会渲染在页面中
主要是源信息标签
<meta /> 作用是设置网站的源信息
charset 属性，用来定义文本的编码格式
UTF-8 万国码，目前开发中最常用
gb2312 中文码
通常都把charset的值设置成 UTF-8,如果不设置charset属性，可能会乱码
解决方案是设置成 UTF-8即可
author 属性用来定义网站作者，一般是公司名字
keywords 属性用来定义网站的关键字，如果有多个关键字，用英文逗号隔开，
关键字最好不超过10个
精准的keywords值，更加有利于seo（搜索引擎优化）
description 属性用来简单的描述网站内容，最好不要超过一百字，有利于seo
meta的另一种写法
<meta name="属性名" content="属性值">
title 标签，它是一个双标签，他的seo权重很大,因此需要谨慎书写里面的内容
body 标签里面的内容，会渲染在页面的可视区域
块属性标签
1.div 标签
没有任何意义的标签，通常用来进行页面的布局
<div style="border:1px #f00 solid;">万里雪飘</div>
<div style="border:1px rgb(36, 15, 16) solid;">万里雪飘</div>
2.h系列标签
h1-h6 标题
在一个页面中，h1最多出现一次，h2最多二十次，h3-h6次数不限
h1的用法：
1.logo
2.咨询详情大标题
由于h1的权限较大，只能出现在以上两个地方
3.p标签，段落标签，它里面一般包含一段文字
4.分割线
换行符 <br />
5.无序列表
ul > li
可以设置他的list-style-type 属性
square:实心方块
circle：空心圆
dotted：实心圆
none:取消列表样式
disc : 高版本系统下的默认样式
<ul style="list-style-type: none;">
<li>chang</li>
<li>chang</li>
<li>chang</li>
<li>chang</li>
</ul>
6.有序列表
ol>li
可以设置他的list-style-type 属性
lower-alpha : 小写字母
upper-alpha ：大写字母
lower-roman ：小写罗马文
upper-roman ：大写罗马文
<ol style="list-style-type:upper-roman">
<li style="border: 1px #f00 solid;">chang</li>
<li>chang</li>
<li>chang</li>
<li>chang</li>
</ol>
7.定义列表
dl>dt
dl>dd
dl：定义列表的父元素
dt：块标签，定义列表的标题项
dd：块标签，定义列表的列表项
8.address 地址标签，
一般的，他的内容是一个地址
9.blockquote引用标签
，一般引用的是一段文字，他的cite属性表示该文字引用的文献名目
行标签
1.span 标记标签
没有实际意义，通常用来渲染文字
2.iframe 框架
src="需要显示的页面地址"
height="设置高度"
width="设置宽度"
3.a 标签
href 属性 ：用来设置超链接的地址
target 属性 ：设置标签页打开方式
_blank 在新标签页打开
_self 默认值，在当前页面打开
作用：
1.设置一个超链接
2.设置锚点
最常用的效果是回到顶部
如果在开发中需要设置a标签点击没用效果，则可以设置href属性为 ## 既是: href="##"
如果需要回到顶部 则 href="#"
不要设置href为空，这样会导致页面刷新
3.下载文件
a. 如果需要下载的文件是 音频，视频，图片，文档等，都需要经过压缩之后，再在href
上面设置文件路径
b. 如果是文本类型文件，可以直接把文件路径设置在href当中，直接由浏览器打开
<a href="http://www.baidu.com">百度</a>
<a href="./case.html" target="_self">案例</a>
<hr />
<div id="ye" style=" height: 100px; background: #ff0;"></div>
<div id="gr" style=" height: 100px; background: rgb(62, 189, 72);"></div>
<div></div>
<a href="#ye">黄色块</a><br />
<a href="#gr">绿色块</a><br />
<a href="#">回到顶部</a><br />
<a href="###">点不动</a><br />
<a href="./abc.txt">下载</a><br />
<a href="./kun1.rar">下载图片</a><br />
<a href="./kun1.gif">加载图片</a><br />
4.strong 强调标签
em 强调并且斜体
b 文本加粗 (不常用，h5中即将废弃)
i 文本斜体
var 文本斜体 (不常用，h5中即将废弃)
5.q 标签， 引用，它引用的内容都比较简短
pre 标签， 格式化输出
code 标签， 一般是嵌套代码使用
⁢ 在html中渲染为<
> 在html中渲染为>
在html中渲染为空格
img标签
img标签， 是一个单标签
src属性， 用来设置图片资源路径
文件资源路径分为三种
a 网络路径
图片的网络地址
b 绝对路径
服务器的根目录开始直到找到需要的文件的整个路径,一般不使用
c 相对路径
相对于当前文件所在的资源路径
./ 代表的是当前目录
../ 代表的是上一级目录
../../ 代表上上一级目录
在开发中最常用
alt 属性，用来解释图片的内容
作用：
1.当图片没有被加载出来的时候会显示alt的内容
2.通过alt属性，告诉浏览器当前图片的内容
width/height 设置图片的宽和高，在实际的开发中一般只设置一个宽和高，另一个根据比例显示大小
emmet语法
E=标签名
E*n 创建n个E标签
E{内容}*n 创建n个有内容的E标签
E{内容$}*n 创建n个有内容有排序的E标签
> 表示的是下一个层级元素（子元素）
E>a 在E标签中添加子元素 a 标签
ul>li*5>a{$}
+ 表示同级
E+p 表示同时创建E和p ，不相互嵌套
^ 表示上一级
E>p^div 创建div 标签和E 标签同级，也就是创建p标签的上一级
使用[]设置属性
<!-- a[href="##"]*5 -->
<a href="##"></a><a href="##"></a><a href="##"></a><a href="##"></a><a href="##"></a>
嵌套
标签嵌套规则
1 ,块标签可以作为一个布局标签，嵌套所有的标签
2 , 行标签不能嵌套块标签
以下标签不能相互嵌套
4. p标签，h1-h6都不能相互嵌套，并且他们也不能嵌套块标签
5. a标签不能相互嵌套
css的引入方式
css层叠式样式表
css 引入方式
1 行间引入
2 内部样式表
3 外部样式表
开发的时候常用
link 和 @import 引入css区别
1 @import 是css2.1之后推出的，因此可能存在兼容性问题，link不存在兼容性问题
2 link不仅可以引入css，也可以引入其他类型文件，功能更加强大，推荐使用
<!-- link:css -->
<link rel="stylesheet" href="./css/style.css">
css文本操作
border 属性
border-width 设置border的宽度
border-color 设置border颜色
border-style 设置border样式
也可以合写
border ： width style color;
可以给单独某一个边设置border
border-top 设置上边
border-left 设置左边
border-bottom 设置下面
border-right 设置右边
常用的border-style值
1 solid 实线
2 dotted 圆点虚线
3 dashed 短线虚线
4 none 隐藏border
不常用
5 double 双实线
6 3d边框
groove 3d凹槽
ridge 3d凸槽
inset 内嵌
outset 外嵌
color属性 设置文本颜色
值：
1.英文单词
2.16进制颜色 0-F，#后面跟六位表示颜色的数字，前两位表示红色，中间两位表示绿色，后面两位表示蓝色
#aabbcc 如果两两相等，则可以简写为 #abc
3.rgb（），rgba（） 设置颜色
括号当中设置对应的数字，0-255 ，0表示黑色，255表示白色
rgb（255，0，0）红色
rgba中的a 表示透明度，取值的范围是0-1，0表示透明，1表示不透明
文本修饰 text-decoration
值：
1 underline 下划线
2 overline 上划线
3 line-through 删除线
4 none 去掉修饰
文本转化 text-transform
值：
1 lowercase 全部小写
2 uppercase 全部大写
3 capitalize 首字母大写
行高 line-height
对单行文本，line-height 设的高度如果和标签的高度相同，则可以做垂直居中效果
如果是多行文本，可以理解为行间距
diection 设置文字方向
ltr 默认 从左向右
rtl 从右向左
text-indent 首行缩进，它的值是具体数值
word-spacin 设置两个单词之间的距离
letter-spacing 设置两个字符之间的距离
overflow属性
处理子级元素超出当前容器的部分，主要是对父级元素添加该元素属性
值
hidden 超出部分隐藏
scroll 滚动查看超出的部分
auto 自动渲染超出的部分
overflow-x 控制x轴方向的超出部分
overflow-y 控制y轴方向的超出部分
whited-space 属性
设置文本的格式
nowrap 强制不换行
normal 强制换行
text-overfiow: 对超出部分进行剪裁
ellipsis 超出部分变省略号
clip 直接裁掉超出部分
单行文本超出添加省略号
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
字体设置
font-style 设置字体的样式
值：
italic 设置字体为斜体
normal 设置字体为正常
font-weight 设置字体是否加粗
值：
normal 默认
bold 加粗
bolder 相对bold加粗
他的值也可以是具体的数值，范围是100-900
400 normal
700 bold
900 bolder
font-size 设置所修饰的字体大小
1. 目前浏览器默认字体大小是16px
2. pc端浏览器的最小字体大小可以设置为12px
font-family 设置文字的字体
可以同时设置多个字体，形如：
font-family:‘A’,‘B’,‘C’;
含义是 在客户端的设备上匹配A字体，如果没有A字体，则继续匹配B字体，依次进行匹配
，直到匹配成功为止
通用字体
1. serif 有衬线（类似锐化）
2. sans-serif 无衬线
font 也是一个复合型css属性
可以直接按照下面顺序书写
font：style weight size family ；
注意 style和weight 不是必须写入的内容，如果简写至少需要有font-size和
font-family
font：size family；
背景
background 设置标签元素的背景
background-color 设置背景色
它的值可以是
1 英文字母
2 16进制表示颜色
3 rgb（）表示颜色
background-image 设置背景图片
background-image: url（背景地址）
background-repeat 背景图的平铺方式
值：
reapet 默认 xy轴都平铺
reapet-x 沿x轴平铺
reapet-y 沿y轴平铺
no-reapet 不平铺
background-position 设置背景图定位
background-position x轴方向的值 y轴方向的值：
值可以是
1. 具体的数值
2. 方位名词组合
left top right bottom center
background-attachment 设置背景图固定定位
值：
scroll 默认值，背景图片跟着页面一起滚动
fixed 根据浏览器可视区域，固定在具体位置
，他的定位参考点是浏览器可视区域
background 是一个复合属性 可以写在一起，他的顺序是
background：color image repeat position attachment；
可以单独写
background：color；
background：image；
display属性
隐藏一个标签元素
display:none
display 属性可以用来控制标签元素的显示属性
值：
block 把元素转化为块属性标签
inline 把元素转化为行属性标签
none 隐藏标签元素
扫一扫
7720
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
