黑马程序员技术交流社区

标题: 前端五期基础技术帖 [打印本页]
作者: 黑马前端五期ZDK    时间: 2019-6-7 18:38
标题: 前端五期基础技术帖
本帖最后由 黑马前端五期ZDK 于 2019-6-7 18:47 编辑

HTML1.HTML的初步认识HTML是超文本标记语言，不是编程语言
超文本：超越文本的限制，内容还会包括图片、音频、视频等
标记：html由许多标签组合而成，例如：<head></head>、<a href=”#”></a>、<br />        等。
2. HTML的结构
下面是一个完整的html骨架结构
<html>
              <head>
                <title>标题</tilte>
              </head>
              <body>
                      网页内容
              </body>
</html>
运用sublime（专门用于编写html的软件）可以快速编写html
流程：
1.打开sunlime软件，新建文档 Ctrl+N ；
2.保存   Ctrl+S    保存文件名必须为.html，例如index.html；
3.生成HTML骨架，sublime有快速生成html骨架功能：
01 ： html:5 按下tab键       02 ： ！按tab键；
3. html主要标签介绍        
所有的html标记（标        签）都要放在一组尖括号<>里面，大部分是双标签，如<head></head>，也有少数是单标签，如<br />。
标签之间有两种关系：嵌套（）父子）和并列（兄弟）

双标签(<p></p>)

1. 头部标签head
放置于html之内，用于骨架头部位置，里面放置标题标签，链接CSS样式表的标签，语言样式等等
2. 网页标题标签title
放置于head之内，包裹在里面内容就是我们打开浏览器时看见的内容
3. 内容主体标签body
放置于html之内，与head标签为并列关系，我们在浏览器看到的内容都包裹在body之内，大部分标签都是放置在body之内
4. 段落标签p
放置于body之内，用于划分文字段落
5. 链接标签a
放置于body之内，用于打开一个链接
6. 文字标题标签h1~h6
放置于body之内，和word文档里的标题意思相同，可以使文字加粗加大，但一个html里最多只能有一个h1标签，h2最好不超过两个，其他可随意使用。

单标签(<br />)
1. 换行标签br
用于换行
2. 横线标签hr
使用后会形成一条横线
3. 图片标签img
用于插入图片
4 . 表格标签的使用介绍
一对table标签嵌套tr标签，tr标签嵌套td标签；
table表示表格整体，tr表示行，td表示单元格（列）；
<table>
<tr>
<td></td>
</tr>
</table>
表格的常见属性：
宽：width  width=”600”
高：height  height=”300”     
边框：border，如果设置border=0是没有边框；
  对齐方式：align  取值left、center、right；设置表格在网页中的水平对齐方式；单元格和单元格之间的距离：cellspacing   cellspacing=”5”
单元格内容到单元格边框的距离：cellpadding  
cellpadding=”20”
5 .列表介绍
列表分为：无序列表、有序列表、自定义列表
1.无序列表
结构：ul嵌套li标签，li的个数不定，按照设计稿需求进行设置
<ul>
          <li></li>
          <li></li>
          <li></li>
</ul>
2.有序列表
ol嵌套li标签；
<ol>
        <li></li>
        <li></li>
        <li></li>
</ol>
3.自定义列表：
dl嵌套dt和dd标签，dt表示描述标题，dd描述的内容；
<dl>
        <dt></dt>
        <dd></dd>
</dl>
CSS1、Css的作用
Cascading Style Sheets，简称层叠样式表，主要是用来进行页面的版面布局和外观样式的美化；例如：文字属性font-size可以调整文字大小，color可以调整颜色。
2、使用css的原理
能够将结构html和样式css分离书写，简化代码，提高可阅读性；
3、css的书写格式
选择器 { 属性1:属性值1;  属性2:属性值2;   …… }
选择器：指定CSS样式作用的HTML对象（要更改样式的标签），花括号内是对该对象设置的具体样式。
属性和属性值：以键值对的形式出现，属性和属性值之间用英文的冒号 ’  :  ’ 连接；4、        Css的书写位置
分为3类：行内式、内嵌式（内部样式）、外部链接式
（1）行内式
直接在标签的开始标签身上添加一个 style=“”属性，然后在引号里面书写css属性和属性值即可。例如：<div style=“color:pink; font-size:16px;”>行内样式</div>;
（2）内部样式（内嵌式）
书写在head标签里面，title标签下面，以一对style标签包裹，实现了结构和样式的半分离；
（3）外部链接
外部链接：实现了结构和样式的完全分离，代码简介，可读性强；一个css样式可以共享，如果两个页面的标签样式完全一致，就可以使用同一个
使用外部链接的步骤
01 新建：.css格式的css文件，直接书写选择器以及css样式；
02 引用：利用link标签引入新建的css文件，要配合link的三个属性  rel关系，type文件类型 （可以省略），href文件路径；
三种链接方式的使用总结
行内样式表：书写方便，权重高。缺点：没有实现样式和结构相分离；
内部样式表：部分结构和样式的分离。缺点：没有彻底分离；
外部样式表：完全实现结构和样式分离，方便各个页面的使用。缺点：需要引入
5、用css进行页面布局网页布局的三种机制
普通流：块级元素独占一行，从上向下顺序排列；常用的元素：div、hr、p、h1-h6、ul、ol、dl、form、table；
行内元素一行共存多个，从左到右排列，碰到父元素边缘则自动换行； 常用元素：span、a、i、em；这种模式为不使用CSS布局时的默认形式，不能让多个盒子一行显示。
浮动：让盒子从普通流中浮起来，让多个块级盒子一行显示；
定位：将盒子固定在浏览器的某一个位置， 常用元素：position；
如果这三种模式堆叠在一起，在页面中显示关系为普通流在最下面，浮动在中间，定位在最上面。
1. 浮动float
浮动可以使多个盒子实现一行并列显示
Float取值有三种：left（左）； right（右） none（不浮动）；
浮动有三大特点：
浮：浮动的元素脱离了普通流。
漏：浮动元素不占之前在标准流中的位置，当一个标准流盒子浮动后，后面的标准流盒子就会挤占它之前的位置，我们可以给浮动盒子加一个父级标准流盒子解决这个问题
特：浮动之后的盒子会更改为行内块元素的特点，并且浮动元素之间没有空隙，贴在一起，顶部对齐，如果父级盒子不够宽装不下浮动盒子，浮动盒子会另起一行。
2、定位position
定位属性：position 取值不同实现的效果不同，如下：
静态定位：position:static；
相对定位：position:relative；
绝对定位：position:absolute;
固定定位：position:fixed;
（1）静态定位：position:static，        
不使用定位的时候，标准流；
（2）相对定位：position:relative；
参照物：自己本身原来的位置，进行位置的偏移；
位置偏移：通过改变方位名词（top/bottom/left/right）的值来设置；
特点：相对于自己原来的位置为参照物进行位移，属于占位定位，盒子仍然在标准流里面；
（3）绝对定位：position:absolute;
参照物：默认情况下是自己的父级盒子，但是如果绝对定位的父级盒子没有任何定位属性，参照物就以浏览器为参照去进行定位；
情况1：父级没有定位的时候以浏览器为参照物
情况2：父级盒子有定位的时候，参照物就是父级元素；
绝对定位是完全脱离了标准流不占位的，参照物默认以父级为主，如果父级没有定位一层一层往上找，如果找不到定位的祖先盒子就以浏览器为参照定位；
一般我们使用绝对定位时都会对其父盒子做一个相对定位，称为子绝父相.
（4）固定定位：position:fixed;
参照物：电脑屏幕（可视窗口）；
注意：固定定位完全脱离了标准流，参照物是可视窗口为准，和父级没 任何关系，IE6不支持固定定位。



























欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2