web02

###表单form

• 作用:用于获取用户输入的信息,并且将信息提交到服务器

• 学习表单就是学习表单中有哪些控件

• 文本框

    <input type="text" name="username" value="xxx" maxLength="5" readonly="readonly" placeholder="xxxx" >
  

• 密码框

    <input type="password" name="pwd" value="xxx" maxLength="5" readonly="readonly" placeholder="xxxx" >
  

• 单选

    <input id="xxx" type="radio" name="xxx" value="xx" checked="checked">
    <label for="xxx">xxxx</label>
  

• 多选

    <input id="xxx" type="checkbox" name="xxx" value="xx" checked="checked">
  

• 日期

    <input type="date" name="xxx">
  

• 文件

    <input type="file" name="xxxx">
  

• 文本域

    <textarea name="xxx" cols="20" rows="5" placeholder="xxxx"></textarea>
  

• 下拉选 city=bj

    <select name="city">
    	<option value="bj">北京</option>
    	<option>xxxx</option>
    	<option>xxxx</option>
    </select>
  

###分区标签

• 分区标签可以理解成是一个容器,对多个有相关性的标签进行统一管理

• 常见的分区标签div和span

  1. div:块级分区元素, 特点:独占一行
  2. span:行内分区元素,特点:共占一行

• 如何对页面内容进行分区?
  一个页面至少分为三大区: 头 体 脚, 每个大区内再细分n个小的区域

    <div>头</div>
    <div>体</div>
    <div>脚</div>
  

• html5标准中新增了分区标签,作用和div是一样的 主要是为了提高代码的可读性,包括: header头 footer脚 article正文 nav导航 section区域

    <header></header>
    <article></article>或<section></section>
    <footer></footer>
  

###实体引用(类似特殊字符)

• 空格: 如果html页面中连续出现多个空格,只能识别出一个,这个现象称为空格折叠现象. 如果需要显示多个空格使用以下内容进行转义  
• 小于号: <
• 大于号: >
  ###CSS
• Cascading Style Sheet 层叠样式表. 作用: 美化页面
• 如何在html页面中添加css样式代码?总共有三种方式:
  1. 内联样式: 在标签的style属性中添加css样式代码, 弊端:不能复用
  2. 内部样式: 在head标签里面添加style标签,标签体内写样式代码,弊端:只能在当前页面复用
  3. 外部样式: 在单独的css文件中写样式代码,在html页面中通过link标签引入css文件,可以实现多页面复用
     工作中外部样式用的最多,学习过程中更多使用内部样式
     ####选择器

1. 标签名选择器

• 格式: 标签名{样式代码}
• 作用: 选取页面中所有同名标签

2. id选择器

• 格式: #id{样式代码}
• 作用: 如果需要给页面中某一个元素添加样式,则给元素添加id属性,通过id选择器选中

3. class选择器

• 格式: .class{样式代码}
• 作用: 用于选取页面中多个元素(需要给多个元素添加相同的class属性值)

4. 分组选择器

• 格式: div,#id,.class{样式代码}
• 作用: 可以将多个选择器合并成一个选择器

5. 属性选择器

• 格式: 标签名[属性名=‘值’]{样式代码}
• 作用: 可以通过元素的属性获取元素

6. 子孙后代选择器

• 格式: body div span{样式代码}
• 作用: 选取body里面的div里面的所有span(包括子元素span和所有后代span)

7. 子元素选择器

• 格式: body>div>span{样式代码}
• 作用:选取body里面的div里面的子元素span

8. 伪类选择器

• 格式: 标签名:link/visited/hover/active{样式代码}
• 作用: 选取元素的状态 状态包括(未访问状态,访问过状态,悬停状态,点击状态)

9. 任意元素选择器

• 格式: *{样式代码}
• 作用: 选取页面中所有元素

####选择器练习:

1. 把d1字体改红色
2. 把d2,s2,h2,水煮鱼字体改绿色
3. 把密码框背景改红色
4. 把水煮肉,水煮鱼,红烧肉,d1背景改黄色
5. 把h2和文本框背景改蓝色

####颜色赋值

• 三原色: 红绿蓝,red green blue, rgb 每个颜色取值范围0-255,
• 颜色单词赋值 red
• 6位16进制赋值 #ff0000 红255 绿0 蓝0
• 3位16进制赋值 #f00 每一位重复一次 f00=ff0000
• 3位10进制赋值 rgb(255,0,0)
• 4位10进制赋值 rgba(255,0,0,0-1) a=alpha透明度取值0-1 值越小 越透明
  ####背景图片
• background-image:url(路径); 设置背景图片
• background-size:200px 300px; 设置背景图片尺寸
• background-repeat:no-repeat; 禁止重复
• background-position:50% 100%; 背景图片位置
  ####如何查看目标页面元素样式
• 使用谷歌浏览器

1. 在元素上面右键->检查
2. 右侧窗口出现后 点击小箭头拾取器 选中想查看的元素

####文本和字体相关

1. 文本修饰: text-docoration:overline上划线/underline下划线/line-through删除线/none去掉修饰
2. 文本对齐方式: text-align: left/right/center;
3. 文本颜色: color:red;
4. 文本阴影: text-shadow: 颜色 x偏移值 y偏移值 浓度(值越大越模糊)
5. 行高: line-height:20px; 可以通过行高实现垂直居中
6. 字体大小: font-size:20px;
7. 字体加粗: font-weight:bold加粗/normal去掉加粗;
8. 字体设置: font-family:xxxx,xxx,xxx,xxxx; font:20px xxx,xxx,xxx;
9. 斜体: font-style: italic;
   ####元素显示方式display
10. block: 块级元素 ,独占一行,可以修改宽高, 包括: div h1-h6 p
11. inline: 行内元素, 共占一行,不能修改宽高, 包括: span b i small 超链接等
12. inline-block:行内块元素,共占一行,并且可以修改宽高, 包括: 图片img, input

• 每个元素都有自己默认的显示方式,但是有些场景需要修改元素的显示方式,比如行内元素是不能修改宽高的 如果有需求必须改宽高则只能先修改元素的显示方式为block或inline-block
  ####圆角
• border-radius:5px; 值越大越圆 当值大于宽高一半时为圆形
  ###盒子模型
• 盒子模型=宽高+外边距+边框+内边距
• 宽高: 控制元素大小
• 外边距: 控制元素的位置
• 边框: 控制边框效果
• 内边距: 控制元素内容的位置
  ####盒子模型之宽高
• width/height赋值,赋值方式两种:

1. 像素
2. 上级元素百分比

• 行内元素是不能修改宽高的
  ####盒子模型之外边距
• 外边距:元素距上级元素或相邻兄弟元素的距离称为外边距. 作用: 控制元素的显示位置
• 赋值方式:

1. 单独某个方向赋值 margin-left/right/top/bottom: 10px;
2. 四个方向赋值 margin:10px;
3. 上下和左右 margin:10px 20px; 上下10 左右20 margin:0 auto; 块级元素居中
4. 上右下左四个方向 margin:10px 20px 30px 40px 顺时针 上右下左