黑马程序员技术交流社区
标题:
黑马前端基础重点笔记
[打印本页]
作者:
欢淑淑
时间:
2019-6-10 23:39
标题:
黑马前端基础重点笔记
来黑马学习时间不久 但是学习到的干货很多 下面将为大家一一列举：
首先要知道网页的三大组成部分：
文字，图片，超链接（音频&视频）
其次要知道web标准（W3C）的三层组成（重点）：
1.结构标准（structure） - HTML - 搭建页面的结构
2.表现标准/样式标准（presentation）- CSS - 页面样式的美化
3.行为标准（behavior） - javascript - 实现页面的交互效果
接下来将为大家详细介绍HTML和CSS的编写方式以及技巧：
HTML（超文本标记语言）：
一、HTML骨架：
< head >
<title> 网站标题用户是可以看得到的 </title>
</head>
<body>
所有的展示用户都可以看到
</body>
</html>
自动生成的HTML结构详解 （输入英文“!”可以自动生成HTML骨架）：
开头必写：< ! doctype html> 告诉浏览器用html5的格式解析页面
英文语言：<html lang=“en”>
中文语言：<html lang=“zh-CN”>
国际通用字符编码<meta charset=“UTF-8”>
二、标签的类别与关系：
标签分为两大类： 双标签和单标签：
双标签（有开始和结尾）：
例如：<head></head> <body></body> “/” - 结束标签
单标签 （只有开始）：
<例如：br /> <hr />
三、排版标签：
标题标签：字体默认加粗，一行只能放一个（可用css处理）
注意⚠：h1标签一个页面只能放一次，最好放logo
h2标签只能放两次
h3～h6不限次数
段落标签： <p> </p>
水平线标签：<hr />
注意 ⚠：浏览器对回车和空格都只解析成一个
换行标签: <br>; 强制换行标签:<br />；空格标签： ；
⚠div和span标签：
盒子标签: <div></div> 布局用的大标签，一行只能放一个
文字标签: <span></span> 用来布局（一般用来做文字或小图标， 一行存多个
四、文本格式化标签：<b></b>加粗 <i></i>斜体
<s></s>加删除线 <ins></ins>加下划线
五、图像标签：<img src= “图像URL”/>
六、链接标签：<a href=“#“> 空链接 </a>
七、注释标签：<! -- 注释 —> (快捷键：ctrl+？)
八、列表标签（重点）：
无序列表 ⚠：
示例：<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
可以随意改变排放顺序
<ul>中只能嵌套<li>
<li>与<li>之间相当于一个容器 可以放一切标签无序列表中的所有默认模式都不用，后期会用css改
有序列表：
示例：<ol>
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
与ul操作一样 顺序无法改变
自定义列表：
示例：<dl>
<dt>名词</dt>
<dd>名词解释</dd>
<dd>名词解释</dd>
……
<dt>名词</dt>
<dd>名词解释</dd>
<dd>名词解释</dd>
</dl>
CSS（页面美化）：
一、首先要知道css的作用：Cascading Style Sheets，简称层叠样式表，主要是用来进行页面的版面布局和外观样式的美化
二、其次要知道css的使用原理：能够将结构html和样式css分离书写，简化代码，提高可阅读性；
三、链接方式的使用总结：
行内样式表（<div style=“color:pink; font-size:16px;”>）：书写方便，权重高。缺点：没有实现样式和结构相分离；
内部样式表（书写在head标签里面，title标签下面，以一对style标签包裹）：部分结构和样式的分离。缺点：没有彻底分离；
外部样式表（新建：.css格式的css文件，直接书写选择器以及css样式）：完全实现结构和样式分离，方便各个页面的使用。缺点：需要引入
四、Css选择器的分类 ：
基础选择器：标签选择器（html选择器）、类选择器、ID选择器
复合选择器：后代选择器、并集选择器、指定标签选择器
五、CSS属性书写顺序：
1、布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
2、自身属性：width / height / margin / padding / border / background
3、文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
4、其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
六、display显示与隐藏（重点）
隐藏：display:none; 属于不占位隐藏
显示：display:block; 将隐藏的元素显示出来
visibility显示与隐藏
占位隐藏：visibility:hidden; 盒子隐藏之后原来的位置还是在的；
overflow溢出隐藏
overflow:hideen; 溢出隐藏，将超出固定宽高范围内的内容隐藏起来，不是删除了；
实际工作中overflow:hideen;的用法（重点）
情况1：可以解决嵌套的两个盒子，如果给里面的子级盒子设置了margin-top父级盒子会跟着塌陷下来，我们可以直接用overflow:hideen;解决塌陷问题；
情况2：可以解决一个没有设置高度的父级盒子，里面的子级盒子浮动以后，父级盒子的高度默认为0,不会被撑开，我们可以给父级盒子添加overflow:hideen;来检测子级的高度撑开父级盒子；
七、banner 滚动图片的布局思路（重要）
一个父级盒子作为总体的大盒子，然后里面的滚动图片用ul>li>a实现，两侧的小箭头一般我们用单独的span或者div实现（css里面用子绝父相进行定位实现），切换的小圆点用ol>li实现（css里面用子绝父相将ol进行定位，然后将里面的li浮动控制外边距即可）；
以上是我目前总结出的一些比较重要的知识点
希望会对你们有所帮助
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2