HTML+css 个人学习笔记

来源：互联网发布：华为软件公司编辑：程序博客网时间：2024/05/17 22:55

各位大神不喜勿喷个人总结请勿转载谢谢

HTML了解:

==========
10 = 4（html+css）+ 2（js） +4（jq） html+css
一、web前端技术/web前端标准 Web前端技术是由W3C组织指定的一系列技术的集合，主要包括： html — 结构标准 — 作用:负责网页的内容 Css — 样式标准/表现标准 — 作用：美化页面 JavaScript，简称js — 行为标准 — 作用：控制页面的行为和动作确定就是一定先学html html：超文本标记语言
二、html发展历史 html1.0 — 93年起草一个草案（纯文本格式） — 报纸 html2.0 Html3.0 html4.0 — 意识到问题：语法松散Aa，研发一个新版本解决问题：xhtml1.0 — 严格（相对严格）型的html — 问题：不好调节兼容性 — 可不可以研发一个特别严格的版本（xhtml2.0）解决兼容性问题（浏览器厂商和开发人员） html5.0（浏览器厂商提出构想） — w3c研发总结：xhtml1.0和html5.0混合开发
三、编辑器 Dw sublime webstrom hbuilder vscode（*）
四、网页基本结构 Html — 整个网页 Head — 存放所有给浏览器看的代码（css） Body — 存放所有给用户看的代码 title — 网页标题
五、DOCTYPE 作用：文档dtd格式：规定浏览器到底以哪个版本的html语言解析所有代码（兼容性）
HTML必知必会:
==========
!+tab 会弹出html默认格式
ctrl+/ 备注
<head>内是给浏览器看的
<body>是个用户看的
<title>网页标题名称
HTML
==========
1. 页面布局标签(换行):<div></div> #在页面布局的时候使用,可以达到换行的效果,布局分快用.
2. 页面布局标签(不换行):<span></span> #页面布局的时候使用,可以达到不换行的结果. 还可以存放带有特殊字符的文字和小图片
3. 标题:<h1>到<h6> 标题
4. 段落标签:<p></p> #段落标签是换行的标签,并且文字没有任何附加效果,仅仅是个文字.
5. 字体显示内容:
<b>加粗</b>;
<i>倾斜</i>
<u>下划线</u>
<s>删除线</s>
#带字母优先索取
<strong>strong</strong>
<em>em</em>
<ins>insins</ins>
<del>deldel</del>
<img src="icon3.jpg" title="凤姐" alt="这是凤姐">
img 必须要配合src键值(属性)对才能加载图片{name:python} html键值对 k = “v”
title的作用：1、提示用户；2、seo搜索关键字
alt的作用：1、应急：图片无法显示加载alt文字；2、支持盲人读屏软件
图片后缀：jpg、png（支持背景透明）、gif（支持动画）、psd（网页源文件、分层）
6. 超链接:
<a href="http://www.baidu.com"> 想让什么内容能点跳转页面，就放到这里 </a>
<a href="03 常用小标签.html" target="_blank">跳转到本地03</a>
<br>

<a href="#">我的淘宝</a>
<a href="##">我的淘宝2</a>
<a href="###">我的淘宝3</a>

7.符号
我是一         句话，没有任何含义，只是测试符号

<#小于号 >#大于号

