一、网页构成
HTML+CSS+JS
二、HTML(超文本语言)
基础框架
注意:本文中<标签名/>为自结束标签,<标签名>(无 “ / ”则省略了</标签名>)
进入VS Code,选择HTML语言输入 “ !”,再按 “Tab” 后,会有以下代码出现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
1.<!DOCTYPE html> 是文档声明,声明当前网页版本,是html5的写法
2.<html lang="en"> 是默认语言为英文,但可以输出中文,只是会让你的浏览器提示你要不要翻译此页,改成zh就没有翻译选项(即变成了中文页面)
3.<head></head> 是头部的标签,帮助浏览器或搜索引擎来解析网页
4.用meta标签设置网页的元数据
charset用来设置网页的字符集,避免乱码问题
name 指定的数据的名称
content 指定的数据内容
<meta charset="UTF-8">选定字符集为UTF-8
<meta http-equiv="X-UA-Compatible" content="IE=edge">
是个是IE8的专用标记,用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式
<meta name="viewport" content="width=device-width, initial-scale=1.0">指定一个元数据名为viewport(设备屏幕上显示网页的区域),它的内容值在content(属性值)里
5.<title></title> 网页标题,搜索引擎根据title中内容判断网页主要内容
6.<body></body>是html的子元素,用来书写网页的主体
常用基础标签
(一)框架标签
<html> <head><title><body>
(二)标题和段落,文本格式化标签
标题标签 | <h1><h2><h3><h4><h5><h6> |
段落标签 | <p> |
换行 | <br/>(自结束标签) |
分割线 | <hr/> |
加粗 | <strong> / <b> |
倾斜 | <em> / <i> |
删除线 | <del> / <s> |
下划线 | <ins> / <u> |
(三)分区,跨度,标签
<div> | 大盒子,独占一行 |
<span> | 小盒子,可以多个占用一行 |
注释 Ctrl+/ | <!-- --> |
链接标签 | <a herf="(网址)" target=“_blank"> </a> |
(四)HTML中的实体(转义字符)
  | 空格 |
