网页搭建入门
1. HTML入门
1.1 简介
-
HyperText Markup Language
超文本 标记 语言
-
文档结构组成
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" media="screen" href="main.css"> <script src="main.js"></script> </head> <body> </body> </html>
1.2 HTML语法
- 语法
- <开始标签 [...属性]>标签内容<结束标签>
1.3 标题
- h1~h6
1.4 段落
- p
1.5 font(html5中弃用，请使用css调整)
- font
- 格式化文本
- size 调节数字来改变字号
- face 字体集，常用：Helvetica
- color 颜色
- color name：red
- 16进制表示法：#d8d8d8
- rgb表示方法：rgb(178,178,178)
1.6 链接
-
作用：文档内部锚点(href="#要跳转的id")、跳转到外部文档、下载资源
-
属性：href、target（_blank, _self）
-
去除a标签的默认样式
a{ color:#333333; text-decoration: none; cursor:none; } a:visited{ color:#333333; }
1.7 图像
-
标签：
-
作用：插入图像
-
属性：src, alt(替换文本)
-
替换：非标签方式：使用background的css属性
background: url(http://www.xxx/test.png);
1.8 列表
- 标签
- 无序列表
-
- 有序列表
-
- 定义列表
-
- 无序列表
- 作用
- 插入列表
1.9 万能标签div
- 标签
- 作用
- 布局
- 无语义的块标签
1.10 HTML的块级元素与行内元素
- 块级元素
- 垂直方向的布局
- 行内元素
- 水平方向的布局
1.11 注释
-
行注释
<!-- 注释内容 -->
-
段落注释
- 没有哦
-
条件注释
<!-- [if IE 8]> 只有IE8才会显示，只有老版本的IE有效 <![endif]-->
1.12 带格式化的标签（一般不会使用）
- 文本格式化
<b>- 加粗字体
<strong>- 另外一个加粗字体
<em><i>- 强调字体
<big>- 大号字体
<small>- 小号字体
<sub>- 下标
<sup>- 上标
- 预格式标签
<pre>
- 删除线
<del>
- 下划线
<ins>
1.13 表格
-
标签
<table>...完整代码</table>
-
属性
- 边框：border
- 单元格间距（外）：cellspacing
- 单元格边距（内）：cellpadding
- 单元格跨列：colspan
- 单元格跨行：rowspan
- 内容对齐：align
-
作用
- 布局
-
贴士
- 表格标签是块级元素
- 全页布局的作用已经退出历史舞台了（div可以实现）
- 专注于自己应该专注的布局领域
- 表格样式
-
demo
- 表格头【可选】
- 表格尾【可选】
- 表格行【必须】
- 单元格【必须】
<table border="1"> <thead> <tr> <th>学号</th> <th>姓名</th> <th>总分</th> </tr> </thead> <tfoot> <tr> <td></td> <td></td> <td></td> </tr> </tfoot> <tbody> <tr> <td>123</td> <td>徐文涛</td> <td>630</td> </tr> <tr> <td>124</td> <td>文涛</td> <td>630</td> </tr> </tbody> </table> -
注意
- 一般也不会直接使用表格头和表格尾，直接使用css定义自己的样式即可。
1.14 表单元素
-
标签
<form>...</form>
-
作用
- 收集用户输入的内容（文本、文件）
-
属性
- action：提交到的服务器地址
- method：指定提交时用哪种HTTP方法：POST/GET
- name：标识
- autocomplete：浏览器是否可以自动填充
- enctype：指定表单内容编码，默认是utf-8
-
表单元素
-
input
- 文本、密码、单选、多选、按钮、数字、日期(因为每个浏览器表现不一样，一般使用第三方的类库)、颜色、范围、邮件、URL、文件
<form action=""> <input type="text" value="我是一段文本" maxlength="10"/> <br/> <input type="password" /> <br/> <input type="radio" name="gender" id="" value="0" checked>男</input> <input type="radio" name="gender" id="" value="1">女</input> <br/> <input type="checkbox" name="aihao" id="" checked>电影 <input type="checkbox" name="aihao" id="">音乐 <input type="checkbox" name="aihao" id="">美术 <br/> <input type="button" value="我是按钮"> <br/> <input type="number" name="" id=""> <br/> <input type="date" name="" id=""> <br/> <input type="color" name="" id=""> <br/> <input type="range" name="" id="" min="10" max="50"> <br/> <input type="email" name="" id=""> <br/> <input type="url" name="" id=""> <br/> <input type="file" name="" id="" multiple> <br/> <input type="submit" value="提交"> </form> -
select
-
下拉列表
<form action=""> <select name="" id=""> <option value="">苹果</option> <option selected value="">梨子</option> <option value="">香蕉</option> </select> </form>
-
-
textarea
- 文本域
- 关注：cols和rows属性
<style> textarea { resize: none; } </style> <form action=""> <textarea name="" id="" cols="30" rows="10"></textarea> </form> -
button
- 按钮
- 关注：type和form属性
<form action="" id="button"> <input type="email" name="" id=""> </form> <button type="submit" form="button">提交</button> <button type="reset" form="button">重置</button>
-
1.15 表单和表格混合使用
<form action="http://www.baidu.com">
<table border="1">
<tr>
<td>姓名</td>
<td><input type="text" name="" id=""></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="" id=""></td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="gender" id="">男
<input type="radio" name="gender" id="">女
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" value="提交">
</td>
</tr>
</table>
</form>
2. CSS入门
2.1 什么是css
- 层叠样式表
- 样式通常存储在样式表中
2.2 为什么要使用css
- 样式定义如何显示HTML元素
- 是为了解决内容和表现分离的问题
- 内容是指HTML中的元素
- 表现是内容在浏览器中呈现的样式
2.3 css声明
-
样式属性
background-color
-
操作符
:
-
样式值
#FFFFFF
-
分隔符
;
-
声明块
-
选择器 { background: #FFFFFF; color:#000000; }
-
2.4 css的内联样式
-
demo
<p style="color: lightcoral; font-weight: bolder;">这是一个段落内容。</p> -
这个方式不推荐使用
- 只对当前的元素起作用
- 混合在html内容中，耦合性太高
2.5 css的外联样式
-
页面内外联
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css的外联样式</title> <style> p { color: lightcoral; font-weight: bolder; } </style> </head> <body> <p>这是一个段落内容。</p> </body> </html> -
页面外外联
-
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css的外联样式-外页面.css"> </head> <body> <p>这是一个段落。</p> </body> </html> -
css
p { color: lightcyan; font-weight: bolder; }
-
2.6 css使用方式的优先级别
- 内联样式>外联样式
2.7 css选择器
- ID选择器
#id
- 元素选择器
span
- 类选择器
.class
- 属性选择器
[属性名]- 还有很多高级的语法
2.8 css的元素选择
- A E
- 祖先元素和后代元素
- 元素A的任一后代元素E（后代节点指A的子节点，子节点的子节点，以此类推）
- A > E
- 父元素和子元素
- 元素A的任一子元素E（也就是直系后代）
- B + E
- 兄弟元素
- 元素B的任一下一个兄弟元素E
2.9 css的伪类
:link- 向未访问的链接添加样式
:hover- 当鼠标悬浮在元素上方时，向元素添加的样式
:active- 向被激活的元素添加样式
:visited- 向已访问的链接添加的样式
<style>
a:link {
color: brown;
}
a:hover {
color: red;
}
a:visited {
color: black;
}
a:active {
color: chartreuse;
}
</style>
2.10 css的伪元素
f12看，并非是真正的元素。
::before- 会为当前元素创建一个子元素作为伪元素
::after- 用来匹配已选中元素的一个虚拟的最后子元素
<style>
q::before {
content: "<<";
color: blue;
}
q::after {
content: ">>";
color: blue;
}
</style>
2.11 选择器的优先级
- ID选择器>类选择器>元素选择器和伪类
- 内联样式>外联样式
- !important升级为最大的优先级
2.12 css设置背景样式
- background
- 简写属性，作用是将背景属性设置在一个声明中
- background-color
- 设置元素的背景颜色
- background-image
- 设置图像
- background-position
- 设置背景图像的起始位置
- 作用：用来显示大图中的某个位置
- background-repeat
- 设置背景图像是否及如何重复
2.13 css设置文本样式
- color
- 设置文本颜色
- text-align
- 对齐元素中的文本
- text-decoration
- 向文本添加修饰
- 比如下划线等
- text-indent
- 缩进元素中文本的首行
- vertical-align
- 设置元素的垂直对齐
2.14 css设置字体样式
- font
- 在一个声明中设置所有的字体属性
- font-family
- 指定文本的字体系列
- font-size
- 指定文本的字体大小
- font-style
- 指定文本的字体样式
- font-weight
- 指定文本的粗细
2.15 css设置列表样式
- list-style
- 用于把所有用于列表的属性设置于一个声明中
- list-style-image
- 将图像设置为列表项标志
- list-style-type
- 设置列表项标志的类型
2.16 css的常见布局
-
两行三列布局
- 注意：下边的demo中使用了float，会出现内容格式叠加的问题。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> html, body{ margin: 0px; } header { background-color: red; height: 200px; } .container { background-color: lightblue; height: 500px; } nav { background-color: lightcoral; height: 100%; width: 20%; float: left; } aside { background-color: lightskyblue; height: 100%; width: 20%; float: right; } article { background-color: lightgreen; height: 100%; margin-left: 20%; margin-right: 20%; } </style> </head> <body> <header></header> <div class="container"> <nav></nav> <aside></aside> <article></article> </div> </body> </html> -
三行两列布局
同上
2.17 css的盒子模型
- 边框
- boder
- 简写属性
- border-style
- 边框样式
- border-width
- 边框宽度
- border-color
- 边框颜色
- boder
- 内边距
- padding
- 简写属性
- padding-bottom
- padding-left
- padding-top
- padding-right
- padding
- 外边距
- margin
- 简写属性
- margin-bottom
- margin-left
- margin-top
- margin-right
- margin
3. Float浮动
float浮动使得元素脱离正常文档流布局，会对正常文档流进行覆盖，但是文本空间会被占用。
3.1 float基本参数
-
float:left- 左浮动
-
float:right- 右浮动
-
float:none- 不浮动
-
float:inherit- 继承父元素的浮动属性
-
demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0px; padding: 0px; } .float { height: 100px; width: 100px; background-color: red; float: right; margin-left: 10px; } </style> </head> <body> <div class="float">1</div> <div class="float">2</div> <div class="float">3</div> </body> </html>
3.2 float文字环绕图片
- 很简单，只需要对图片设置float属性即可实现。
3.3 float引起塌陷
-
现象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0px; padding:0px; } .per { width: 600px; height: auto; border: 1px solid #000; } .test { width: 100px; height: 100px; background-color: red; float: left; } .bro { width: 200px; height: 200px; background-color: blue; } </style> </head> <body> <div class="per"> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> </div> <div class="bro"></div> </body> </html>
- 父元素由于height设置为auto，检测不到float的子元素，所以高度为0.
3.4 float塌陷问题的解决方案
-
手动给父元素添加高度
- 适配性太差，一般不要使用
-
使用css中的clear属性
- 清除元素配置位置的float效果
-
使用overflow和zoom属性
.per { width: 600px; height: auto; border: 1px solid #000; overflow: hidden; zoom: 1; }- overflow属性：一般是处理子元素显示范围大于父元素的情况下
- zoom属性：是IE的一个特殊属性
-
将父元素也设置为float属性，以毒攻毒
4. CSS定位
4.1 static
-
作用
- 使元素定位于 常规/自然流 中
-
特点
-
忽略
top,bottom,left,right或者z-index声明<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .block { position: relative; width: 50px; height: 50px; line-height: 50px; text-align: center; border: 1px solid blue; box-sizing: border-box; top: 20px; } .block:nth-child(2) { border: 1px solid red; position: static; top: 20px; } </style> </head> <body> <div class="block">A</div> <div class="block">B</div> <div class="block">C</div> <div class="block">D</div> </body> </html>其中B设置为static，top属性被忽略
-
-
两个相邻的元素如果都设置了外边距，那么最终的外边距=两个外边距中最大的。两个的margin会出现重叠的情况。
-
具有固定width和height值得元素，如果把左右外边距设置为auto，则左右外边距会自动扩大沾满剩余的宽度，效果就是块水平居中。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .block { position: static; width: 50px; height: 50px; line-height: 50px; text-align: center; border: 1px solid blue; box-sizing: border-box; top: 20px; } .block:nth-child(2) { border: 1px solid red; margin: 0px auto; } </style> </head> <body> <div class="block">A</div> <div class="block">B</div> <div class="block">C</div> <div class="block">D</div> </body> </html>设置B块左右margin为auto
4.2 relative
- 作用
- 可以使得自己成为可定位的参照物元素。
- 特点
- 可以使用top/right/bottom/left/z-index进行相对定位，注意：该相对定位相对的是该元素在常规流中的位置。
- 相对定位的元素不会离开常规流。就是他原本在常规流中的位置也会空在那边，不会被其他的元素占领。【这个跟absolute有区别。】
- 【超级好用】任何元素都可设置为relative，他的绝对定位的后代可以相对于他进行定位。
- 可以使浮动元素发生偏移，并控制他们的堆叠顺序。
- 想改变浮动元素的位置，只能把元素设置为relative的position才可以。
4.3 absolute
-
作用
- 使得元素脱离常规流
-
特点
- 脱离常规流，下边把块B设置为absolute
-
设置尺寸要注意：百分比比的是谁？——— 是最近的relative的祖先元素。
-
lrtb（left/right/top/bottom）如果设置为0，他将对齐到最近定位祖先元素的各边。——— 衍生出一个居中妙计
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .per { width: 200px; height: 200px; background-color: red; position: relative; } .child { width: 50px; height: 50px; background-color: blue; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } </style> </head> <body> <div class="per"> <div class="child"> </div> </div> </body> </html>
-
lrtb如果都设置为auto，则会被打回到常规流。
-
如果没有最近定位的祖先元素，会认
<body>做爹爹。
4.4 fixed
- 作用
- 同absolute是一样的，除了以下几点
- 特点
- 相对于谁做绝对定位，是相对与视口做定位。
4.5 sticky
- 作用
- relative+fixed的完美结合，制造出吸附效果
- 特点
- 如果产生偏移，原位置还是会在常规流中，一亩三分地留着
- 如果他的最近祖先元素有滚动，那么他的偏移标尺就是最近的祖先元素。
- 如果祖先元素没有滚动，那么他的偏移标尺就是视口
4.6 导航实战
- 效果
-
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0px; padding: 0px; } .page { width: 100%; height: 4043px; background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1557045618&di=db82c3194d819704c70aba1835a8ab97&imgtype=jpg&er=1&src=http%3A%2F%2Fwww.th7.cn%2Fd%2Ffile%2Fp%2F2014%2F09%2F05%2F22827e6cb6de149bce145bc1379b4386.png) center top repeat; } .nav { width: 160px; height: auto; position: fixed; left: 0px; top: 50%; margin-top: -103px; font-family: 'Courier New', Courier, monospace; } .nav-li { width: 160px; height: auto; border-bottom: 1px solid #fff; background: #333; text-align: center; line-height: 40px; color: #fff; font-size: 16px; cursor: pointer; } .tit { width: 160px; height: 40px; } .nav-li ul { width: 160px; height: auto; background-color: #fff; display: none; } .nav-li ul li { width: 160px; height: 40px; border-bottom: 1px dashed #666; color: #333; text-align: center; line-height: 40px; font-size: 14px; position: relative; } .nav-li:hover ul { display: block; } .list3 { width: 160px; height: auto; position: absolute; left: 160px; top: 0; display: none; } .list3dom { width: 160px; height: 40px; background: #444; border-bottom: 1px solid #FFF; text-align: center; line-height: 40px; color: #FFF; } .nav-li ul li:hover .list3 { display: block; } </style> </head> <body> <div class="page"> <div class="nav"> <div class="nav-li"> <div class="tit">标题1</div> <ul> <li> 二级栏目 <div class="list3"> <div class="list3dom">三级栏目</div> <div class="list3dom">三级栏目</div> <div class="list3dom">三级栏目</div> </div> </li> <li> 二级栏目 <div class="list3"> <div class="list3dom">三级栏目</div> <div class="list3dom">三级栏目</div> <div class="list3dom">三级栏目</div> </div> </li> <li> 二级栏目 <div class="list3"> <div class="list3dom">三级栏目</div> <div class="list3dom">三级栏目</div> <div class="list3dom">三级栏目</div> </div> </li> </ul> </div> <div class="nav-li"> <div class="tit">标题1</div> <ul> <li> 二级栏目 </li> <li> 二级栏目 </li> <li> 二级栏目 </li> </ul> </div> <div class="nav-li"> <div class="tit">标题1</div> <ul> <li> 二级栏目 </li> <li> 二级栏目 </li> <li> 二级栏目 </li> </ul> </div> <div class="nav-li"> <div class="tit">标题1</div> <ul> <li> 二级栏目 </li> <li> 二级栏目 </li> <li> 二级栏目 </li> </ul> </div> </div> </div> </body> </html>
