html、css基础遗忘、重要知识点总结

星期六用了一天的时间刷完慕课上的html、css基础课程。捡起了许多遗忘的或者以前不重视的知识点。现在整理如下（炒鸡基础...）：

1.标签字体加粗 标签字体倾斜 标签表示强调语气(倾斜效果) 标签表示更强的强调语气(加粗效果)

示例代码：

<b>b标签</b><br>
<i>i标签</i><br>
<em>em标签</em><br>
<strong>strong标签</strong>

示例效果：

q标签是短的引用会标签内的元素外围自动生成引号

blockquote标签是多行引用标签内的元素会自动缩进

显然，q是行内元素 blockquote是块级元素

示例代码：

<q>床前明月光</q>

<blockquote>
    望岳                         <br>
    杜甫                         <br>
    西岳崚嶒竦处尊，诸峰罗立似儿孙。<br>
    安得仙人九节杖，拄到玉女洗头盆。<br>
    车箱入谷无归路，箭栝通天有一门。<br>
    稍待秋风凉冷后，高寻白帝问真源。<br>
</blockquote>

看上面

示例效果：

3.<hr>标签添加水平分割线

　　可通过css设置一些样式如宽度、外边距等

4.<address>标签内的元素会自动倾斜并前后都换行前面还会再空一行

示例代码：

<p>请输入您的地址：
    <span>参考文字</span>
    <address>南二环东路二十号河北师范大学新校区</address>
    <span>参考文字</span>
</p>

示例效果：

<code>标签只能在单行内包含代码 <code>var i=8;</code>

<pre>标签作用：添加多行代码预格式化的文本标签内换行和空格有效不止对代码有效

示例代码：

<code>
    var i=0;
    i++;
    alert(i);
</code>
<pre>
    var i=0;
    i++;
    alert(i);
</pre>
<pre>
pre标签内的
回车和     空格   
    都有效
</pre>

示例效果：

6. <a>标签和<img>标签的title的属性值都可以自定义鼠标滑过标签会显示定义的信息

示例代码：(<img>标签同)

<a href="#" title="链接到必应">必应搜索</a>

实例效果：

7.表单中submit 与 reset 必须在input标签的type属性中才会生效

8.label标签的for属性必须与绑定的表单元素的id属性相同才能生效（点击label标签内的文字或图片自动聚焦到相应的表单元素中）

示例代码：

<form action="" method="">
    <label for="names"><img src="tempCropped.jpeg" alt="" width="300px" height="200px"></label>
    <input type="text" id="names" name="myName">
</form>

示例效果：

点击这个图像时，会自动聚焦到输入文本框上

9.注释：

html:

css: /* */

js: //

/* */

10.css样式设置中嵌入式(style标签内)要在外部式(link)的下面

11.:first-child 也是伪类选择器

12.

font-weight:bold; font-style:italic;text-decoration:underline;text-decoration:line-through; text-indent:2em; letter-spacing:20px;word-spacing:50px;

别记错别拼错(属性名)

13.letter-spacing 对英文字母有效对汉字也有效 word-spacing对英文单词有效

14.

块级元素特点：

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

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

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

内联元素特点：

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

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

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

(如果标签包含一个img标签则这个span的宽度为该图片的宽度高度还是默认的高度如果span元素内是文本包括p pre h1 等则span的高度为span内元素撑起的高度 div同)

inline-block 元素（img、input）特点：

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

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

(span 设置了display:inline-block;之后默认的宽度和高度为span内元素撑起的宽度和高度 div同)

15.块级元素都满足盒子模型

16.给出的宽度高度为盒子模型中内容的宽高，最终实际的宽高为内容的宽高加上内边距加边框

即我们在通过css设置元素的宽度和高度时，只是给盒子模型中的内容区域设置了宽高（padding以内的）

17.dashed 虚线用于border联合写法的第二个参数或 border-style 的值

18.

font缩写：

使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。

在缩写时 font-size 与 line-height 中间要加入“/”斜扛

19.

长度单位em：

就是本元素(注意是本元素)给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px

但当给 font-size 设置单位为 em 时，此时计算的标准以该元素的父元素的 font-size 为基础

posted @ 2017-09-25 17:14 _None 阅读(208) 评论(0) 收藏举报

刷新页面返回顶部

_None

html、css基础 遗忘、重要知识点总结

公告

html、css基础遗忘、重要知识点总结