文章目录
HTML结构
作用:–有哪些内容组成
一、标签(标记、元素)
-
基本标签
- <!DOCTYPE html> //HTML5标准,文档声明标签 <html lang="en"> //语言为英文的; zh-CN中文,ja-jp日文;可以给搜索引擎译中 <meta charset="UTF-8"> //字符集,用UTF-8万国码密码本编码解码为0101 - 文本标签 <h1>一级标题</h1> ...自带加粗,独占一行,默认间距 - 段落标签 <p>段落文本内容</p> 段落之间有间距 - 换行 <br/> - 水平线 <hr/> - 文本加粗 <b>加粗内容</b>; <strong>强调内容</strong> - 倾斜 <i></i>; <em></em> - 删除线 <s></s>; <del></del>; - 扩展 下划线 <u></u> 下标 <sub></sub> 上标 <sup></sup>
-
htmltagwrap插件- alt+w --> < p>< p>
-
Auto Rename Tag插件- < XX></ XX>前后对应自动修改
-
Live Sever插件- 实时修改页面
-
open in browser插件- 在浏览器中显示
-
<标记 属性= “属性值”></标记>
<标记 属性= “属性值” />
属性 属性值 备注 width “600” 宽度 align “left\right” 居中/左/右 color “green\blue” 颜色 -
-
< div></ div> 无具体意义,但能划分区域(< div>*3)
-
< span style=“color=XX”> 没有实际意义,当文本独立修饰的时候,内容有多宽就占用多宽的空间距离,不改变格式
-
注释:ctrl+/ 即<! ---->
-
回车:ctrl+enter
二、列表,表格,表单
1、列表
- 无序列表
(li里面可以随便放标签,但ul里面只能放li;默认生成黑色实心圆;还有空心圆、正方形、无)
<ul type="disc/circle/square/none">
<li>无序列表</li> <li>无序列表</li>
</ul>
–快捷键ul>li{aaa}*3 回车
- 有序列表
(li里面可以随便放标签,但ol里面只能放li;数字自动生成)
<ol type="1/a/A/i/I",start="4"> 开始标记从第四个开始
<li>有序列表</li> <li>有序列表</li>
</ol>
- 自定义列表
<dl>
<dt>图片1</dt>
<dd>文字1</dd>
</dl>
<dl>
<dt>图片2</dt>
<dd>文字2</dd>
</dl>
–快捷:dl>dt{111}+dd{444}
2、图片
先将所需图片放入总文件的图片文件夹下
<img src="imggg/XXX.gif> “img图片文件夹下的XX图片”
“./表当前路径下的XXX.gif” “…/表上一个文件夹的内容”
图片标签下的属性 | 属性值 |
---|---|
title | 鼠标悬停上去之后的提示信息 |
alt | 图片不显示之后(加载失败)的提示信息 |
width | 200px |
height | 200px |
3、超链接–实现不同页面的跳转
< a href=“已有网站/自己的html路径”> 内容、img </ a>
属性 | 属性值 | 备注 |
---|---|---|
title | XXX | 鼠标悬停的提示信息 |
target | _self 默认值”当前页面“ | 规定在何处打开文档 |
_blank “新窗口打开” |
4、table表格
<table>
<tr>
<td>11</td><td>22</td>
</tr>
<tr>
<td>333</td><td>444</td>
</tr>
</table>
–快捷:table>(tr>td)*2---------可直接设置第一行每个单元格的宽度
属性 | 备注 |
---|---|
width、height | (总表格、单元格)宽度、高度(px或百分比) |
border | (表)外边框线的宽度 |
bordercolor | (表)边框的颜色 |
bgcolor | 背景颜色 |
cellspacing | (表)单元格与单元格之间的间距 |
cellpadding | (表)单元格与内容之间的间隙 |
align=“left\right\center” | (文字、表格)水平对齐 |
valign=“top\middle\bottom” | (文字)垂直对齐 |
Colspan=“2” | 合并的单元格的列数,必须给td 横着来占 |
Rowspan=“4” | 合并的单元格的行数,必须给td 竖着来占 |
5、表单1 --收集用户信息给后端input
<form method="get\post" action="向何处发送表单数据">---js
用户信息:<input type="text" placeholder="请输入你的用户名" name="username">
<br>
密码:<input type="password" placeholder="请输入你的密码">
<br>
<input type="submit" value="登录"> 点击提交信息到action指定的地址--后端地址
==<button type="submit">登录</button>
</form>
----type=“text文本框”、“password密码框”、“submit提交框”、“button按钮框”、"reset重置框"
CSS表现
作用:决定页面是怎么样子的,横向纵向?怎么布局?–布局 配色 定位 做动画等
一、CSS语法
1.外部样式表
-
CSS样式–选择符h3和声明{},声明–属性和属性值
-
声明内容放在{}中,属性和属性值用:连接,属性有多属性值时,不分先后空格隔开
-
每条声明用;结束
①<!-- 直接在html中嵌入CSS,最好放在head中 --> <style> h3{ color: blue;} h2{ color: brown; } </style> ②<!--另外新建一个css,直接将CSS样式放在css文件中--> h3{ color: blue;} h2{ color: brown; } <!-- 在html中使用CSS样式,head(最好使用link,兼容性更好些)--> <link rel="stylesheet" type="text/css" href="css/index.css> 或者<style> @import url(css/index.css); </style>
2.行内样式表
③类似与span,<h3 style=“color: blue;”;>
----样式属性的优先级:就近原则
②外部样式link <①外部样式直接 <③行内样式
改变最高优先级:XX:XXX !important;
3.选择器
(1)标签选择器
div、h1、p、strong、tr、ol{}
(2)类选择器
<style>
.aaa{
background-color: aqua; }
.bbb{
}
</style>
<h5 class="aaa bbb">xnfjdfsdk</h5>
(3)id选择器
<style>
#box1{
background-color: aqua; }
#box2{
}
</style>
<h5 id="box1">xnfjdfsdk</h5> 唯一id
(4)通配符选择器
作用:清除所有元素的默认边距值和填充值
*{
margin:0; 外边距
padding:0; 内边距
}
(5)群组和后代(包含)选择器
①群组选择器
div,.box1,h1{
---中间逗号
background-color:yelliw;
}
<div>dhjka</div>
<h5 class="box1">xnfjdfsdk</h5>
<h1>dsf</h1>
②后代选择器
div h1{
---中间空格
background-color:yelliw;
}
<div>
<h1>dhjka</h1>
</div>
(6)伪类选择器–也可用于盒子.box:hover{}
<style>
a:link{
属性:属性值;}超链接的初始状态
a:visited{
属性:属性值;}超链接被访问后的状态
a:hover{
属性:属性值;}鼠标悬停时状态(一般情况下都要另外定义)
a:active{
属性:属性值;}鼠标按下时超链接被激活时的状态
</style>
<a href="已有网站/自己的html路径> 内容、img </a>
注意:四者的顺序不能改,不然样式被覆盖失效
(7)选择器的权重
—多选择器且有属性冲突:(!important)
元素选择器 <Class选择器 <id选择器 <包含选择器(权重之和比较) <行内样式
二、CSS核心属性
1.css文本属性
属性 | 属性值 | 说明 |
---|---|---|
font-size | 字体大小 | 分辨率:像素px(浏览器默认16px,设计图常用12px) |
font-family | 字体 | 宋体,仿宋,楷体, 微软雅黑……(连续时用逗号隔开) |
color | 颜色 | color:red; color:#ff0; color:rab(255,0,0); 0-255 |
font-weight | 加粗 | font-weight:bolder(更粗的)/bold(加粗) /normal(常规) |
font-weight:100-900; 400正常 600-900加粗 | ||
font-style | 倾斜 | italic(斜体字) /oblique(倾斜的文字) /normal(常规显示) |
text-align | 文本水平对齐 | left; right; center; (justify;水平2端对齐,但是只对多行起作用) |
line-height | 文字行高 | 100px; (line-height)=(height)时可实现单行文本垂直居中 |
text-indent | 首行缩进 | 可以取负值;该属性只对第一行起作用(XX:2em==&emsp$emsp) |
letter-spacing | 字符间距 | 文字或字符之间的间距 |
word-spacing | 单词间距 | 英文单词之间的间距 |
text-decoration | 文本修饰 | none 没有、under下划线、overline上划线、over-through删除线 |
font | 文字简写**** | font是style weight font-size/line-height family的简写 |
font:italic 800 30px/80px “宋体”;顺序不能改变 |
2.css列表属性
属性 | 属性值 | 说明 |
---|---|---|
list-style-type | 列表符合样式 | disc(实心圆)、circle(空心圆)、square(实心方块)、none(去符号) |
XX-image | 将图片设置为列表符合样式 | list-style-image:url(img/1.jpg); |
XX-position | 列表项标记(type、image)的放置位置 | outside;默认值列表的外面 inside;列表的里面 |
list-style | 简写 | XX:none;去除列表符号;顺序可变 |
简写/复合写:list-style: none inside url(img/VS.png);
3.css背景属性
属性 | 属性值 | 说明 |
---|---|---|
background-color | 背景颜色 | XX:red;rgb(0,0,0); |
XX-image | 背景图片 | XX-image:url(img/1.jpg); |
XX-size | 图片大小 | px px、XX% XX%、 cover(扩展到足够大,会被裁掉一些)、contain(最大尺寸,盒子有留白) |
XX-repeat | 图片的平铺 | no-repeat/repeat/repeat-x/repeat-y; |
XX-position | 图片的定位 | XX: 水平位置(right/center/left) 垂直位置(top/center/bottom);可为负值 |
XX-attachment | 图片的固定、滚动 | scroll(默认滚动)/ fixed(固定,固定在浏览器窗口的位置里,固定之后就相当于浏览器窗口了,与盒子无关–不在盒子范围时不显示); --视觉差demo |
background | 简写 | 可以只取一个值,其他的默认值显示(会覆盖);size只能单独使用;空格隔开;顺序可以换 |
4.css边框属性–盒子模型
5.css浮动属性–盒子水平排列
-
作用:定义网页中其他文本如何环绕该元素显示;让竖着的东西横着来(该样式浮动,后面的顶替原先位置,会依次排序)
float:left;元素靠左浮动
right;元素靠右浮动
none;不浮动
-
清浮动
若前多者浮动完将后者挡住,要将其挡住内容重新显现出来,位置下移–计算高度差线:
①写固定高度(即已知前面的高度来固定前多者整体的高度)
②清浮动 --只是改变元素的排列方式,该元素还是漂浮着的,不占据文档位置
clear: none; 允许前面有浮动对象 –即放在后者样式中
:right; 不允许右边有浮动对象
:left; 不允许左边……
:both; 不允许有浮动对象
③在两者中间(即后者前面加一个空盒子,不设宽高,clear:both;)
<div class="box1"></div> <div class="box2"></div> <div style="clear:both;"></div> <div class="box2"></div>
④bfc,让浮动元素计算整体高度
.cc{ overflow:hidden;} <div class="cc"> <div>aa</div> <div>bb</div> </div>
三、盒子模型
1、内边距(内容与边框之间的距离)
–背景色会蔓延到内边距–不支持负值
padding