8.列表
创建无序列表: <ul>
<li>列表内容1</li>
<li>列表内容2</li>
</ul>
创建有序列表: <ol>
<li>列表内容1</li>
<li>列表内容2</li>
</ol>
创建自定义列表:<dl>
<dt>项目标题</dt>
<dd>项目内容</dd>
# <dt>后面可以无数个<dd> 但是<dt>后面必须跟<dd>
</dl>
9.表单 # 制作登录注册和是搜索内容使用
1. 所有表单内容都在<form action="" method=""></form>中使用 #叫做为表单域里面的功能标签称之为表单控件
# action 填写服务器属性使用
# method属性只有这两个 get不加密发送 post加密发送
2. 文本框:<input type="text" placeholder=""> #text文本框类型 placeholder是文本框中的默认值可以是value但是推荐placeholder
3. 密码框:<input type="password"> #password密码框类型
4. 单选框:<input type="radio" name="sex" checked="checked" id="nan"><label for="nan">单选内容</label> <input type="radio" name="sex" id="nv"><label for="nv">单选内容</label>
# radio单选属性
1)name解释分类的意思取相同值一类属性取其一就是单选属性
2)checked表示单选默认选中也可以只写checked不用写后面的内容
3)<label for="内容1">单选内容</label> for内容要跟 <input>中的id相同表示扩大触发范围 #通俗理解点文字也触发
5. 复选框(多选框):
复选框:<input type="checkbox" checked>复选内容 <input type="checkbox">复选内容 <input type="checkbox">复选内容 #checkbox复选属性 checked还是默认选中如果想扩大触发区域同上
6. 上传文件<input type="file"> #file上传文件属性
7. 下拉菜单:
<select>
<option>内容</option>
<option>内容</option>
<option selected="selected">内容</option>
</select>
# selected 也可以后面的值不输入
8. 文本域:
<style>
textarea{resize: none;
width: 设置宽度;
height: 设置高度;
}
</style>
<textarea></textarea>

#默认<textarea></textarea>可以无限拖不推荐使用
#通过外面设置css 设置大小 resize: none就是不可拖动文本域
9. 按钮 #所有的按钮要想实现必须保重from表单域的前提下
<input type="submit" value="注册"> #默认是提交按钮 value修改默认值
<input type="button" value="注册"> #默认为空按钮后期设置按钮作用 value修改默认值
<input type="reset"> #默认重置按钮
10. 表格 (表格布局:多是数据统计使用工作很少用到了解即可)
从2005年批量改版从表格变成 div
表格:读取完所有代码才会显示页面效果 #等待时间长
div: 读取一行显示一行效果 #等待时间短
表格结构:<table><tr><td></td></tr></table> # table是整个表格 tr是行 td是单元格(真正书写内容的地方)
若果想要显示表格在table里面输入属性:<table border="1" width="**" .....></table> #可以在css里面设置不加单位如果不加大小就是文字大小
1 加cellpadding='20'; 等于 padding="20px";
2 加cellspacing="50"; 等于 margin="50px";
还有更多表格使用方法详情见第四天视频或者面向百度多了解

完结

css引用:
==========
css所有的设置都在<style></style>
1. 常用文字的控制属性
例子
<style>
p{
#颜色
color:blue;
#字体大小
font-size: 30px;
#字体是否倾斜
/*font-style: italic; 倾斜*/
font-style: normal;
/*默认不倾斜*/
#字体划线位置
/*text-decoration: underline; 下划线 */
/*text-decoration: line-through; 删除线 */
/*text-decoration: overline; 上划线 */
text-decoration: none;
/*没有划线*/
#字体是否加粗
/*font-weight: bold; 字体加粗 */
font-weight: normal;
/*字体不加粗*/
#空行
text-indent: 2em;
/*空行 2em的意思就是不管什么格式的字都是空两个格子*/
#行间距
line-height: 100px;
/*行间距*/
#字体
font-family: '宋体'
/*字体*/
}
</style>

</style>
2. 内联式: #就在style里面的设置


<style>
标签{
/* 键值对：k:v; */
color:red;
font-size: 20px;
}
</style>
3. 行内式: # 在div身上添加style属性 k=“v”
<div style="color:red; font-size:20px;">我是div</div>

