Html和Css
HTML
1.html超文本标记语言
2.html5是html最新版本
3.<>尖括弧包含的叫标签/元素
4.html标签分类
1.文字标签
-标题标签
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
-段落标签
<p></p>
-文字加粗（粗体）
<b></d> <strong></strong>
-文字斜体
<i></i> <em></em>
-字体颜色/大小
<font size=”” color=””></font>
size字体大小 color颜色
-普通文字标签
<span></span>
style样式
语义化标签：标签本身能代表其含义strong,em,h1-h6,p,img,div,a
非语义化标签：标签本身不能代表其含义b,i,span,u,s,del
2.图片标签
<img src=”图片的路径” title=”图片标题” alt=“图片加载失败”>
src是img必须属性，写img标签必须写src.
src是连接图片路径/地址
title是图片标题或介绍，也是爬虫获取图片信息的途径
alt图片加载失败显示，正常不显示，当网络不好或路径错误，就显示图片加载失败
5.web标准：html是结构，css是表现，js是行为
web标准是w3c组织定义的
www万维网联盟
6.<meta charset="UTF-8" />解决乱码
char 字符 set 设置 UTF-8万国码
7.html里面都是标签
8.用<>尖括弧包含的叫标签，分单标签和双标签
单标签是只有开始标签，没有结束标签<img src=””>
img br hr input meta
双标签是有开始标签，也有结束标签<p></p>
- 标签属性
align位置 align=”left/right/center’’默认left
- 注释信息：将代码隐藏，页面中不显示，源代码显示<!-- --> 快捷键：ctrl+/
- <br>换行 <hr>分割线
- width宽度 size大小 线的粗细 color 颜色
- 中线/删除线标签<strike></strike> <s></s> <del></del>
- 下划线标签 <u></u>
- 超链接标签<a href=””></a>
<a href=”” target=”_self”></a>
默认当前页面打开_self self当前页
新页面打开_blank blank空白页
target 用来定义链接打开的目标窗口
- url统一资源定位符,地址，路径http://www.baidu.com url四部分组成： 协议名http://主机名www.baidu.com 文件夹名th 文件名index.html
- http://超文本传输协议 跳转在线网必须写http
- 无序列表ul unordered list 带点
- 有序列表ol orderde list 带序号
- 表格table 表格标题 caption
行 tr table包含tr 表格有多行
列td tr包含td 一行有多列
th是字体加粗效果，一般表头需要写
1.表格属性
width宽度
height高度
line-height：行高 值与高相等垂直居中
border边框
cellspacing内外边框空隙
cellpadding内容到内边框距离
padding内边距
- bgcolor纯色背景
background=”img/1000.jpeg”背景图
bordercolor边框颜色
- 合并单元格
同一行就是合并列（横着合并列）rowspan
同一列就是合并行（竖着合并行）colspan
- 表单form包含着所有的表单元素
<form action=”index.html”></form>
action=”提交表单的路径/地址”
实现表单提交
①<form action=”index.html”></form>
②提交按钮submit
- 表单元素
1.输入框/文本框 <input type=”text”/>
type类型 text文本
搜索框<input type=“search”>
表单属性
①提示信息placeholder=“请输入用户名”
②值 value=“”输入框内输入的内容
③最大字符限制maxlength=“4” 4个数
④禁用disabled=“disabled”
⑤只读readonly=”readonly”
⑥必填项required=“required”不填写不能提交
⑦name获取表单数据
2.密码框password <input type=”password”/>
3.单选按钮radio
<label>
<input type="radio" name="sex">男
</label>
label包上单选/多选按钮和文字，点击文字触发按钮
单选按钮事先多选一，设置同一个name值
默认选中checked=“checked”
4.复选框 多选框checkbox
<input type="checkbox">
默认选中checked=“checked”
5.上传文件/头像file
<input type="file" />
6.下拉框select
一个select多个option（选项）
默认选中selected
multiple="multiple”多项展示
7.多行文本 文本域 textarea
rows是控制高度，字行数
cols是一行多少字，宽度
（8）按钮
提交按钮
<input type="submit" />
<button type="submit">提交</button>
重置按钮
<input type="reset" />
<button type="reset">重置</button>
普通按钮
<input type="button" value="确定" />
<button type="button">确定</button>
图片按钮
<input type=”image” src=”图片路径”
按钮属性
①隐藏hidden=“hidden”
②值 value=“”
③name 获取按钮信息
- 行标签和块标签
块标签带display:block
行标签 不带
行标签和块标签区别？有不同点也有共同点
行标签：不独占一行，设置宽高无效，继承父级属性
块标签：独占一行，设置宽高有效，继承父级属性
块标签/元素：h1-h6,p,div,ul,ol,dl,form
行标签：a,b,strong,i,em,span,del,s,u
内联块级（行内块）：img,table,input（带display:inline-block属性）
内联块级：不独占一行,可以设置宽高,继承父级属性
空元素：没有特殊意义又是独立标签meta,br,hr
单标签：img,input,meta,br,hr
<p>不可以嵌套块标签
h标签也不能嵌套h标签或块标签
<!DOCTYPE html>html5声明方式
现在使用的页面都是html5
DOC全称document文档
type类型html超文本标记语言
网页宽度1200px
width宽度
height高度
line-height：行高 值与高相等垂直居中
<meta name="keywords" content="关键词"/>
<meta name="description" content="描述"/>
CSS
1.css有几种引入方式，也就是如何与html进行关联
1.行内引入方式
<div style=” font-size:12px;color:red;”>元素</div>
①主要能改变当前元素
②选择器控制当前的元素
缺点：不可维护
优点：优先级比较高
2.head style
缺点：仅限当前页面，其他页面用不到
优点：写demo直接写，一个网站首页的样式单独拿出来
3.link
在html文档的head部分加入：
<link rel=”styleesheet” href=”index.cs”/>
rel表明连接的文件与html文档之间的关系
type是表明文件类型
href指向链接的css文件
后期使用频率最高，或者说以后大多数都用这种方式
一个css文件可以被无数页面引用，复用性高
4.使用@import引入css文件
通常使用这个时候有以下两种情况：
1.在head里使用的时候：
<style type="text/css">
@import url(my.css);
</style>
2.在css文件里使用。（备注：@import本身是一个css命令。）
【1.head里面的style 2.标签/元素内的style 3.link 4.css命令@import url（“test.css”）】
二、css选择器
1、标签或元素style
2、id 选择器
<div id="ccc">盒子</div>
<div id="ddd">盒子</div>
#ccc {border:1px solid red;}
id 的名字一个页面只能有一个
不用它写样式
多数情况与js 配合使用
3、class 选择器 类选择器
<div class="header border aa"></div>
<div class="border"></div>
.header{ width:100px;}
.border{ border:1px solid red;}
.aa{}
4、标签名选择器
div {}
p {}
ul {}
5、后代码选择器
<ul class="list"><li></li></ul>
<ol class="list"><li></li></ol>
<div class="list"><ul><li></li></ul></div>
.list li{}
div.list li {}
ul li {}
6、群组选择
div,p,span,a{border:1px solid red;}
.list li,div p,p,.test{ border:1px solid red; }
.list li{bd}
div p{bd}
p{bd}
.test{bd}
优先级
1、style 1000
2、id 100
3、class 10
4、标签 1
<p class="p"></p>
p{border:1px solid red;}
优先级是1
p.p{border:1px solid blue;}
优先级是10+1
div p {} 2
div .p {} 11
三、命令
1、文档结构
2、标签的使用
<div></div>
<img src=“” alt=“”/>
3、css 引入方式
4、选择器
优先级
使用 class=“a b c”
.list ul.list 10 11
标签 群组 class id 后代 style
5、设置
①字体设置
字体颜色color:red; yellow white green;black;pink;pink;
字体颜色color:#ffffff; ff ff ff ;#000000;#fff;ff6600 #f60
字体大小font-size:12px; em
字体类型font-family: Arial sans-serif;
字体类型font-family:”微软雅黑”;
字体加粗font-weight:bold
字体正常font-weight:normal
斜体font-style:italic
正常font-style:normal
字体加下划线text-decoration:underline
去掉下划线text-decoration:none
删除线/中线text-decoration:line-through
行高/垂直居中line-height:30px
②文本设置
文本居中text-align: left/left right center三个值左右中
vertical-align:top middle bottom 三个值 垂直上中下
首行缩进text-indent:2em; 2个字的距离
尺寸width:100px;height:100px;
③背景设置
背景颜色：background-color:red;
背景图片:background-image:url(image/a.png);
背景图片位置：background-position:left top; 0 0
left center right top middle bottom top center bottom;
background-position:right bottom;background-position:30px 15px;
背景图片不重复/重复/沿x轴重复/沿y轴重复：background-repeat:no-repeat/repeat/repeat-x/repeat-y
固定背景图片：background-attachment:scroll fixed
background:red url(img/b.png) no-repeat 0 0;
background:url(img/c.png) no-repeat 0 0;
盒子模型
①线型：solid/dotted(虚线)/dashed(线段)
②外边距：margin:30px 20px 30px 20px;
四个值时，代表不同方向值不一样
三个值时，代表左右一样，上下不一样
两个值时，代表上下一样，左右一样
一个值时，代表上下左右都一样
5.浮动
浮动：float:none/left/right
清浮动：clear:none/both
none:允许两边都可以有浮动对象
both:不允许有浮动对象
6.超出（overflow）
visible: 不剪切内容也不添加滚动条
auto: 默认属性
hidden: 隐藏超出内容
scroll: 总是显示滚动条
8.显示（display）
block:对象以块属性的方式显示
none: 对象不显示
inline:对象以行属性的方式显示
inline-block:对象以行属性的方式显示，但是具备块属性部分特性（比如宽高）
table:对象以表格的形式显示（基本用不到）
9.可视（visibility）
inherit: 继承上一个父对象的可见性
visible: 对象可视
hidden: 对象隐藏
