发表于: 2019-11-10 23:21:11

0 945


今天完成的事情:

 

整理下前面任务的知识点

自测angular那里还有BUG

修改BUG,

补充ES6基础

整理下css常用代码

整理angular笔记(进行中)

跑步半个小时


明天计划的事情:

准备复盘评审
遇到的问题:


收获:

整理CSS

点击链接后退页面:

<a href="javascript:history.go(-1)">回到上一个网页</a>

 

——修改placeholder提示的样式:

1.IE外通用写法

 类名或标签名::placeholder {color: red;}

2.加兼容前缀写法

 

css超出一行显示省略号:

给定宽度(width:100px)

超出隐藏(overflow:hidden)、

强制在同一行显示(white-space: nowrap)、

省略号(text-overflow:ellipsis

 

——常见字体单位——

1.em

移动端常用的字体尺寸单位,相当于,比如设置当前的div的字体大小为1.5em,则当前的div的字体大小为:当前div继承的字体大小*1.5

但当div进行嵌套时,em始终按当前div继承的字体大小来缩放。

 

2.rem

rroot的意思,即相对于根节点htmlfont-size进行缩放,当有嵌套关系时,嵌套关系的元素的字体大小始终按照根节点的字体大小进行缩放。

 

3.vh

vh就是当前屏幕可见高度的1%,即 height:100vh == height:100%;

它的好处是当元素没有内容时候,设置height:100%该元素不会被撑开,

但设置height:100vh,该元素会被撑开屏幕高度一致。

 

4.vw

viewpoint width,视窗宽度,1vw = 视窗宽度的1%

vw就是当前屏幕宽度的1%

当设置width:100%,被设置元素的宽度是按照父元素的宽度来设置,

100vw是相对于屏幕可见宽度来设置,所以会出现50vw 50%大的情况。

5.在网页中,HTML决定结构和内容,CSS设定网页的表现样式,JavaScript控制网页的行为。

6.<!DOCTYPE html>必须位于HTML文档第一行。

7.<meta>标签:用于方便浏览器解析或搜索引擎搜索,一般放置于<head>中,用"名称/值"方式:

  (1)表示文档内容类型、字符串编码信息 如:<meta charset="UTF-8">

  (2)为搜索引擎定义关键词: 

<meta name="keywords" content="HTML,CSS,XML,XHTML,JavaScript">

  (3)为网页定义描述内容:    

<meta name="description" content="Free Web tutorials on HTML and CSS">

  (4)定义网页作者:    

<meta name="author" content="Hege Refsnes">

  (5)每30秒中刷新当前页面:   

<meta http-equiv="refresh" content="30">

8.字体样式标签:<strong>字体变粗、<em>字体倾斜

9.注释 <!--内容-->

10.特殊符号:空格&nbsp;  >大于号&gt;  <小于号&lt;  "引号&quot;   版权符号&copy;

11.常用图片格式:JPG、GIF、PNG、BMP

12.图片标签,必须要有src和alt属性:

<img src="图片地址" alt="图片的替代文字" title="鼠标悬停提示文字" width="图片宽度" height="图片高度" />

13.超链接标签(target指定在哪个窗口打开 值有_self自身窗口、_blank新建窗口)

<a href="链接地址" target="目标打开窗口位置">附连接的文本或图像</a>

14.链接地址

(1)绝对路径(指向目标地址的完整描述 多指向本站点外的文件

如<a href="http://www.baidu.com/index.html">百度</a>)、

(2)相对路径(一般指向本站点内的文件,如<a href="login/login.html">登陆<a>)

(3)相对路径中"../"表示当前目录的上级目录,"../../"表示上上级目录

15.超链接的应用场合:

(1)页面间链接:如<a href="login.html target="_blank">为您跳转到登录页</a>

(2)锚链接:

先在目标位置B设置标记如:<a name="new">这里是目标位置</a>,

然后在A位置设置链接路径href属性值为"#标记名"如:<a href="#marker"当前位置A</a>

(3)功能性链接:单击时启动本机自带的应用程序如QQ、电子邮箱等

如电子邮件链接:"mailto:电子邮件地址"

16.元素分类

(1)块元素:如<p><h1><div>无论内容有多少,该元素都独占一行(一块)。

   块状元素特点:如果没有设置自身宽度,则显示为父容器的100%。

(2)行内元素:如<strong><a> 显示宽度由自己的内容决定,其他元素可以排在它后面。

16.元素类型转换:

(1)块状元素转为内联元素:display: inline;

(2)内联元素转为块状元素:display: block;

(3)把元素设为内联块状元素: display: inline-block;

(就是同时具备内联元素、块状元素特点,如img、input)

——2 列表、表格、媒体元素——

17.三种列表:

(1)有序列表<ol><li>

    (2)无序列表<ul><li> ul中只能嵌套li,而li可以嵌套任意标签。

(3)定义列表<dl><dt><dd> 是标题及列表项的结合。

18.表格基本结构:单元格、行、列

(1)<table><tr><th><td>

(2)HTML5中已废除table的border属性,用css控制边框宽度。

(3)跨列(横跨):<td colspan="所跨的列数">内容</td>

   跨行(竖跨):<td rowspan="所跨行数">内容</td>,两者都要删除被合并的其他单元格。

(4)表格特点:同行单元格高度一致且水平对齐,同列单元格宽度一致且垂直对齐。

19.视频元素:

(1)controls属性提供播放暂停和音量控件、autoplay属性自动播放、loop属性循环播放

<video src="视频路径" controls="controls">你的浏览器不支持video标签</video>

(2)source元素链接不同的视频文件,浏览器会自动选择第一个可识别的格式:

<video controls>

<source src="video/video.webm" />

<source src="video/video.mp4" />你的浏览器不支持video标签

<video>

20.音频元素:使用语法和视频元素一样,只要把video换成audio即可。

21.HTML5的结构元素(先划分结构再写内容):

header(头部)、footer(脚部)、

section(独立区域)、article(独立文章内容)、

aside(相关内容或应用,常用于侧边栏)、nav(导航类辅助内容)

22.<iframe>框架:方便在页面中引用站外的页面内容。

   <iframe name="此框架的标识名" src="引用的页面地址"></iframe>

23.<iframe>和锚链接的结合:使锚链接的内容在iframe框架中打开

<iframe name="mainFrame" src="框架引用的页面地址" />

<a href="链接路径" target="mainFrame">点击在框架中打开</a>



返回列表 返回列表
评论

    分享到