本帖最后由 黑马前端五期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不支持固定定位。
| 
收藏
淘帖
踩
