H5&CSS3

HTML&CSS

HTML

定义：超文本标记语言
用途：编写网页
最新版本：HTML5
编写工具：任何文本编辑器都可以

html文档结构

<!DOCTYPE html><!--文档声明:表示该文档类型为html，并且版本号为5-->
<html lang="zh-CN"><!--根标签，表示文档的开始，lang表示语言，en表示英文，中文:zh-CN-->
<head><!--头部标签，这些内容大多数不在网页中显示，对文档的一个说明-->
    <meta charset="UTF-8"><!--指出当前文件的编码类型，使用UTF-8-->
    <title>day1</title><!--标题，会显示在网页-->
</head>
<body>
 <h1>Hello World!</h1>
</body>
</html>

html语言不区分大小写

常用标签

标题标签:h1–h6，依次减小

<h1>这是一级标题标签</h1>
<h2>这是二级标题标签</h2>
<h3>这是三级标题标签</h3>
<h4>这是四级标题标签</h4>
<h5>这是五级标题标签</h5>
<h6>这是六级标题标签</h6>

段落标签:p
```
<p></p>
```
换行标签:br
```
<br>
```
水平线:hr
```
<hr size="" >
```
对齐属性:align,值:left左对齐，center居中，right右对齐
strong:逻辑字体标签，表示强调，有的浏览器会解释为加粗效果
em:逻辑字体标签，表示一般强调，有的浏览器会解释为斜体效果

img:图片标签

<img src="图片的路径" title="悬停显示的文字" width="宽度(像素)" height="高度" align="图片旁边文字与图片对齐的方式:top顶端对齐,middle:中间对齐,bottom:底端对齐">

路径
- ./:当前目录
- ../上一级目录

超链接：a
```
<a href="网页的url#锚机点名" name="定义锚机垫的名称，废弃属性，现在使用id"></a>
```
- target:目标，在哪里打开网页
  - _self:默认值，在当前网页中显示链接URL
  - _blank:在一个新页面中显示连接URL
字体标签:font(html5中被废弃)
- color:颜色
- size:大小，1–7,1最小
- face：字体类型，如：宋体，隶书(操作系统支持)
字符实体：在html语言中，有一些字符，如: “<”或“>”等，不能直接使用，在需要使用的时候，通过字符实体来转换
- 一个字符实体由三部分组成
  - 一个&符号
  - 一个实体名或实体号
  - 一个分号
- 常用实体
  - 空格： 
  - 小于号:<
  - 大于号:>
  - 版权符号:©
  - 双引号:"
注释:
有序序列:ol
- type:1,a,A,i,I
- start:表示开始位号
无序列表：ul
- type:disc(实心圆点),circle(空心圆点),square(实心方形点)

自定义列表：dl

<dl>
        <dt>水果</dt>
        <dd>西瓜</dd>
        <dd>苹果</dd>
        <dd>香蕉</dd>
        <dt>蔬菜</dt>
        <dd>黄瓜</dd>
        <dd>卷心菜</dd>
        <dd>西红柿</dd>
        <dd>娃娃菜</dd>
    </dl>

dt:定义列表项(定义标题)
dd:对定义项的解释(内容)

div:独占一行
span:空标签，没有先设置的任何样式

表格

table:表格
thead:表格头
tbody:表格主体
tfoot:表格尾
tr:行
th:标题单元格(加粗，居中)
td:普通单元格(不加粗，靠左)
caption:表格标题
align:对齐
- 写到table标签中，整个表格对齐方式
- 写到tr中，表格中所有单元格的内容对齐
- 写到td中，当前单元格内容对齐
其他属性
- border:边框宽度
- width:表格宽度
- height:表格高度
单元格合并
- colspan：列合并
- rowspan：行合并

表单

作用：收集用户的信息，提交给服务器，是进行程序交互的一个主要方式
form是一个包含表单元素的取余
常用属性
- action：表示把当前表单数据提交给谁(应用)来进行处理
- method：表示提交数据的方式
  - 常用：get和post(默认是get)

表单元素

文本框
```
<input type="text" name="username" placeholder="请输入用户名" value="默认值"><button></button>
```
1. type:表单的类型，text：文本框
2. name:表单元素名称(访问标识)
3. size:宽度
4. placeholder:占位符(提示文字)
5. value:初始值

密码框

<input type="password" placeholder="请输入密码">

单选按钮
```
<input name="gender" type="radio">男
<input name="gender" type="radio">女
```
- 注意:单选按钮的name的值用来分组，名称相同的是一组，一组中只有一个能被选中
- checked:默认被选中

label:不是表单元素，往往与某个表单元素绑定，扩大操作范围

用途：

表单元素和提示文字放在表单标签中

<label><input name="gender" type="radio" checked >男</label>
<label><input name="gender" type="radio">女</label>

表单元素添加id属性，label通过for属性设置绑定元素的id

