半个月学习HTML CSS JS基础知识总结上（内涵HTML,CSS）
| HTML | 结构 |
|---|---|
| CSS | 表现 |
| JS | 行为 |
- 刚开始用记事本的话要想生成一个网页，首先有一个模板–示例如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>
- 上面代码的每一行解释如下
<!DOCTYPE html>
//首先你要声明一下自己是在HTML5的环境下执行的代码
<html>
//在HTML里面展示你要写的内容
<head>
//<head>里面写的东西是在被浏览器中首先检索的
<meta charset="utf-8" />
//使用meta标签来设置网页的关键字例如如下
<meta name='keywords' content='HTML5,JavaScript,前端'/>
<!-- 可以对网页进行描述-->
<meta name='description' content='发布h5,js等前端的相关信息'/>
<!-- 使用meta可以用来做请求的重定位-->
<meta http-equiv='refresh' content='秒数;url=目标路径'/>
<meta http-equiv='refresh' content='5;url=www.baidu.com'/>
<title>美女图片</title>
//<title>标签是搜索引擎刚开始就检索的
</head>
<body>
//<body>中的都是你要在页面中显示的，下面我们来举几个常用的标签属性
<h1> 这是我的第一个网页</h1> h1-h6(六个等级标题标签)
<p>我是一个p标签，我用来表示一个段落</p> 表示一个段落标签
<a href='http://www.baidu.com' target='_blank'>可以调转的超链接</a> <br /> 超链接 href：指向跳转的目标，target：_self在当前窗口打开；_blank在新的窗口打开
<center>快看我可以居中啊！</center>
<br/> 换行符 <hr/> 画一条水平的线
  表示空格
