HTML5-基础总结

HTML5-基础

一、认识HTML

1.什么是html （结构标准 - 超文本标记语言）
超文本 - 除了文字以外，还可以对图片、视频、音频、超链接、按钮、输入框等进行标记
标记语言 - 不是编程语言,和MacDown语法一样，只是通过不同的标记让内容以不一样的形式显示出来。
如果语法出错不会影响其他正确的标记的效果

2.什么是html文件
文件后缀是.html的文件； 可以直接通过浏览器打开。一般情况下，html代码就写在html文件中

3.html版本
狭义的html5 - html第5个大版本
广义的html5 - html5+css3+js

4.网页结构 - 树
整个网页是一个html标签，html中直接包含head标签和body标签。

标签（标记）
html就是通过不同的标签对网页中的内容进行标记的
a.结构
双标签: <标签名 属性名1=属性值1 属性名2=属性值2 …>标签内容</标签名>
单标签: <标签名 属性名1=属性值1 属性名2=属性值2 …> 或 <标签名 属性名1=属性值1 属性名2=属性值2 …/>

b.说明
标签名 - 只能写html提供的标签，不能随便命名; 标签名前不能加空格
属性 - 属性放在单标签或者双标签的开始标签中，以‘属性名=值’的形式出现，多个属性之间用空格隔开;
属性顺序随意，不会影响最终的效果；
标签内容 - 双标签的开始标签和结束标签之间是标签内容；标签内容可以是任何内容(可以写文字，也可以放其他的标签)

6.head标签
head标签包含的内容：
meta标签 - 元标签（单标签） charset=‘utf-8’ - 设置编码方式
title标签 - 设置网页标题
link标签 - 导入外部文件（设置图标 ， 导入css文件）
style标签 - 导入css代码
script标签 - 导入js文件的导入js代码
base标签 - 设置网页中的基本url

附加

1.a 标签的用法
a. href=’#’ 刷新 (重新请求数据)
b. href=‘http://www.baidu.com’ 超链接 （target=’_blank’ 在新的页面显示新的网页）
c. href=’#id选择器名’ 描点定位
2.盒子模型
html中所有在网页上可见的标签都是盒子模型，有固定的结构.
所有可见的标签都是由：content、padding、border和margin组成,其中内容、padding、border是可见的，margin不可见
1.content - a.设置width和height就是在设置content的大小;b.标签中添加内容也是添加到content中的;c.设置背景颜色，会作用于content;
2.padding - a.通过padding相关属性设置padding的大小(4个方向);b.设置背景颜色，会作用于padding
3.border(边框) - a.通过border相关属性设置border的大小(4个方向);b.边框的颜色需要单独设置;
4.margin - a.通过margin相关属性设置margin的大小;b.不可见，但是占位

认识网页

1.web标准: 是w3c组织制定的网页代码规范
结构标准 - html - 决定网页上有哪些内容
表现标准 - css - 决定网页上内容的布局和样式
行为标准 - javascript - 决定网页的动态变化(包括内容的改变和样式的改)

网页中的内容在没有写样式的时候，默认的布局方式，在标准流中不同类型的标签布局方式不一样（块级标签，行内标签，行内块 ；可通过设置display属性改变）
脱标的方式 ：a、设置浮动float ; b、display:inline(行内) / block (块级) / inline-block(行内块)；c、定位

清除浮动：
1.高度塌陷（指的是清除因为浮动而产生的高度塌陷问题 - 父标签不浮动，子标签浮动就会产生高度塌陷问题）
2.清除浮动
a.添加空盒子 -在会高度塌陷的父标签中的最后添加一个一个空div 并设置clear:both
b.overflow - 选中高度塌陷的标签，设置样式的overflow的值为hidden
c.万能清除法

定位属性
position - 设置标签定位的时候参考对象（相对谁去定位）
initial / static - 不相对任何对象定位
absolute(绝对定位) - 相对于第一个非 initial / static 的父标签进行定位
relative(相对定位) - 相对当前标签在标准流的位置进行定位(注意：一般把一个标签的position设置为relative是为了让当前标签的子标签可以相对自己定位，常用子标签position：absolute 搭配使用)
fixed - 相对浏览器进行定位
sticky - 当网页中的内容超过一屏（需要滚动），相对浏览器定位；当网页中的内容超过一屏（不需要滚动），相对标准流的位置进行定位
普通选择器
每种选择器都有一个权重值，权重值越大，优先级越高;权重值一样的时候谁后写，谁的优先级高
id选择器 > class选择器 > 标签选择器(内联样式表的优先级永远最高)

伪类选择器
伪类选择器是用来选中标签的不同的状态（为了标签的不同状态设置不同的样式）
1.基本格式
普通选择器:伪类选择器
2.伪类选择器

1. link - 标签的初始状态;一般作用于a标签，表示a标签中的连接没有成功访问过对应的状态
   标签:link{} - 标签是通过各种选择器来选中的标签
   2)visited - 超链接被访问后的状态。一般作用于a标签
   3)hover - 鼠标悬停在标签上的时候对应的状态
   4)active - 激活状态,鼠标按下还没有弹起的时候对应的状态
   3.爱恨原则:当同一个标签需要同时给多个状态添加样式的时候，要遵守爱恨原则：link-visited-hover-active
   LoVeHAte

表单标签(form)

表单标签的作用：收集用户信息。 - 实质是将表单标签作为容器，来收集表单标签中其他标签的信息 本身没有任何显示效果

		action属性: 设置提交地址
		method属性: 提交方式(post/get)
		
		点提交按钮提交的时候，将表单中所有相关标签以name=value的形式，
		按照method属性提供的提交方式，提交给action属性对应的接口
		
		form标签提供了两大功能：a.统一提交   b.重置