<label for="txt">用户名</label><input id="txt" type="text" name="username" placeholder="请输入用户名"><button></button>

复选框

爱好:<input type="checkbox" name="hobby">学java
            <input type="checkbox" name="hobby" checked>玩游戏
            <input type="checkbox" name="hobby">打篮球

选择框select

省份:<select name="area" id="" size="10" multiple>
            <option>请选择</option>
            <option>浑南区</option>
            <option>大东区</option>
            <option>铁西区</option>
            <option>苏家屯区</option>
        </select>

size:同时显示列项的数目

multiple:可以选中多项

selected:写到option中，表示被选中

value:写到option中，表示当前option中的value

文本域
```
<textarea></textarea>
```
rows:显示行数

cols:显示列数
按钮
```
<input type="submit | reset | button | image" value ="按钮的文字">
```
submit:提交按钮，作用:把表单元素的内容提交给action对应的程序进行处理

reset:重置按钮

button:普通按钮，通过js实现功能

隐藏域

隐藏起来的表单元素

<input type="hidden" name = "id" value="100">

文件域
```
<input type="file">
```
作用:用来选择文件，并上传文件
字段集

不是表单元素
```
<fieldset></fieldset>
```
图例
```
<legend></legend>
```
readonly属性:只读，数据会被提交给服务器
disable:不可用的，值不会传给服务器
h5中对input标签进行了拓展
- search:产生一个搜索表单元素，输入文字后会出现清除按钮
- email:限制用户必须输入一个合法的email，否则无法提交
- number:限制用户必须输入数字
  - max
  - min
- range:产生一个滑动条，来设置一个值
- color:产生一个颜色选择表单元素
- date:选择日期
- time:选择时间
- month:选择月份
- week:选择星期
h5中增加的属性
- required:输出框内容不能为空，否则无法提交
- novalidate:用户提交表单时，取消整个表单验证

iframe

创建包含另外一个文档的内嵌框架，可以将另一个html页面嵌入到当前页面中

<p>
    <a href="./book.html" target="iframe1">内容页1</a>
    <a href="./FormDemo2.html" target="iframe1">内容页2</a>
    <a href="./shop.html" target="iframe1">内容页3</a>
    <iframe src="./updateuser.html" name="iframe1" width="100%" height="100%"></iframe>
</p>

CSS

概述
- 定义：层叠样式表
- 作用：
  - 内容与样式分离
  - 极大地提高工作效率
语法规则
```
选择器{
	属性
}
```
按照样式表位置分为三类
- 行内样式：写在html标签中，仅对html标签有效
- 内嵌样式：写在当前页面的head标签的style标签中
- 外部样式表：写在当前文件的外部文件中，后缀为css的文件
```
<link rel="stylesheet" href="style.css">
```
  - rel必须为stylesheet，不能省略
  - type:可以省略
  - href:css样式的路径，必须写
```
<style>
	@import url("css/style.css")
</style>
```
  注意:三种样式表的优先级:行内样式>内嵌样式>外部样式
基本选择器
- html标签选择器:选择器的名称为html标签名
- 类选择器:(使用最多的选择器)
  - 定义:.类名
  - 引用:class=”类名”
- id选择器:对指定id元素设置样式
  - 定义:#id名
  - 引用:id=”id名”
  - 通用选择器L*,表示所有元素

复合选择器

后代选择器:
```
祖先选择器 后代选择器{
    
}
```

交集选择器:

p.div{
    /*第一个必须是html标签，第二个必须是类/ID选择器，选择器之间不能有空格*/
}

并集选择器:
```
p,class1,class2{

}
```

样式的层叠规则
- 并列的定义，后定义的优先级高
- 不同等级的定义，最接近指定元素的样式优先极高
- 行内样式>内嵌样式>外部样式
- 同一等级的定义:一个含糊的选择器的优先级比一个更有针对性的选择器的优先级低
  - 行内选择器的优先级最高
  - 交集选择器
  - id选择器
  - 类选择器
  - html标签选择器
  - 通用选择器
  - 浏览器对标签预定义的样式
  - 继承的样式优先级最低
CSS字体样式
- 字体样式
  - font-size:文字大小
  - color:文字颜色
  - font-family:字体类型
  - font-style:字体样式(italic斜体)
  - font-weight:字体粗细(粗体:bold)
    - 数值:100-900,400:normal,700:bold
  - text-decoration:文本装饰
    - underline|none
  - font:在一个声明中设置所有的字体属性，属性顺序:风格,字体粗细,字体大小,字体类型,字体颜色;
- 文本属性
  - text-align:文本水平对齐方式
    - left
    - right
    - center
    - justify:两端对齐
  - text-indent:首行文本缩进
  - line-height:设置元素内文本行之间的垂直间距
    - line-height:24px
    - line-height:1.5;行高是字体大小的1.5倍
    - line-height:150%;行高是字体大小的150%
    - line-height:normal;使用浏览器默认的行高
伪类
- 定义：基于的是当前元素的状态，由于状态是动态变化的，所以一个元素达到一个特定状态时，得到一个伪类样式，，失去状态的时候就失去了这个样式
  - :hover：鼠标悬停
  - :nth-child(n):选择父元素中第N个子元素，n从1开始
背景颜色
- background-color背景颜色
列表样式

ul{
    list-style:none;
}

图片

img{
      opacity: .5;/*透明度*/
      width: 300px;
    }

盒子模型
- 每个html元素都可以看作一个盒子，这个盒子由四部分组成
  - width，height:宽高
  - padding:内边距
  - margin:外边距
  - border:边框
元素的分类
- 类别
  1. 块级元素
  2. 行内元素
  3. 行内块元素
- 块级元素
  1. 例如：div、p、h1—h6、ul、li
  2. 总是从新行开始（独占一行）
  3. 高度、宽度、行高(line-height)、外边距以及内边距都是可以控制的
  4. 宽度默认是容器的100%
  5. 可以容纳任何元素
- 行内元素
  1. 例如：a、strong、span
  2. 和相邻行内元素在一行上
  3. 高度和宽度无效，padding、border、margin有效
  4. 行内元素只能容纳文本或其他行内元素（a特殊）
- 行内块元素
  1. 例如：img、td
  2. 可以跟其他行内块元素在一行上
  3. 高度和宽度有效
  4. 没有宽度的时候，内容撑开宽度
- 类型转换
  - display：类型转换
  - 作用：
    - 控制元素在块级与其他类型间转换
    - 控制元素的显示和隐藏
  - 值：
    - block:显示为块级元素
    - inline-block：显示为行内块元素
    - inline：显示为行内元素
    - none：隐藏元素
背景图像
- background-image:url(图片路径)
- background-repeat: no-repeat|repeat(默认)|repeat-x|repeat-y
定位
- 标准文档流
  - 概念：是指页面元素从上向下，从左到右，一个挨着一个的布局方式
- 定位模式
  1. static：静态定位,自动定位（默认方式，按照标准文档流定位）
  2. relative：相对定位，相对于当前元素在文档流的位置进行定位
    - 相对定位后，可以通过边偏移量属性改变元素的位置，但是它在文档流中的位置仍然保留
    - 边偏移量是相对于该元素在标准流中的位置变化
  3. fixed：固定定位，相对于浏览器窗口进行定位
    - 特点：完全脱离标准流，不占用任何位置，不随着滚动条滚动
  4. absolute：绝对定位，相对于其上一个已经定位的父元素进行定位
    - 特点：
      - 它完全脱离标准流，完全不占位
      - 父级没有定位：若所有父元素都没有定位，以浏览器为准定位
      - 父元素定位可以是static定位之外的任意一种
      - 父相子绝
叠放次序
- 当多个元素同时设置了定位时，定位元素之间可能会发生重叠
- 使用z-index来控制叠放次序
- z-index的默认值是0，取值越大，定位元素在层叠元素中越居上，如果取值相同，则根据书写顺序，后来居上
- 只有相对定位、绝对定位和固定定位有此属性
元素的显示和隐藏
- display:none（隐藏元素），显示：block|inline|inline-block
  - 特点：隐藏之后，不在保留位置
- visibility：设置是否显示元素
  - visible：可见的
  - hidden：隐藏
  - 特点：隐藏之后，继续保留原有位置
- overflow：溢出
  - 作用：设置当前元素中子元素的内容超过其指定高度和宽度的时候，如何管理内容（子元素）
  - 值：
    - visible：不裁剪内容，也不添加滚动条
    - hidden：隐藏超出部分
    - scroll：不论是否超出，都显示滚动条
    - auto:超过显示滚动条，不超出不显示
弹性布局
- 定义：是一种CSS布局模式，它允许容器中的子元素在不同屏幕尺寸和设备上自动调整大小和位置以适应可用空间
- display：flex：设置当前元素为弹性盒子
- flex-direction：设置弹性容器的主轴方向
  - row:水平排列
  - row-reverse:水平反向排列
  - column：垂直排列
  - column-reverse:垂直反向排列
- justify-content：设置子元素在主轴上的对齐方式
  - flex-start：主轴开始位置
  - flex-end：主轴结束位置
  - center：主轴居中位置
  - space-around：空间环绕每一个子元素
  - space-between：空间在子元素之间存在
- align-items：设置在交叉轴上对齐子元素
  - flex-start：交叉轴开始位置
  - flex-end：交叉轴结束位置
  - center：交叉轴居中位置
  - baseline：子元素根据其基线对齐
  - stretch:默认值，子元素会被拉伸以填充容器的高度或宽度（取决于主轴的方向），如果子项设置了高度或宽度，则拉伸无效