HTML/CSS
路径
- 上一级相对路径:
网页在另一个文件夹(最少是平级文件夹)中,是返回文件夹的动作，注意:需要写…/ - 同级相对路径：网页和其它文件在同一个目录下
- 下一级相对路径:其它文件在另一个文件夹(最少是平级文件夹)中,是双击文件夹的动作，注意:需要准确的写出文件夹的名字用/
- 绝对路径:文件所在磁盘中的物理位置，
浏览器出于安全的考虑,不能直接访问磁盘中的文件，可以通过ip访问文件，域名不一定是网页,有可能是某个文件或者接口
html5新增类一些常用标签和一些功能,不能在ie低版本下使用,h5通常指的就是移动端
常用标签
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
表单: 表单标签,表单域,提示信息
标签:
label 提示标题
属性:
for:单击文本让表单标签获取焦点, for等于表单标签的id值
input
属性:
type:
text 输入框
password 密码框
radio 单选按钮
name 组的概念,将多个单选的name值设置成相同,可以实现单选效果
checked 默认选中, 第一种checked="" 第二种checked="checked"
第三种checked
checkbox 多选框
checked 默认选中, 第一种checked="" 第二种checked="checked"
第三种checked
button 普通按钮
属性
value 按钮文本
submit 提交按钮, 要将按钮和提交的标签写在form中
reset 重置按钮,将form中的表单标签内容清除
select 下拉框
option 下拉项
selected 默认选中,用法和checked一样
optgroup 下拉组
属性
label 组标题
textarea 文本域(多行文本)
form 表单域
action 提交地址
method 提交方式 get(url提交)/post(请求报文提交)
button 按钮
属性
type
button 普通按钮 submit提交按钮(默认值) reset重置按钮
-->
**************************************************************************************
<!--
表格标签:
table:表格标签
tr:行标签
td:单元格
th:表头
caption:表格的标题
属性:
border:边框
width:宽度
height:高度
align:left(默认值)/center/right
cellspacing: 单元格之间的间距(默认值:2)`
-->
**************************************************************************************
<!--
自定义列表: 自定义主题,列表项围绕着主题
dl只能包含dt和dd
dt和dd可以包含其他的标签
-->
<!--
有序列表: 遵循一定的顺序
ol是用来管理一组列表,li是列表项
ol只能包含li标签,li可以包含其他任何标签
-->
<!--
无序列表: 不遵循一定的顺序.
ul是用来管理一组列表,li是列表项
ul只能包含li标签,li可以包含其他任何标签
-->
**************************************************************************************
//特殊字符: 在网页中有些特殊的字符需要用特殊的符号表示
< > ©
**************************************************************************************
<h1>--- </h6>
<!--注释标签 ctrl+/ -->
<hr />
<p></p>
<font color="green">文本标签</font>
<!-- 老式 新式 -->
<b>加粗</b> <strong>加粗</strong>
<i>倾斜</i> <em>倾斜</em>
<u>下划线</u> <ins>下划线</ins>
<s>删除线</s> <del>删除</del>
**************************************************************************************
图片标签:img
属性:用来描述事物的特征, 一个属性名对应一个属性值(键值对,key/value对,k/v)
例如: <人 姓名="老刘" 性别="男" 眼睛="水汪汪的小眼睛"/>
img的属性:
src:图片路径
width:图片的宽度(单位默认是像素px)
height:图片的高度(单位默认是像素px)
当单独设置宽度或者高度时,相应的宽高会进行等比例缩放
border:图片的边框(单位默认是像素px)
title:提示文本(鼠标悬停)
alt:替换文本(当图片不存在时显示)
**************************************************************************************
<!--
内部链接: 在自己的网站中,网页相互跳转
a标签
属性:
href: 跳转的路径(相对路径)
target: _self 从当前选项卡直接跳转(默认值)
_blank 重新打开一个选项卡跳转
外部链接: 从当前自身的网站跳到其它的网站(绝对地址)
空链接: 在href属性中写#号,表示不希望a标签跳转,一个#号会回到页面顶部,所以写两个##号
<a href="##"></a>
锚点链接: 在当前页面内部,上下进行跳转.
设置跳转标签的id属性,属性值是唯一的.
a标签设置href属性,属性值是#跳转标签的id属性
<a href="#id值"></a>
/*
* 鼠标样式: pointer 小手
*/
cursor: help;
/*
* 下滑线: underline
* 上划线:overline
* 中划线:line-through
* 去掉线: none
*/
text-decoration: line-through;
}
div{
width: 300px;
height: 300px;
background: pink;
/*
* 强制字母换行
*/
word-break: break-all;
/*
* 强制汉字不换行
*/
white-space: nowrap;
-->
</body>
</html>
插入图和背景图的区别:
插入图是标签,标签是占位置的,是为了突出图片
背景图是属性,是不占位置的,为了进行装饰标签
<!--
标签语义化: 在需要的位置,用合理标签,在没有任何样式情况下,结构依然清晰
显示模式:
1.块级显示模式: 设置宽高起作用,自己单独占一行,在不设置宽度的情况下,和父级的宽度一样
块级元素:div h1-h6 p ul ol li dl dt dd hr form
2.行内显示模式: 设置宽高不起作用,宽高被内容撑开,一行可以有多个
行内元素:span a b strong i em u ins s del
3.行内块显示模式: 设置宽高起作用,一行可以有多个
行内块元素: img 表单标签
-->
<!--
显示模式转换: 显示属性:display
其它显示模式转换成行内块显示模式: display:inline-block;
其它显示模式转成块级显示模式:diplay:block;
-->
选择器
简单选择器:
标签选择器 类选择器 id选择器
复合选择器:
后代选择器: 将之前的简单选择器结合使用,通过祖先空格后代的方式,根据权重值来设置
标签的样式
权重:
标签选择器 （1） < 类选择器 （10） < id选择器 （100）< 行内式（1000） < !important （ 无穷大）
css
css三种书写位置:
第一种:内嵌式,css代码和html标签相对分离,代码耦合度相对较低,在工作中,适当的会
使用,在讲知识点的时候,为了方便和直观,使用此方式
第二种:行内式,css代码和html标签掺杂在一起,代码耦合度较高,维护性差,在工作中,适当的
会使用.
第三种:外链式,css代码和html标签绝对分离,代码耦合度极低,在工作中,绝大多数使用此方式
css层叠性:
在设置css属性时,不同的属性都可以实现,在设置相同属性时, 在权重相同的情况下,后定义会层叠(覆盖)先定义,在权重不同时,实现权重高的
css继承性:
1 标签可以继承祖先所有关于设置文本的属性,优先继承最近的父辈元素,继承的权重是0。
2 h标签在内部对字号进行了设置,所以在继承时,会层叠掉继承的字号值
3 a标签在内部对字体颜色进行了设置,所以在继承时,会层叠掉颜色的值
伪类
伪类:是四种状态,当四种状态同时存在时,要按照： lvha
未访问状态：link
访问后的状态 :visited
鼠标移入状态:hover
鼠标按下状态:active
访问后状态:只能改变颜色,出于隐私的考虑
伪类常用两种状态:
如今常用的两种状态是默认和鼠标移入,此时由于没有访问后的状态,
直接设置标签的默认样式和hover状态就可以了.
当连接跳转地址都一样时,单击后会实现所有相同连接默认的访问状态
上一篇： (css3常用动画的实现
下一篇： css层贴样式表与css选择器