4. 外链式: # 新建一个css文件在html用 <link rel="stylesheet" href="路径">接收在style里面使用
5. 布局属性
例子
<style>
div{
width: 200px; 也可以100% 就表示浏览器背景配合透明度使用
/*布局背景宽*/
height: 300px; 也可以100% 就表示浏览器背景配合透明度使用
/*布局背景高*/
background: green;
/*背景颜色*/
/*border:粗细颜色线条样式; 三个值不分先后顺序布局背景边框各式*/
/*border: 5px red solid; 实线*/
/*border: 5px red dashed;虚线*/
border: 5px red dotted;
/*点线*/
}
6. 盒子的内间距: padding
设置内间距: padding:**px;
设置顶部距离: padding-top:**px;
设置右侧距离: padding-right:**px;
设置底部距离: padding-bottom:**px;
设置左侧距离: padding-left:**px;
设置四面八方距离: padding:**px **px **px **px; #三个值: 上左右下两个值: 上下左右;
上右下左
7. 盒子的外间距: margin
设置外间距:margin:**px;
设置顶部距离:margin-top:**px;
设置右部距离:margin-right:**px;
设置底部距离:margin-bottom:**px;
设置左部距离:margin-left:**px;
设置四面八方距离: margin:**px **px **px **px; #三个值: 上左右下两个值: 上下左右; 同padding
8.盒子的移动:left:**px; right:**px; top:**px; bottom:**px; 也可以是％多少常用适合各种浏览器
8.版心居中: margin:* auto;
9.设置内容超出父级隐藏(设置外间距时不影响父级位置和尺寸): overflow:hidden #放到父级中
10.路径写法:
1).当前文件所在位置包含的文件夹中--->>-: ./文件夹/文件
2).上一级位置所在文件夹中----------->>-: ../文件夹/文件
3).多级位置所在文件夹中------------->>-: ../../../文件夹/文件
11. 设置内容
设置内容水平居中: text-align: center;
设置内容水平左对齐:text-align: left;
设置内容水平右对齐:text-align: right;
设置内容垂直居中: line-height:自身身高;

选择器
----------
1).类选择器:**工作基本都是用
1.在css中创建类选择器:.选择器名字{color:red} # div叫做标签选择器：以标签名称命名的选择器
2. 设置对应要被修改的标签: <div class="类选择器名字><div>
2)id选择器:**一个id名在页面中只能使用一次,一般不常用
1. 在css引用中创建ID选择器: #ID选择器名字{color:red}
2. 设置对应要被修改的标签: <div id="ID选择器名字"><div>
3)后代选择器(层级选择器):
标签标签{color: red}
4)组选择器(并集选择器):
标签,标签,标签,标签...{color:red}
5)指定标签选择器:
标签.类{color:red}
6)伪元素选择器:
1.元素的开头添加内容:元素::before{content:"内容"}
2.元素的结尾添加内容:元素::after{content:"内容"}

元素类型
----------
1)div 换行:块级:写width和height生效: 不写width就是父级的100％
display: inline;
#转换成内联/行内
2)span 不换行:内联/行内; 写width和height的时候不生效尺寸跟内容一样大
display: block;
#转成块级
3) display: inline-block;
# 行内/内联块
同一行还显示宽高
4) display: none;
#隐藏
visibulity: hidden;
#站位隐藏

浮动
---------
1. 设置浮动:
标准流/文档流:标签默认的元素类型
float : none left reght
1)none不浮动
2)left移动到父级的最左边
3)reght移动到父级的最右边
浏览器认为:浮动后的标签自在占用标准流的位置
*如果想多个共存都需要加float 所以说float不单独出现
浮动具备了inline-block的特点或者说变成了inline-block 两种观点
2. 清除浮动: 就是清除浮动的影响
1)overflow: hidden; #检查的作用
2)额外标签法
html添加<div class="clearfix"></div>
css添加.clearfix{clear: both;} 也可以为left 或者reght但是 both意思就是清除所有浮动问题他们两个是清楚左浮动或者右浮动
3)伪元素办法清除
html 在父级属性添加clearfix
css添加.clearfix::after{
content: "";
display: block;
clear: both;
height: 0;
visibulity: hidden;
zoom:1; #解决ie6 不认识的元素 ie6 不认识伪元素

} #after子级的结尾添加一个小便签 after和before默认是内联

