html、css学习笔记
2019-05-28 19:08
176 查看
一、web前端标准
1.html结构标准 2.css样式标准 3.js行为标准
二、五大浏览器厂商
1.IE 2.谷歌 3.火狐 4.苹果 5.欧朋 注意:其他浏览器都用别人浏览器技术,只是更换了皮肤
三、html定义
- 超文本标记语言
四、第一个html页面
- < !DOCTYPE html>描述当前文件的版本信息,如果没有详细说明就是5.0版本
- < html> html文件
- < head> 网页的头部
- < meta charset=“utf-8”>国际编码,如果不写或写其他都会有问题
- < title>此处内容网页标题< /title>
- < body>我们自己写的所有带哪都在这里< /body>
注意: html文档不能正常识别回车和换行,只能使用特定代码来实现;**标签、标记、节点、元素都是尖括号 <>。
五、标签语义化
- 在合适的地方使用合适的标签
为什么要标签语义化:因为浏览器只识别标签
标签语义化的好处:可以让搜索引擎
六、h和p标签
- h有1~6个,一次变小,代表标题
- p代表文章
七、biu和小伙伴
- b代表加粗
- strong也代表加粗,多了强调语义
- u代表下划线
- i代表倾斜
- em也代表倾斜,多了强调语义
- s代表删除线
- del代表删除线,建议使用del代表;
注意: strong代表特别强调,一篇文章不要出现多次,em代表一般强调,可以出现多次
< br/>单标签代表一个换行回车
八、img图片标签
- img是一个单标签
< img src=“图片名字” width=“宽度” height=“高度” alt=“1.图片未加载的提示文字2.网页阅读器可以读取这里的文字” title=“鼠标悬停时的提示文字”/>
注意: 属性名=“属性值”
空格不能丢,符号都要使用,英文状态下,属性设置不分先后
宽高设置其中一个,另一个就等笔缩放
九、路径
- 相对路径
- 绝对路径
十、链接
- < a href=“地址”>文字< /a>
注意: 如果要跳转线上地址,必须加http://本地连接直接写路径
空链接写法:1.###;2.javascript;3.javascript:void(0);
锚点链接:点击之后可以跳转到页面的对应位置;给想跳转到的位置写一个id属性,a标签中的href属性写#id的值
十一、表单
- 所有用户输入的内容都要放在form标签中
- action 代表数据给哪个后台程序
- method 代表传输数据的方法:1.post(加密)2.get(不加密)
<form action="" method=""> 昵称:<input="text" name="a1" id="a2" placeholder="请输入用户名" autofocus="autofocus" ><br/> 密码:<input type="password" /><br /> 性别:<input type="radio" name="sex" id="nan" checked="checked"/><label for="nan">男</label> <input type="radio" name="sex" id="nv" /><label for="nv">女</label> <input type="radio" name="sex" id="mi" /><label for="baomi">保密</label> <br /> 地址: <select name=""> <option >哈哈</option> <option >嘎嘎</option> <option >呵呵</option> <option selected="selected">嘿嘿</option> </select> <select name=""> <optgroup label="北京"> <option>海淀</option> <option>昌平</option> <option>顺义</option> <option>朝阳</option> </optgroup> <optgroup label="深圳"> <option>罗湖区</option> <option>福田区</option> <option selected="selected">宝山区</option> </optgroup> </select><br /> 介绍: <textarea rows="10" cols="10" placeholder="请输入文字"></textarea><br /> 你的爱好是: <input type="checkbox" id="cs" checked="checked"/><label for="cs">测试</label> <input type="checkbox" id="cf"/><label for="cf">吃饭</label> <input type="checkbox" id="sj"/><label for="sj">睡觉</label><br /> <input type="submit" value="提交" /> <input type="reset" value="重置" /> <input type="button" value="按钮" /> <button type="button">按钮</button> </form>
input 代表输入框标签
type 类型决定输入框类型
1.type=“text” 代表普通输入框
2.type="password"代表密码输入框
- name属性 代表这个输入框的名字
- id 代表输入框的编号
- value 代表默认输入框(不符合用户体验,应换placeholder)
注意: placeholder属性ie低版本不兼容,但是我们实际工作中还要使用。因为渐强(随着浏览器版本的提升,效果越来越好),优雅降级(在高版本浏览器显示效果好的前提下,保证了低版本浏览器不错乱)
浏览器–F12–仿真–文档模式
一、单选按钮
- Type=”radio”
注意:如果想让文字点击能切换,要加label标签,并且设置for属性和对应的单选按钮id属性值一致;必须给这一组单选按钮添加name值,才可以实现单选效果;
/设置默认选中状态,要给单选按钮添加checked="checked"; <input type="radio" name="sex" id="nan" checked="checked"/><label for="nan">男</label>
二、下拉菜单
- Select 和 option 的组合;
注意:如果想设置多组下拉框菜单,需要添加一个optgroup标签,并设置label属性作为提示文字;如果想设置默认选中状态,需要给对应的option 添加selected属性;
三、文本域
- textarea标签来设置多行文字(文本域);
注意:不能使用cols、rows来设置宽高,要用width、height来设置;它可以使用placeholder来设置默认文字
四、多选框(复选框)
- 它的使用方法和细节与单选框一致;
五、按钮
- 1.提交按钮type=”submit”
注意:必须设置value属性,否则浏览器之间有兼容性问题; - 2.提交按钮type=”reset”
注意:必须设置value属性,否则浏览器之间有兼容性问题;恢复刷新后的默认状态 - 3.type=”button”或都可以
用户体验细节:刷新后想让第一个输入框默认选中状态,给输入框设置autofocus=”autofocus”属性;
六、CSS
- Css:样式表、级联样式表、层叠样式表
七、css基础语法
- css代码写在style标签里面,放在head标签中;大括号中写键值对语法
例子:属性名1:属性值1;属性名2:属性值2;
Color:文字颜色
font-family:字体
font-size:字号
text-indent:首行缩进 单位是em代表一个文字的间距
text-align:文字对齐方式,默认是left,还可以设置center居中,right居右
Background:背景颜色属性
八、标签选择器
- 直接在css语法中写标签的名字就可以选中对应的标签;
Div 代表大盒子(容器 存放内容的)
Span 代表小盒子 (容器 存放内容的)
九、id和class选择器
- 1.id选择器语法:#名字 特点:不能重复,也不能一个人拥有多个
- 2.class类选择器语法:.名字 特点:可以重复使用,一个人可以有多个类名(好像是人的称号一样)
总结:今后class类选择器使用频率高于id选择器;
十一、css的引入方式
- 1.内嵌式:
style标签放在head中
优点:方便课上案例的书写:电商网站的首页必须使用这种方式,因为电商首页要求加载速度必须快,内嵌式比外链式快一些;
缺点:html和css代码没有实现分离,不方便修改; - 2.外链式:
通过link放在head标签中,把外部的css文件引入到html文件中
优点:实现代码分离,方便修改和管理;
缺点:运行速度比内嵌慢 - 3.行内式:
这种形式一定不要用,它会让代码量变得非常庞大,不方便修改
十二、基础选择器权重
- Id>class>标签
一、后代选择器
- Div span 用空格来连接,代表的意思是找到后代元素
注意:后代可以是儿子、儿子的儿子…
二、并集、并列选择器
- Div,span,h1,.span1,#span2
用逗号连接选择器,代表元素同时被选中
三、标签指定式、指定标签式
- Div.类名
注意:标签和类名之间没有空格
四、高级权重对比
- 1.引入方式对比:
外链和内嵌权重相同,先写的会被后写的覆盖
内嵌权重最大,如果想覆盖它,就只能给样式添加!important来把权重提高 - 2.复合选择器权重
id是100斤
class类名是10斤
标签是1斤 - 综合起来大的权重就高,如果权重一样,先写的被后写的覆盖
五、css常用属性
- Font—weight 设置字体粗细 normal 代表不加粗 bold代表加粗
Font—style 设置字体倾斜 italic 代表倾斜 normal 代表不倾斜
ext-decoration 设置线 none 无线 underline 下划线 overline 上划线
line-through 贯穿线(删除线)
Word-break:break-all 强制换行
:hover 伪类写法 代表鼠标悬停状态的样式
六、行高属性
- 一行文字的结束到上一行文字结束的间距:line-height
七、边框属性
div{ width: 200px; height: 200px; background: pink; /* border: 10px solid green; */ border-bottom: 1px solid aqua; border-top: 5px solid aquamarine; border-left: 10px dashed black;border-right: 15px dashed chocolate;}
- border:1px solid red;
粗细 实线 颜色
虚线:dashed 这样设置是四个方向相同;
如果想单独设置某个方向只需要:border-left(right、top、bottom)
注意:边框属性只有实线和虚线是没有兼容性问题的,其他方式的线都会有不同程度的兼容问题,如果程序员使用了,一定要报错!
八、css盒子模型的组成
- 宽高+边框+内边距(内容和边框的距离)+外边距(盒子和盒子之间的距离)=盒子模型的组成
九、html5新标签
- head 头部
- nav 导航
- aside 侧导航
- article 文章块
- footer 底部
注意:这些html5新标签只能使用在手机网站的书写,可以提升搜索引擎对网站的优化,不能用在PC(电脑)端网站,因为ie低版本不识别这些新标签。
相关文章推荐
- HTML入门学习笔记--CSS 3D转换模块和背景相关(12)
- 快速学习html、css的经典笔记
- HTML+CSS+JavaScript+JQuery+JSP学习笔记
- HTML&CSS基础学习笔记6-文本操作标签
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第32讲_构造函数_成员函数详解_学习笔记_源代码图解_PPT文档整理
- HTML/CSS学习笔记
- html css学习笔记-过渡,动画
- 七海的html和css学习笔记(七)
- HTML&CSS基础学习笔记3-HTML的标签语法
- 在慕课上学习的,HTML和CSS基础学习笔记6
- 【JAVAWEB学习笔记】02_HTML&CSS
- 学习HTML+CSS的第四课笔记!
- HTML&CSS基础学习笔记1.17-表格的头部与尾部
- [HeadFist-HTMLCSS学习笔记][第七章CSS入门:加一点样式]
- [HeadFirst-HTMLCSS学习笔记][第十三章表格]
- HTML&CSS基础学习笔记1.12-无序列表
- Head first HTML&CSS ---[学习笔记第二章]
- HTML入门学习笔记--CSS过渡模块(9)
- 在慕课上学习的,HTML和CSS基础学习笔记1
- HTML&CSS基础学习笔记1.25-input标签的选择文件和隐藏元素