慕课网基础前端教程学习笔记

响应式布局方法
-CSS3 Media query

2
html,载体,骨骼
css,样式,皮肤
javascript,   神经
3
h1标题
p段落
img图像
4
html 根标签
header 头部标签
body 主要内容
head
    <title>标题栏,搜索引擎和用户索引
语意化
P段落标签,一个段落一个标签
hx标签:1-6 ,1最高级
2-5
<em> 表示强调,<strong> 表示更强烈的强调
并且在浏览器中<em> 默认用斜体表示,<strong> 用粗体表示。
目前国内前端程序员更喜欢使用<strong>表示强调。
2-6<span>标签是没有语义的,它的作用就是为了设置单独的样式用的。
2-7<q>引用
2-8<blockquote>的作用也是引用别人的文本。但它是对长文本的引用,如在文章中引入大段某知名作家的文字,这时需要这个标签。
2-9<br />分行,在 html 中是忽略回车和空格的
2-10空格&nbsp;
2-11 <hr> 水平横线
2-12<address>标签,为网页加入地址信息
2-13<code>代码语言</code>
2-14使用<pre>标签为你的网页加入大段代码
2-15这些列表就可以使用ul-li标签来完成。ul-li是没有前后顺序的信息列表。
2-16如果想在网页中展示有前后顺序的信息列表,怎么办呢?如,当当网上的书籍热卖排行榜,如下图所示。这类信息展示就可以使用<ol>标签来制作有序列表来展示。 ol有序列号
2-17div 容器
3-5创建表格的四个元素:table、tbody、tr、th、td
    table->tbody
    <tr>…</tr>:表格的一行,所以有几对tr 表格就有几行。
    <td>…</td>:表格的一个单元格,一行中包含几对<td>…</td>,说明一行中就有几列。
    <th>…</th>:表格的头部的一个单元格,表格表头。
3-7 caption标签,为表格添加标题和摘要
4-1 a 链接
4-2 tag a target=“_blank” 新标签
_blank — 在新窗口中打开链接
_parent — 在父窗体中打开链接
_self — 在当前窗体打开链接,此为默认值
_top — 在当前窗体打开链接,并替换当前的整个窗体(框架页)
4-3 mailto email <a href=”mailto:yy@imooc.com?subject=观了不起的盖茨比有感。&body=你好,对此评论有些想法。”>对此影评有何感想,发送邮件给我</a>
    后面可以加一些参数。主题,内容,抄送什么的
4-4 img
4-5 form
5-2 input type text password
5-3 textarea row
5-4 radio 单选  checkbox 多选
5-5 option 下拉框
5-8 input type reset重置
5-9 label for=input id,点击label会选中input
6-1css
7-1css
7-4
8-9 a:hover伪类选择符
8-10 分组选择符
9-1继承,有些子对象继承CSS,有些不行比如border:1px solid red;
9-2特殊性,根据权值来判断决定显示什么样子
9-3层叠
9-4重要性!important最高权值,写在分号前
10-1font-family:””;
10-2size
10-3粗体 font-weight:bold;
10-4斜体 font-style:italic;
10-5下划线    text-decoration:underline;
10-6 删除线  text-decoration:line-through;
10-7缩进    p{text-indent:2em;}
10-8行间距    line-height:1.5em;
10-9中文字间距    字母间距    letter-spacing:50px; word-xxx
10-10-div{text-align:center;}
11-1html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。
常用的块状元素有:
<div>、<p>、<h1>…<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有:
<a>、<span>、
、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有:
<img>、<input>
设置display:block就是将元素显示为块级元素
当然块状元素也可以通过代码display:inline将元素设置为内联元素///和其他元素都在一行上;
内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,代码display:inline-block
11-5 盒模型
11-6 边框,1、border-style(边框样式)常见样式有:
    dashed(虚线)| dotted(点线)| solid(实线)。
    2、border-color(边框颜色)中的颜色可设置为十六进制颜色,如:
    border-color:#888;//前面的井号不要忘掉。
    3、border-width(边框宽度)中的宽度也可以设置为:
    thin | medium | thick(但不是很常用),最常还是用象素(px)。
11-7    现在有一个问题,如果有想为 p 标签单独设置下边框,而其它三边都不设置边框样式怎么办呢?css 样式中允许只为一个方向的边框设置样式:
div{border-bottom:1px solid red;}
同样可以使用下面代码实现其它三边(上、右、左)边框的设置:
border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red;
从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content,和标准 W3C 盒子模型不同的是:IE 盒子模型的 content 部分包含了 border 和 pading。
11-10 margin
12-1
在网页中,元素有三种布局模型:
1、流动模型(Flow)
2、浮动模型 (Float)
3、层模型(Layer)
流动布局模型具有2个比较典型的特征:
第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div,h1,p)宽度显示为100%。
第二点,在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。(内联元素可不像块状元素这么霸道独占一行)
浮动模型
块状元素这么霸道都是独占一行,如果现在我们想让两个块状元素并排显示,怎么办呢?不要着急,设置元素浮动就可以实现这一愿望。
float:left;
什么是层模型?
什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。下面我们来学习一下html中的层布局。
1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)
父元素使用 relative,子元素可以根据父元素使用 absolute来相对定位
13-1盒模型代码简写
1、如果top、right、bottom、left的值相同,如下面代码:
margin:10px 10px 10px 10px;
可缩写为:
margin:10px;
13-2关于颜色的css样式也是可以缩写的,当你设置的颜色是16进制的色彩值时,如果每两位的值相同,可以缩写一半。
13-3字体缩写网页中的字体css样式代码也有他自己的缩写方式,下面是给网页设置字体的代码:
body{
    font-style:italic;
    font-variant:small-caps;
    font-weight:bold;
    font-size:12px;
    line-height:1.5em;
    font-family:”宋体”,sans-serif;
}
这么多行的代码其实可以缩写为一句:
body{
    font:italic  small-caps  bold  12px/1.5em  “宋体”,sans-serif;
}
14-1颜色值 #xxx
14-2长度值
1、像素
像素为什么是相对单位呢?因为像素指的是显示器上的小点(CSS规范中假设“90像素=1英寸”)。实际情况是浏览器会使用显示器的实际像素值有关,在目前大多数的设计者都倾向于使用像素(px)作为单位。
2、em
就是本元素给定字体的 font-size 值,如果元素的 font-size 为 14px ,那么 1em = 14px;如果 font-size 为 18px,那么 1em = 18px。如下代码:
15-1水平居中设置-行内元素
后面都是居中元素
不定宽度的块状元素有三种方法居中(这三种方法目前使用的都很多):
1. 加入 table 标签
2. 设置 display: inline 方法:与第一种类似,显示类型设为 行内元素,进行不定宽元素的属性设置
3. 设置 position:relative 和 left:50%:利用 相对定位 的方式,将元素向左偏移 50% ,即达到居中的目的

发表评论

邮箱地址不会被公开。