定位 #可以让图片标签去任何位置包括覆盖别的内容
----------
1. 相对定位:
css设置 position:relative; #相对定位添加偏移量属性才可以移动定位偏移量属性就是英文位置方向
left:**px; reght:**px; top:**px; bottom:**px;
特点 1)改变位置的参照物是他自己
2)无法改变标签的元素类型
3)占位脱离标准流
2. 绝对定位:
css设置 position:absolute; # 绝对定位添加偏移量属性才可以移动定位偏移量属性就是英文位置方向
特点
1) 改变元素具备内联块特点
2) 完全脱离标准流
3) 参照物默认是浏览器
4) 不占位
3. 固定定位: 永远固定在屏幕所定位的位置
css设置 position:fixed; #固定定位
特点
1) 改变元素具备内联块特点
2) 不占位
3) 参照物永远是浏览器
4) 完全脱离标准流
5) 具备内联块特点
4. 定位使用:
border-radius: **px; #制作圆角
border-radius: 50%; #正圆可以大但是不会变还是正圆
改变绝对定位的参照物满足条件以最近的已经定位的父级作为参照物
在父级加 position:relative; #相对定位
z-index: **;
取值为整数取值越大显示越靠上小的话可能被覆盖
工作中多用子绝父相 90%使用不是100%

background属性高级使用
----------
background 也是一个复合型属性取值不分先后顺序背景图定位永远在一起 xy不能分开先x后y
背景图
background: red url(图片路径) #默认平铺
background: red url(图片路径) repeat #平铺
background: red url(图片路径) no-repeat #不平铺只剩一个
background: red url(图片路径) repeat-x #横铺
background: red url(图片路径) repeat-y #纵铺
background: red url(图片路径) no-repeat **px **px; 第一个值是x轴位置 y轴位置
background: red url(图片路径) no-repeat 0/left/reght/center *px;
background: red url(图片路径) no-repeat **px 0/bottom/conter; #center 居中先x后y
background: red url(图片路径) no-repeat **px; # 如果只有一个值代表x y为居中
背景图固定
background: red url(图片路径) no-repeat fixed;
或者 background-attachment: fixed;
效果就是背景一直在不动
背景透明
backgroud: rgb(0,0,0); 也可以这么输入三原色写法. #000表示黑色可以配合ps的值使用
backgroud: rgba(0,0,0,0.5); a的值就是透明度后面值加一个小数

css属性的特点:
----------
层叠性和继承性
1)层叠性(覆盖性):
1.同级选择器后面覆盖前面
2)继承性:
2.有父级继承父级控制文字的css属性(不继承别的属性如height,weight,注意background也不继承如有背景颜色是父级的背景不是继承)

选择器权重(选择器优先级)
----------
当一个标签好多选择器使用冲突的时候,到底生效谁的问题.
如果同级顺序靠后生效
1.如果父级跟子级都有属性自己有属性就显示自己的属性
2.如果父子级有类属性级跟子级都有选择器属性子级有类选择器属性就显示自己的类选择器属性
3.如果父子级有类属性级跟子级都有选择器属性子级有类选择器属性也有id选择器就显示id选择器属性
引入方式: 外链==内联看谁书写靠后谁生效行内式是所以选择器里面最高的(因为针对性高)
(外链/内联)选择器的优先级: 标签 < 类(伪元素)< id < 父子级如类加标签(div .son) < 父子级如类加类(.father .son)
*如果想要任意一个显示属性在属性后面加!important 如p{color: red!important;} #他是优先级最最最高

css雪碧 (css精灵或css sprite)
----------
核心技术:background灵活运用:
css删除项目符号 ol,li{list-style: none;}
就是用bcakground: url="图片地址" x y; #就是用 x y 更改图片位置原理用background 就是改变背景图位置

完结

阅读全文

0 0