<img src='../abc/bcd/Gs.jpg alt='这是一只可爱的猫'/> src引入图片 alt给搜索引擎看的
<iframe src='dome01.html' name='tom'></iframe> 是一个内联框架，因为不被搜索引擎所检索，不推荐使用 scr：指向外面的路径，name：为内联框架指定一个名字
</body>
</html>
下面我们感受一下结合的HTML和CSS(一般都是分开写方便维护)
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title >css</title>
<!-- 在这里面定义css-->
<!--
<style type='text/css'>
p{
color:green;
font-size:40px;
}
</style>
-->
(下面这一行才是开发中经常用的)
<link rel='stylesheet' type='text/css' href='style.css'/>
</head>
<body>
<!--
内联样式属于结构与表现耦合 不方便后期维护， 不推荐使用
<p style='color:red;font-size:40px;'>锄禾日当午</p>
-->
</body>
</html>
接下来我们依次介绍这里面的每一个
- 块和内联元素
<!-- div这个块 会独占一行 其中p和h1，2，3，4等都是一个块 来实现对页面的布局-->
<div style="background-color: red; width: 200px;">我是一个div</div>
<div style="background-color:red;width: 200px;">我是一个div</div>
<p style="background-color: red;">我是一个p标签</p>
<!-- span 是一个内联元素 只是自身大小 a img iframe span 来实现选中文本设置样式-->
<span>我是一个span标签</span>
<span>我是一个span标签</span>
<!-- 一般块元素去包含内联元素 不用内联元素去包含块
a可以包含任何元素，除了他本身
p元素不可以包含任何其他的块元素-->
- 常用选择器
/* 1 元素选择器 */
p{
color: red;
}
/* 2 id选择器 */
#p1{
color: blue;
}
/* 3 类选择器 之间用（空格隔开） */
.p2 .hello{
color: red;
}
/* :4 选择器分组 中间用（并集：逗号隔开） ; */
#p1,.p2,h1{
background-color: greenyellow;
}
/* :5 复合选择器 （交集：直接挨着写就行）; */
p.hello{
background-color: red;
}
- 父子元素
/*
为div中的span设置一个颜色为绿色
后代元素选择器：语法：祖先元素 元素{}
*/
/* :1 为div中的p 里面的 span设置为红色 */
#d1 p span{
color: red;
}
/* :2 ie6及一下的浏览器不支持元素选择器*/
div > span{
background-color: yellow;
}
- 伪类选择器
/* link 表示不同的链接（没访问过的链接） */
a:link{}
/* visited 表示访问过的链接 涉及到隐私问题 不可以设置设置颜色*/
a:visited{}
/* hover 伪类表示鼠标移入的状态 */
a:hover{}
/* active 表示的超链接被点击的状态 */
a:active{}
/* 文本框获取焦点以后，修改背景颜色为黄色 */
input:focus{}
/* p标签中选中内容的样式 */
p:selection{}
- 伪元素
/* 使用伪元素表示元素中的一些特殊的位置 */
/* p为第一个字符来设置一个特殊的样式 */
p:first-letter{
background-color: red;
}
p:first-line{
background-color: yellow;
}
/* before 可以出现在p的最前面
after 可以出现在p的最后面*/
p:before{
content: '我会出现在整个段落的最前面';
}
p:after{
content: '我出现在整个段落的最后面';
color: orange;
}
- 属性选择器
/*
[属性名] 选取好友指定属性的元素
[属性名=''] 含有属性值的元素
[属性名^=''] 属性名以指定内容开头的
[属性名$=''] 属性名以指定元素结尾的
[属性名*=''] 属性名suo包含元素的
*/
p[title='hello']{
background-color: yellow;
}
p[title^='ab']{
background-color: red
}
p[title&='c']{
background-color: orange;
}
p[title*='a']{
background-color: aqua;
}
- 子元素选择器
/* 1 :first-child可以选中第一个子元素*/
/* 2: :last-child可以选中第一个子元素*/
/* :3 :nth-child()可以选中第一个子元素
()里面 是数字的话就正常来
是odd的话就是奇数 eve是偶数
*/
/* 4 :first-of-type
last-of-type
nth-of-type
和上面的first-child这些类似
只不过child，是在所有的子元素中排列
而type，可以定义类型
*/
- 兄弟选择器
/* 1可以通过 + 号来为兄弟右面第一个的来设置字体等 */
span + p{
background-color: red
}
/*2 可以通过 ~ 号来为兄弟后面的全部来来设置字体等 */
span ~ p{
background-color: yellow;
}
- 否定伪类
/* 从已经选中的里面剔除 某些元素 */
/* 剔除love */
p:not(.love){
background-color: greenyellow;
}
- 样式的继承
<div style="background-color: yellow;">
<p>我是div 中p标签中的文字
<span>我是span中的标签</span>
</p>
</div>
- 选择器优先级
/* 优先级规则
内联样式 优先级1000
id选择器 优先级100
类和伪类 优先级10
元素选择器 优先级1
通配* 优先级0
继承的样式 没有优先级
*/
- 文本标签
<!-- em strong 和i(没有强调) d(表示强调) -->
<!-- small标签和big标签(相对与正常的大一点or小一点) -->
<!-- 文本标签 cite 和q标签(自动加双引号) blockquote(表示一个长引用---块级引用--另起一行)-->
<!-- sub(下)标签和sup(上)标签 -->
<!-- del表示删除内容(自动添加删除线) -->
<!-- ins表示添加一个插入内容 -->
<!-- pre是一个格式标签(这里写的啥就是啥) 伴随着(code)使用-->
- 列表
<!--
1：有序列表
2：无序列表
3：定义列表
ul 和 ol 和dl 可以进行互相嵌套
-->
<!-- ul---无序列表(里面用li展示列表项) type=disc
disc，默认值--实心圆点
square，实心的方块
circle，空心的
-->
<!-- ol-----有序列表(里面还是li展示列表)
默认值 是 数字
a/A 采用小写或者大写来表示
i/I 采用大写或小写来表示
-->
<!-- dl------对一些词汇或内容进行定义
dt:被定义的内容
dd:对定义内容的描述
-->
- 单位
/* 长度单位
像素px----显示效果越清晰 像素就越小 反之像素就大
子元素中用 % 来控制大小
*/
.box{
width: 100px;
height: 100px;
background-color: red;
}
/* em是百分比类似 相当于当前元素的字体大小来计算的
1em=1font-size
*/
.box1{
font-size: 100px;
width: 2em;
height: 50%;
background-color: green;
}
- 颜色的单位
/* 颜色单位 rgb
红色：red
绿色：green
蓝色：blue
*/
/* background-color: rgb(100%,50%,50%) */
/* background-color: #f00 */
/* background-color: rgb(161,187,215) */
- 字体的样式
.p1{
/* 字体颜色 */
color: red;
/* 字体大小 是指格格的大小*/
font-size: 50;
/* 可以指定文字的字体样式 浏览器支持就用 不支持就默认
指定多个字体时用(,)隔开 按写的顺序进行使用
*/
/* font-family: 微软雅黑; */
/* font-family: 华文彩云,arial,微软雅黑; */
font-family: 'curlz mt';
}
<!-- font-family 在网页中字体分成5大类
serif(衬线字体)
sans-serif(非衬线字体)
monospace(等宽字体)
cursive(草书字体)
fantasy(虚幻字体)
-->
- 字体的其他样式
.love{
font-size: 30px;
font-family: '华文彩云';
font-style: italic; /**normal 默认值italic 常用--斜体oblique 不常用--倾斜*/
font-weight: 900;/** normal默认值 bold 文字加粗显示指定在100~900之间*/
font-variant: small-caps;/**normal 默认值small-caps 文本以小型大写字母显示*/
}
/* 之间用(空格)隔开 字体 1:大小 和 2:样式 必须写 */
.you{
font: small-caps bold italic 50px '微软雅黑';
}
- 行间距
1/* css中没有指定的行间距
通过line-height来设置行高 网页中又看不见的行高
！！！字体在方块里面 默认是垂直居中的
行间距=行高 - 字体大小
*/
2/* 可以将行高设置为 和父元素一致
这样可以使单行文本在父元素中垂直居中
*/
line-height: 200px;
.p2{
3/* 在这里也可以设置字体的行高
如果提前设置 后面的会覆盖前面的
*/
font: 20px/50px '微软雅黑';
}
- 文本样式
/* text-transform 设置文本的大小写
可选值
none 默认
capitalize 首字母大写 通过空格开控制字母的大小写
uppercase 全部大写
lowercase 全部小写
*/
/* text-decoration设置文本的修饰
none
underline
overline
line-through
*/
/* letter-spacing指定字符之间的间距
word-spacing 指定单词之间的间距
*/
/* text-indent 设置首行缩进 可以把不想让用户看见的隐藏起来
给定正值 向右
给定负值 向左
一般会使用em做单位
*/
- 盒子模型
.box1{
/*
给四个值：顺时针修饰
给三个值：上 左右 下
给两个值：上下 左右
给一个值：全部
*/
border-width: 10px 20px;
/* 颜色给值也是一样 */
border-color: red;
/* 样式给值也是一样同时提供border-xxx-style四个样式，来分别设置*/
border-style: solid dotted dashed double;
}
.box2{
/* border来进行同时设置四个边框 没有顺序要求 不可以分别指--可以在地下进行改动 */
border: red solid 10px;
border-right: none;
}
- 内边距
.box1{
/* 内容区和边框的距离
padding-top/bottom/right/left
内边距会影响盒子的可见框大小 元素的背景会影响到内内边距
这里的内边距给定的数字和 边框一样 利用padding直接设置
*/
padding: 100px;
}
- 内联元素的盒子
.s1{
/* 内容区 内边框 边框 外边框 */
/* 内联元素不可以设置width和height */
width: 200px;
height: 200px;
/* 可以设置水平内边框 不是重叠 而是求和 */
padding-left:100px;
padding-right: 100px;
/* 可以设置垂直内边框 但是不会影响页面的布局 */
padding-top:100px;
padding-bottom: 100px;
/* 设置边框 但是垂直边框不会影响页面的布局*/
border: red solid;
/* 外边框 支持水平 不支持垂直 */
margin-left: 10px;
margin-right: 20px;
margin-top: 1000px;
margin-bottom: 10000px;
}
- 外边距
/* 将浏览器的默认边框去掉的方法 */
*{
margin: 0;
padding: 0;
}
/* 另一种居中的方法 */
margin: 0 auto;
/* 外边距是 我放盒子 和 敌方盒子 的距离
margin-top/bottom/right/left
不会影响盒子的可见框大小 而会影响盒子的具体位置
这里的内边距给定的数字和 边框一样 利用margin直接设置
*/
/* 如果是负值就会向反方向移动 */
margin-top: -50px;
- display
/* 通过display可以修改元素的类型
inline：可以将一个元素作为内联元素
block：可以将一个元素设置为块元素
inline-block:转换为 行内块元素---块和内联元素的属性都有
既可以设置宽高 也不会独占一行
none 消失不显示 并且不会
*/
display: none;
- overflow
/* 子元素可以超过父元素在父元素以外的地方显示
overflow可以设置超出的部分会怎样
visible 默认值
hidden 会被修剪 超出的部分不会显示
scroll 为父元素添加滚动条 不管是否溢出 都会有滚动条
auto 根据需求自动添加滚动条
need水平就添加水平滚动条
need垂直~
不需要就不加
*/
- 文档流
<!-- 文档流在网页的最底层 默认都在文档流中
在文档流中的特点
块元素：
独占一行 上下排列
宽度默认是父元素的100%
内联元素：
只占自身大小 默认从左至右排
如果一行不行 就换行 继续自左向右pai
-->
- 浮动
/* 浮动元素不会盖住文字 文字会自动环绕在浮动元素周围
可以设置文字环绕图片的效果
元素一浮动就变的萎蔫了
*/
/* 在文档流中 子元素默认会占父元素的全部 */
/* 当元素设置为浮动后 高度和宽度都会被内容撑开 */
/* 内联元素开启浮动后 会变成块元素 */
/* box1浮动导致box2向上浮动了100px
为避免这个 我们希望可以清除其他元素浮动对当前元素产生的影响：用clear
none 默认值 不清除浮动
left 清除左侧浮动的影响
right 清除右侧浮动的影响
both 清楚两侧浮动产生的影响--清除影响最大的一个
*/
- 高度塌陷
/* 文档流中子元素默认撑开 父元素 子元素多大 父元素多大
当子元素浮动后 父元素塌陷
塌陷之后 父元素下面的元素会向上移动
*/
1 让父元素和子元素一样高
2 开启BFC
如何开启
1设置浮动元素--随可以撑开但是会导致父元素宽度丢失
2设置绝对定位
3设置元素为inline-block 导致宽度丢失
4将元素overflow设置为visible --副作用最小
3 在父元素下面添加一个空白的div 通过div的清除浮动来降低影响
4
/* 最终方案:解决塌陷 */
/* 通过after伪类来解决 选中box1后边 */
.clearfix:after{
/* 添加一个内容 */
content: '';
/* 转换成一个块元素 */
display: block;
clear: both;
}
- 定位
/* 定位 position
static 默认值
relative 开启相对定位
absolute 开启绝对定位
fixed 开启元素的固定定位(也是绝对定位的一种)
*/
/* relative
1 光开启不用 相当于没开启
2 是相对于元素在文档流中原来的位置
3 不会脱离文档流
4 性相对定位会使元素提升一个层级
5 块还是块 内联还是内联
*/
/* absolute
3 绝对定位是相当于离他最近的开启了定位的祖先元素进行定位的
(一般情况，开启了子元素的绝对定位 都会同时开启父元素的相对定位)
如果祖先没有开启定位则是相对于浏览器窗口进行定位的
5 内联元素会变成块元素
块元素的高度和宽度都会被内容撑开
*/
/* fixed
3 永远是相对于浏览器窗口进行定位的
会固定在某个位置 不会随滚动条滚动而滚动
5 内联元素会变成块元素
块元素的高度和宽度都会被内容撑开
*/
- 层级和透明度
/* 层级是一样的会按先后顺序进行排序遮掩
可以通过z-index来设置层级
z-index越高越优先显示
对于没有开启定位的不可以设置层级
*/
/* 可以设置透明度
opcity可以用来设置元素背景的透明度
0-1之间的数
0：表示完全透明
1：表示完全不透明
*/
- 背景
/* 设置背景图片
如果背景图片大于元素 默认会显示图片的左上角 一样大就会全部显示 背景图片小的话 将背景图片平铺显示
*/
/* 可以设置平铺方 background-repeat
repeat 默认no-repeat 不平铺repeat-x x轴平铺repeat-y y轴平铺
*/
/* 默认是贴着左上角显示 background-position
通过background-position可以调整整个背景图片在元素中的位置top right left bottom center ，top left 左上，bottom right 右下，如果只给出一个值 就默认是center
background-position: center;
也可以给两个偏移量，水平偏移量，垂直偏移量
background-position: 200px 180px;
*/
/* 通过background-attachment用来设置背景图片是否会随页面一起移动
scroll 默认值 背景图片随着窗口一起滚动，dixed 固定在某一位置 不随着滚动
*/
- 表格
<!-- table制作表格
tr 表示行
td 表示列(还可以用th来着重显示)
rowspan横向合并单元格
colspan横向合并单元格
table和td之间有一个默认的距离，可以使用border-spacing 来设置这个距离
border-collapse: collapse;//进行边框合并
长表格用
thead 表头
tbody 表格主题
tfoot 表格底部
这三个不会因为 位置的改变而改变
-->
- 表单
用户名<input type="text" name="hello"/ value="我是value"> <br/>
自我介绍<textarea name="info"></textarea>
<input type="button" value="按钮" />
<input type="reset" value="重置按钮" />
<input type="submit" value="注册"/>
性别<input type="radio" name="gender" value="male" checked="checked" id="nan"/> <label for="nan">男</label>
爱好<input type="checkbox" name="hobby" value="zq" />足球
下拉选项栏
<select name="star" multiple="multiple">
<optgroup label="一线明星">
<option value="lzx">罗志祥</option>
<option value="dzq" selected="selected">邓紫棋</option>
</optgroup>
<optgroup label="二线明星">
</optgroup>
</select>
版权声明：本文为weixin_45911886原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。