> | 大于符号 |
< | 小于符号 |
© | 版权符号 |
(五)列表、表格、表单
- 列表
- 无序标签<ul>(里面用<li>)
- 有序标签<ol>(里面用<li>)
- 自定义标签<dl>,标题<dt>,内容<dd>
ul属性 备注 list-style 无序列表样式none 默认竖着排列 设置左右浮动,横向排列,(清除浮动) type circle空心圆、disc实心圆、square正方形 ol属性 备注 type A、a、1、i、l
- 表格<table (可以写属性)>
- 表格属性
align / valign 表格位置 / 表格内文字位置 border /width / height 边框 / 宽 / 高 cellspacing 单元格于内容之间的距离 cellpadding 单元格之间的距离 background / bgcolor 背景 / 背景颜色
<table> <thead> <tr> <th>……</th> </tr> </thead> <tbody> <td> <th>……</th> </td> </tbody> </table>
- 表格属性
- 表单标签(普遍属性:name标签名称 / 检索值,disabled禁用效果,readonly只读针对input的text/password和textarea,value设定或获取输入值)
- form表单: action = "url"(接口请求地址,不常用),method = 提交方式 get(获取) post(发送)
- label标签名:for="以下表单的id属性"(非必须)
- 提交(button / input)
- input代替
- value:按钮上的名称
- type: submit提交 reset重置 button 按钮
- button按钮 type="subumit"提交
- textarea文本框: cols规定文本可见区域宽度,rows行数
- select选择下拉框:<select>需要name(里面用<option>,option需要value)
- input标签:包含在<form>中,<input type = "属性值”/>
input类型(type) text 文本 / password 密码 name(必须) radio 单选框 / checkbox 多选框 value/name datetime-local 日期(不够美观)
- input代替
(六)图像标签
<img />图像标签,例:<img src="img.jpg"/>
src | 图片路径 |
alt | 替换文本 |
title | 提示文本 |
width/height | 设置图像宽高 |
border | 设置图像边框粗细 |
盒子分类(设置居中见盒模型)
块元素(div,h1-h6,p,table,ul,section,content...)
可自动换行,可设置宽高
margin(外边框),padding(内边框)上下左右有效
内联元素/内联块(a,span,input,select,button)
内联元素(a,span):不自动换行,设置宽高无效
margin仅左右有效,padding都有效
默认排列方式从左到右
内联块(input,select,button):可设置宽高,margin可变
消除默认边距html,body{margin和padding均设为0}
转化(在CSS内)
display:inline(块转行内)
display:block(行内转块)
display:inline-block(转换为内联块)
页面结构
<header> | 标题头部区域内容(用于页面或页面中一块区域) |
<fooder> | 标题脚步区域内容 |
<section> | web网页中一块独立区域 |
<article> | 独立文章内容 |
<aside> | 侧边栏(相关内容和应用) |
<nav> | 导航类辅助内容 |
三、CSS
(一)选择器
(二)常见属性
1.盒模型
(1)外边距margin的应用
- margin 清除周围的(外边框)元素区域, 没有背景颜色,是完全透明的。
- margin 可以单独改变元素的上,下,左,右边距,可以一次改变所有的属性
(设置方式1:margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px;)
(设置方式2:margin:25px 50px 75px 100px;上 右 下 左
margin:25px 50px 75px;上 左右 下
margin:25px 50px;上下 左右
margin:25px;全部)
- 设置居中:
块元素居中:盒子必须设置了宽度,两外边距设置为auto
行内元素或行内块元素的居中,给其父元素添加text-align:center
即可
- 嵌套块元素垂直外边距合并造成的塌陷:对于两个嵌套关系(父子关系)的块元素,父元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值
解决方案:
为父元素定义上边框(透明的) border:1px solid transparent;
为父元素定义上(细细的)内边距 padding:1px;
为父元素添加overflow:hidden;(常用)
5.其他属性(网页布局)
(1)流动布局
(2)浮动布局:(要求一浮全浮,否则当前浮动元素会影响后面的标准流)
float:left/right
清除浮动(清除浮动元素造成的影响)
- 如果父盒子本身有高度,则不需要清楚浮动
- 清楚浮动后,父级就会根据浮动的子盒自动检测高度,父级有了高度,就不会影响下面的标准流了
- 方法:(一般使用clear:both;)
-
额外标签法(隔墙法):(只有块元素可以,不常用)找到最后浮动的盒子,写一个标签(<div class="clear">),在style内加上
.clear{ clear:both; }
-
给父级元素添加overflow属性,将其属性值设置为hidden、auto或scroll。常用overflow:hidden;(缺点:无法显示溢出部分)
-
给父级元素添加after伪元素
clearfix:after{ content:''; display:block; height:0; clear:both; visibility:hidden; overflow:hidden; } .clearfix{ /*IE6、7专有*/ *zoom:1; } <!--父元素内 <div class = "box">改为<div class = "box clearfix"> -->
-
给父元素添加双伪元素(使用同上)
.clearfix:before, .clearfix:after{ content:""; display:table; } .clearfix:after{ clear:both; } .clearfix{ *zoom:1; }
-
(3)定位:
- 相对定位:(以自己原来的位置为顶点,地面上的位置谁都不许占)
position:relative
left 500px(距离原来位置左边500像素)
top 10px(距离原来位置底部10像素)
- 绝对定位:从里到外找第一个有定位的的外层元素作为起点,没有就用浏览器原点
position:absolute;
left 500px(距离起点左边500像素)
top 10px(距离起点底部10像素)
- 固定定位:相对于浏览器可视窗口进行定位,起飞后在xoy面移动,固定定位会固定在浏览器的某个位置,不会随滚动条滚动(特殊的绝对定位)
position:fixed
常用属性
display | Flex |
flex-direction | 指定弹性盒子中子元素的排列方式 |
flex-wrap | 设置当弹性盒子的子元素超出父容器时是否换行 |
justify-content | 设置弹性盒子中元素在主轴(横轴)方向上的对齐方式 |
align-items | 设置弹性盒子中元素在侧轴(纵轴)方向上的对齐方式 |
设置居中(注意设置html和body)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
html,
body {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
.login {
width: 300px;
height: 300px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="login">
登录
</div>
</body>
</html>
(三)引入CSS
方法一:标签引入
- 基础选择器
- (类选择器:用class属性值)(标签选择器)(id选择器)
类选择器
.hhh{
width:400px;
height:400px;
background-color: rgb(104,219,27);
}
标签选择器
div{
......
}
id选择器
#id名称{
......
}
- 复合选择器
- 并集选择器(多个选择器应用相同样式时使用)
- 后代选择器
- 交集选择器
- 伪类选择器/伪元素(见底下链接的补充一)
并集选择器:
多种选择器应用相同样式
选择器,选择器,……{属性名称:属性值}
后代选择器:
定义子标记的样式进行子标记定位
父标记选择器+空格+子标记的选择器{属性名称:属性值}
方法二:行内引入
<div class="hhh" style = 'background-color: aqua;"> hhhhh </div>
方法三:文件外引入
在HTML(同一个)目录下新建一个文件index.css
index.css
仍然使用选择器 . 换成 #
index.html
<link rel = "stylesheet" herf = "./index.css " />
<body>
<div id = "hhh"> hhhhh </div>
</body>
其他网页补充: