HTML-5和CSS3

html5是超文本标记语言HTML的第五次重大修改版本，其目的主要是让Web开发人员和浏览器创建者更容易遵循基于共识的标准，从而提高合规性并增强其合规性。css3是CSS技术的升级版本，是一种用来表现HTML或XML等文件样式的计算机语言。 本图总结了相关的知识。

HTML-5和CSS3

• CSS3
  • 总结
    • 掌握CSS样式的使用方法和样式规则常见的基本字体样式属性以及标签选择器这些也能熟练应用对于css背景也能掌握并应用比如背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
  • CSS背景（background）
    • 背景颜色:background-color
    • 背景图片地址:background-image
      • 语法：background-image : none | url (url)
      • 参数：none : 　无背景图（默认的）url : 　使用绝对或相对地址指定背景图像
    • 背景平铺：background-repeat
      • 语法：background-repeat : repeat | no-repeat | repeat-x | repeat-y
        • repeat : 　背景图像在纵向和横向上平铺（默认的）
        • no-repeat : 　背景图像不平铺
        • repeat-x : 　背景图像在横向上平铺
        • repeat-y : 　背景图像在纵向平铺
    • 背景位置：background-position
      • 语法：
        • background-position : length || length background-position : position || position
      • 参数：
        • length : 　百分数 | 由浮点数字和单位标识符组成的长度值
        • 设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为：(0% 0%)。如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标
    • 背景固定还是滚动：background-attachment
      • 语法：
        • background-attachment : scroll | fixed
      • 参数：
        • scroll : 　背景图像是随对象内容滚动 fixed : 　背景图像固定
  • CSS外观属性
    • color:文本颜色的取值
      • 1.预定义的颜色值，如red，green，blue等。
      • .十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。
      • RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。
    • line-height:行间距
      • ine-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px
    • text-align:水平对齐方式
      • text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性
        • left：左对齐（默认值）
        • right：右对齐
        • center：居中对齐
    • text-indent:首行缩进
      • text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。
    • letter-spacing:字间距
      • letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值，允许使用负值，默认为normal。
    • 设置颜色透明度(css3)
      • color: rgba(r,g,b,a) a 是alpha 透明的意思 取值范围 0~1之间 color: rgba(0,0,0,0.3)
  • 选择器
    • 标签选择器（元素选择器）
      • 标签选择器是指用HTML标签名称作为选择器
        • 标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者
        • 元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
    • 类选择器
      • 类选择器使用“.”（英文点号）进行标识，后面紧跟类名
        • .类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
    • 多类名选择器
      • 我们可以给标签指定多个类名，从而达到更多的选择目的
    • id选择器
      • id选择器使用“#”进行标识，后面紧跟id名
        • #id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
    • 通配符选择器
      • 使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。
        • * {
        • margin: 0; /* 定义外边距*/
        • padding: 0; /* 定义内边距*/
        • }
    • 伪类选择器
      • 伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果， 比如可以选择 第1个，第n个元素。
        • 为了和我们刚才学的类选择器相区别， 类选择器是一个点 比如 .demo {} 而我们的伪类 用 2个点 就是 冒号 比如 :link{}
    • 链接伪类选择器
      • :link /* 未访问的链接 */
      • :visited /* 已访问的链接 */
      • :hover /* 鼠标移动到链接上 */
      • :active /* 选定的链接 */
    • CSS复合选择器
      • 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。
    • 交集选择器
      • 交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格
    • 并集选择器
      • 并集选择器（CSS选择器分组）是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。
    • 后代选择器
      • 后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
    • 子元素选择器
      • 子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格。
    • 属性选择器
      • 选取标签带有某些特殊属性的选择器 我们成为属性选择器
    • 伪元素选择器（CSS3)
      • E::first-letter文本的第一个单词或字（如中文、日文、韩文等）
      • E::first-line 文本第一行；
      • E::selection 可改变选中文本的样式；
  • 引入CSS的三种方法
    • 行内式（内联样式）
      • <标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
  • CSS的作用
    • CSS的出现，拯救了混乱的HTML，当让更加拯救了我们web开发者。 让我们的网页更加丰富多彩。
  • CSS初识
    • CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
    • CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。
  • CSS样式规则
    • 1.选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。
    • 2.属性和属性值以“键值对”的形式出现。
    • 3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
    • 4.属性和属性值之间用英文“:”连接。
    • 5.多个“键值对”之间用英文“;”进行区分。
    • 可以用段落 和 表格的对齐的演示。
  • CSS字体样式属性
    • font-size:字号大小
      • px：一般常用的像素单位
      • em：相对于当前对象内文本的字体尺寸
      • in：英寸
      • cm：厘米
      • mm：毫米
      • pt：点
    • font-family:字体
      • font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：
      • 用法：p{ font-family:"微软雅黑";}
    • CSS Unicode字体
      • 在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。xp 系统不支持 类似微软雅黑的中文。
      • 方案一： 可以使用英文来替代。 比如 font-family:"Microsoft Yahei"
      • 方案二： 在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称，浏览器是可以正确的解析的。font-family: "\5FAE\8F6F\96C5\9ED1"，表示设置字体为“微软雅黑”。
    • font-weight:字体粗细
      • font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、100~900（100的整数倍）。
    • font-style:字体风格
      • 比如斜体：{font-style:italic}
  • font:综合设置字体样式 (重点)
    • 选择器{font: {font-style} {font-weight} font-size font-family;}
    • 使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。
• HTML5
  • 总结
    • 今天学习了html的骨架格式 熟练html的标签分类和关系了解utf-8字符集
    • 学会如何创建表单和表格
    • 理解img相对路径与绝对路径的区别
    • 熟悉h5新增特性
  • imput控件
    • label标签(理解)
      • label 标签为 input 元素定义标注（标签）。
      • 作用： 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点
      • 如何绑定元素呢？
      • for 属性规定 label 与哪个表单元素绑定。
    • textarea控件(文本域)
    • 下拉菜单
      • <select> <option>选项1</option> <option>选项2</option> <option>选项3</option> ... </select>
  • 列表标签
    • 无序列表 ul （重点）
    • 有序列表 ol
  • 表格 table
    • tr表示多少行
    • td表示多少列
  • 路径(重点、难点)
    • 相对路径
      • 以引用文件之网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对路径。
      • 图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称即可，如<img src="logo.gif" />。
      • 图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如<img src="img/img01/logo.gif" />。
      • 图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如<img src="img/img01/logo.gif" />。
    • 绝对路径
      • 绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的
      • “D:\web\img\logo.gif”，或完整的网络地址，例如“http://www.baidu.com/images/logo.gif”。
  • 链接标签(重点)
    • <a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
    • href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。 Hypertext Reference的缩写。意思是超文本引用
    • target：用于指定链接页面的打开方式，其取值有self和blank两种，其中self为默认值，blank为在新窗口中打开方式。
    • 外部链接 需要添加 http:// www.baidu.com
  • <img src="图像URL" />
  • HTML常用标签
    • 标题标签h1~h6
    • 段落标签p
    • 分割线<hr/>
    • 换行标签<br/>
    • 图像标签img (重点)
      • 该语法中src属性用于指定图像文件的路径和文件名，他是img标签的必需属性。
  • HTML标签关系
    • 1.嵌套关系
    • 2.并列关系
  • HTML标签分类
    • 单标签
    • 双标签
      • <标签名> 内容 </标签名>
  • 书写第一个html页面
    • 2
      • HTML标签：
        • 1.作用所有HTML中标签的一个根节点。 最大的标签 根标签
        • 2. head标签： 文档的头部
          • 文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
        • 注意在head标签中我们必须要设置的标签是title
        • 3.title标签： 文档的标题
        • 4.body标签：文档的主体 以后我们的页面内容 基本都是放到body里面的
        • body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）
  • Web标准构成
    • 1
      • 结构标准：结构用于对网页元素进行整理和分类，咱们主要学的是HTML。
      • 表现标准：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。
      • 行为标准：行为是指网页模型的定义及交互的编写，咱们主要学的是 Javascript
  • Web标准的好处
    • 0
      • 1、让Web的发展前景更广阔 2、内容能被更广泛的设备访问3、更容易被搜寻引擎搜索4、降低网站流量费用5、使网站更易于维护6、提高页面浏览速度
  • Web标准（重点）
    • 通过以上浏览器的内核不同，我们知道他们工作原理、解析肯定不同，显示就会有差别。
  • 认识网页
    • 网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。