关于慕课网学习的前端基础笔记

html慕课学习笔记

标签

1.<p>段落文本</p>

2.<hx>标题文本</hx> (x为1-6)

3.<em> 表示强调，<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示，<strong> 用粗体表示。

3.<span>标签是没有语义的，它的作用就是为了设置单独的样式用的。

4.<q>引用文本</q>,q标签会给引用文本加双引号。短文本引用

5.<blockquote>引用文本</blockquote>。长文本引用

6.在需要加回车换行的地方加入<br />，<br />标签作用相当于word文档中的回车。

7.要想输入空格，必须写入&nbsp;

8.认识<hr>标签，添加水平横线。大家注意，现在一般使用 xhtml1.0 的版本<hr />其它标签也是），这种版本比较规范

9.<address>联系地址信息</address>

10.<code>代码语言</code>。ps：避免网页把代码语音当成代码而非文本显示。如果是多行代码，可以使用<pre>标签。

11.ul-li在网页中显示的默认样式一般为：每项li前都自带一个圆点。<ul><li>XXXXX</li></ul>

12.<ol>在网页中显示的默认样式一般为：每项<li>前都自带一个序号，序号默认从1开始

13.创建表格的四个元素：

table、tbody、tr、th、td

①、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。

②、<tbody>…</tbody>：如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。（通俗理解table 可以按结构一块块的显示，不在等整个表格加载完后显示。）

 

③、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。

④、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。

⑤、<th>…</th>：表格的头部的一个单元格，表格表头。

⑥、表格中列的个数，取决于一行中数据单元格的个数。

14.超链接<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>

15.链接到另一界面<a href="目标网址" target="_blank">click here!</a>

16.

注意：如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。

17.插入图片<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

与浏览者交互

18.使用表单标签<form method="传送方式" action="服务器文件">

19.<form> <input type="text/password" name="名称" value="文本" /></form>

当type="text"时，输入框为文本输入框;

   当type="password"时, 输入框为密码输入框。

20.textarea rows="行数" cols="列数">文本</textarea>

1、<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。

2、cols ：多行输入域的列数。

3、rows ：多行输入域的行数。

注意这两个属性可用css样式的width和height来代替：col用width、row用height来代替。

21.<input type="radio/checkbox" value="值" name="名称" checked="checked"/>

1、type:

   当 type="radio" 时，控件为单选框

   当 type="checkbox" 时，控件为复选框

2、value：提交数据到服务器的值（后台程序PHP使用）

3、name：为控件命名，以备后台程序 ASP、PHP 使用

4、checked：当设置 checked="checked" 时，该选项被默认选中

注意:同一组的单选按钮，name 取值一定要一致

22.<option value="提交值//向服务器提交的值" selected="selected">选项</option>

23.在<select>标签中设置multiple="multiple"属性，就可以实现多选功能，在 windows 操作系统下，进行多选时按下Ctrl键同时进行单击（在 Mac下使用 Command +单击），可以选择多个选项。

24.提交按钮

<input type="submit" value="提交">

type：只有当type值设置为submit时，按钮才有提交作用

value：按钮上显示的文字

25.重置按钮

<input type="reset" value="重置">

type：只有当type值设置为reset时，按钮才有重置作用

value：按钮上显示的文字

26.abel标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。

语法：

<label for="控件id名称">

注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

css样式

参考：蓝鸥html笔记

选择器

参考：蓝鸥html笔记

id与class选择器不同点：

1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次

2.可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。

3.还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码：

.food>li{border:1px solid red;}

4.即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码：

.first span{color:red;}

5.通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：

* {color:red;}

6.更有趣的是伪类选择符，为什么叫做伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：

a:hover{color:red;}

7.当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色：

h1,span{color:red;}

继承、层叠、特殊性

1.CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。比如下面代码：如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。

2.标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码：

p{color:red;} /*权值为1*/p span{color:green;} /*权值为1+1=2*/.warning{color:white;} /*权值为10*/p span.warning{color:purple;} /*权值为1+1+10=12*/#footer .note p{color:yellow;} /*权值为100+10+1=111*/

3.层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。

4.我们在做网页代码的时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时候我们可以使用!important来解决。

字体的排版

1.设置文字字体：body{font-family:"Microsoft Yahei";}

2.设置字体大小：font-size：20px；

3.设置字体粗细：font-weight：normal（标准）bold（粗体）bolder（更粗的字符）lighter （更细的字符）

数字（400为正常）

4.设置文字斜体：font-style:italic;

5.设置文字下划线：text-decoration:underline;

6.设置文字删除线：text-decoration:line-through;

7.设置文字缩进：text-indent:2em;

8.设置文字行高：line-height:2em;

9.设置中文字间距和字母间距：letter-spacing:50px;

10.设置文字对齐：text-align:center（居中）left（向左对齐）right（向右对齐）；

元素分类

1.在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block就是将元素显示为块级元素

块级元素特点：

①、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）

②、元素的高度、宽度、行高以及顶和底边距都可设置。

③、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

2.在html中，<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素（行内元素）（inline）元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素

内联元素特点：

①、和其他元素都在一行上；

②、元素的高度、宽度及顶部和底部边距不可设置；

③、元素的宽度就是它包含的文字或图片的宽度，不可改变。

小伙伴们你们观查一下右侧代码段，有没有发现一个问题，内联元素之间有一个间距问题，这个问题在本小节的 wiki 中有介绍，感兴趣的小伙伴可以去查看。

3.内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素

①、和其他元素都在一行上；

② 、元素的高度、宽度、行高以及顶和底边距都可设置。

提示：下一小节是用视频动画来讲解css中的盒模型。

css布局

在网页中，元素有三种布局模型：

①、流动模型（Flow）

②、浮动模型 (Float)

③、层模型（Layer）

1.流动模型特点：块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。

在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）

2.浮动模型特点：块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示，怎么办呢？不要着急，设置元素浮动就可以实现这一愿望。

3.什么是层布局模型？层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。

层模型有三种形式：

①、绝对定位(position: absolute)

②、相对定位(position: relative)

③、固定定位(position: fixed)

4.如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

5.如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

6.fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。

盒模型的代码简写

1.margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/

2.p{color:#000000;}可以缩写为：p{color: #000;}p{color: #336699;}可以缩写为：p{color: #369;}

3.字体缩写

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;}

4.如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。(父元素和子元素。

5.满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。

6.不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）：

1. 加入 table 标签
2. 设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置
3. 设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的