1.图片格式:
<img src="" alt="" title=" ">
:图片属性,alt:可替换的文本,图片显示不出来显示这个
title:鼠标移上去显示的内容
jpg:有损压缩 影响画质 小
png:无损压缩 不影响画质 大 透明通道
gif:动态图
图片方式:本地图片:绝对路径:从盘符算起的路径
相对路径:从当前路径算起的路径 与该文件下同一级别的
网络图片
2.超链接:
<a href="(网页地址)" target="_blank"></a>
_blank:在新页面打开
书签标记:锚点,
<br id="mid1">
<a href="#mid1"></a>回到指定页面的地方
<a href="#"></a>回到页面的最顶上
3.图片映射:
<img src=“C:\Users…\xx.jpg”uesmap="#xxx">
<map name="xxx">
<area shape="" coords=" " href=""alt="">area标签是地图里面具体可点击的区域的
shape:定义区域形状:有三个属性:circle rect(矩形) poly(多边形)
coords:定义坐标点 circle:中心坐标,圆的半径
rect:左上角点的坐标,右下角点的坐标
</map>地图标签
4.列表:
无序列表 :内容列表 ul+li 无顺序关系
有序列表 :内容列表 ol+li有顺序关系
自定义列表:内容标题+内容 dl+dt(标题)+dd(内容)
5.表格:
<table>
colspan 列数
rowspan行数
若干 行 <tr>
若干个 单元格
<th></th>标题
<td></td>内容
</tr>
</table>
6.表单:
収集 用户输入 发送或提交给服务器
输入:内容
文本:普通 密码
单选框:
多选框:
下拉框:
提交:提交按钮
http:超文本传输协议 浏览器和服务器的通讯
模式:请求-应答 浏览器主动发起请求-》服务器 接收 -》自身做处理-》结果返回浏览器-》浏览器根据结果展现出来
GET :提交的内容放到网址里
POST:提交的内容放到http里
注册页面:
表单:<form action="提交给服务器到哪个网址" method=“ GET”>
用户名:<input type="text" name="username"><br >
密码: <input type="password" name="pas">
性别(单选框):<input type="radio" name="sex"value="male">男
<input type="radio" name="sex"value="female">女
<input type="radio" name="sex">未知
兴趣爱好(复选框):<input type="checkbox"name="ckb"value="kanshu">看书
<input type="checkbox"name="ckb" value="chifan">吃饭
<input type="checkbox"name="ckb" value="daqiu">打球
选择城市(下拉框):<select name="city">
<option value="sh">上海</option>
<option value="bj">北京</option>
</select>
提交按钮:<input type="submit">
</from>
- 网页布局:功能-》小块-》排列好 把具体的内容填充到小块
div:容器 用来装东西的
8.嵌套规则:
块元素:独立成立一行 可以设置宽高 默认宽高100%
块元素分为:文字类块元素p h1-h6
容器类块元素div table tr td th form ul li ol dl dt dd
行元素:不独立成立一行 不可以设置宽高 内容觉得宽高
a img input strong em del span
特殊字符:文字 br  (空格);
嵌套规则:
1.块元素可以嵌套行元素<div></div>
2.行元素可以嵌套行元素
3.行元素不可以嵌套块元素
4.文字类块元素不可以嵌套块元素
5.容器类块元素可以嵌套块元素
- css:层叠样式表, 选择器:
通配符:* 包括所有的
标签div:div
id选择器:以#开头
class选择器:以.开头
原理:
1.优先原则:后解析的内容会覆盖掉之前解析的内容
1.同一选择器:从上往下执行 解析,
2.同一类型的选择器:从上往下
3.不同类型选择器:优先级 先解析低优先级的-》高优先级
4.外部样式跟内部样式,合并之后一起解析
5.内联样式:外部+内部解析完了,才解析内联样式
6.加了important,最后执行
2.继承原则:嵌套里面的标签 拥有外部标签的某些样式,子元素可以继承父类元素的属性
1.跟文字 文本相关的样式 可以被继承,其他不能被继承
2.块级元素 宽度不设置-》父类元素的宽 高-》内容决定
-
组合选择器:1.分组选择器:把基本选择器 通过特殊符号串在一起div,p
2.嵌套选择器:空格隔开 div p-> 选择的是p标签 ,必须是嵌套在div里的p标签才生效,可以是父级及以上
3.子选择器:div>p p(父标签 div)
4.相邻的 同级别的选择器 div+p -》与p是同一级别的标签 -
属性选择器:
p1
p2
基本选择器[属性], [属性=值] p[title=qiuqiu]{样式} p1有样式 [属性~=值] 只要title里的值包含qiuqiu就算 p[title~=qiuqiu]{样式}p1有样式,p2包含qiuqiu2,无样式 [属性^=值]开始 属性里有这个值且以qiuqiu开始的 p[title^=qiuqiu]{样式} p1,p2标签都有样式 [属性$=值]结束 属性里有这个值且以cc开始的 p[title$=cc]{样式} p1,p2标签都有样式
-
伪元素选择器:
伪元素:假的
元素
开始:before
结束:after
p::before{
content:“before”;
}
p::after{
content:“after”;
}
13.背景使用:background-color:背景颜色
background-image:url('图片地址')
background-repeat:repeat-x 沿着x轴平铺
repeat-y 沿着y轴平铺
no-repeat 不平铺
background-attachment:fixed 固定 鼠标滚动背景图不会随着滚动
background-position:x轴 y轴 100px 100px
50% 0%
cenrer top
x:left center right
y:top center bottom