HTML与CSS
知识体系简介
html(主要学页面结构)
css(主要学样式布局)
JS(主要学基本语法)
Jquery(主要学AJax)
浏览器的种类
主浏览器(遵从行业标准,w3c,行业规范,支持网页开发相关技术)
浏览器举例:
chrome(webkit)
safari
火狐
opera
IE(9-11,edge)
非主浏览器
浏览器举例:
遨游
猎豹
QQ
搜狗
360(IE内核,webkit内核,双内核浏览器)
百度
快捷键简介
command + N 是新建文件
command + S 是保存文件
command + / 是注释
command + shift + p 启动插件入口
HTML简介
什么叫html?
html是超级文本标记语言
什么是html5.0?
万维网的核心语言,标准通用标记语言下的一个应用超文本标记语言(html)的第五次重大修改,2014年14月29日,
万维网联盟宣布,经过接近8年的艰苦努力,该标准规范终于制定完成
标记的特点:要闭合 大小写不敏感 有属性 有块级与行级标签之分
块级元素可以设置大小,行级元素不行,块级元素(div)会单独占一行,行内元素(span)不会占用一行,只会占用自身大小的空间
标记语法:
单标记语法<标记名 属性名="属性值"/>
双标记语法<前标记名 属性名="属性值">内容后标记名>
html模板
1:版本控制
2:html文档区域
3:文档包含头部(head)和身体(body)
4:头部包含编码格式(meta utf-8)和标题(title)
文本格式必须由html为后缀,老版本中htm也可以为后缀
CSS简介
CSS 层叠样式表
层叠样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样
式的计算机语言,CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化
CSS能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式
编辑的能力
css语法:
样式名称:样式值;
样式:
边界:
border:给当前标记设置边界(默认上下左右)
border-left:给当前标记设置左边界
border-right: 给当前标记设置右边界
border-top: 给当前标记设置上边界
border-bottom:给当前设置下边界
border-width: 给当前标记设置边界出息 ex:1px
border-color: 给当前标记设置边界颜色 ex:red
border-style: 给当前标记设置边界的类型 ex:dotted
solid 实线
dotted 点状线
dashed 虚线
写法举例:
border:border-width border-color border-style
基础选择器介绍
标签选择器
标签选择器 根据标签名称对标签中的内容进行装饰
优点:不需要给标签起名称(打标记),保证标签的纯净性
缺点:样式影响面太广,容易干扰其他标签
书写:
tag{}
代码举例
<html>
<head>
<meta charset="utf-8" />
<title>选择器title>
<style>
div{
border: 1px red solid;
}
style>
head>
<body>
<div>我是div1div>
<div>我是div2div>
<span>我是span1span>
<span>我是span2span>
body>
html>
类选择器
书写:
.class名称{}
一个标记可以起多个class名,建议不超过7个
优点:可以减少代码冗余,可以把相同样式的标记总结在一起
缺点:会稍微的破坏html结构,html一般要求不能重名
代码示例
<html>
<head>
<style>
.hongse{
border: 1px red dotted;
}
.one{
border: 2px red solid;
}
.two{
border: 1px red solid;
}
.lanse{
border: 1px blue dotted;
}
style>
head>
<body>
<div class="hongse one tow">我是div1div> // 当有多个class名的时候 以最后一个名字为准
<div class="hongse">我是div2div>
<div class="lanse">我是div3div>
<div class="hongse">我是div4div>
body>
html>
id选择器
格式:
#id名称{}
特点:唯一性
优点:可以逐个控制标记,样式之间不影响
缺点:唯一性,冗余代码多
使用场景:JS钩子
代码示例
<!DICTYPE html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<title>id选择器title>
<style>
#liubei{
border:3px red solid;
}
#zhangfei{
border:10px black dashed;
}
#guanyu{
border:6px gold dotted;
}
style>
head>
<body>
<div id="liubei">我是div1div>
<div id="zhangfei">我是div2div>
index.html
需求:
所有的div都需要3px red solid,但是第三个div,要求颜色是蓝色的
<!DOCTORY html> // 网页的文档类型
<html lang="en"> // 这句话可以要也可以不要 向搜索引擎表示该页面是html语言,并且语言为英文网站
// 其"lang"的意思就是"language",语言的意思,而"en"则表示为english
<head>
<meta charset="utf-8"> // 文本编码方式 国际上的标准编码 gb2312是按中国的编码方式
<title>文本样式title> // 网页名字
<link rel="stylesheet" href="index.css"/>
head>
<body>
<div>
我是div
div>
body>
html>
index.css
div{
border: 1px red solidl;
width: 400px;
height: 400px;
color: yellow;
text-align: center;
font-size: 40px;
text-decoration : underline;
}
样式-尺寸设置
适用于块级标签(div) 不支持行级标签(span)
index.html
<html lang="en">
<head>
<meta charset="utf-8">
<title>Documenttitle>
<link rel="stylesheet" href="index.css"/>
head>
<body>
<div>我是divdiv>
body>
html>
index.css
div{
border:1px black solid;
width: 200px
height: 200px
}
