HTML5基础

！DOCTYPE html（单标签）

• 作用：避免浏览器的怪异格式

• 位置：位于文档的最前面

html&/html（双标签）

• 作用：H5的基本骨架

head&/head(双标签)

• 作用：H5的基本骨架，定义头部信息，不展示给用户

title&/title(双标签)

• 作用：定义网页名称

• 位置：位于head标签内，是head标签内必须有的

meta(单标签)

• 作用：描述网页的编码格式

• 位置：位于head标签内

• 属性：
• charset：用于描述网页的编码格式，如：

body&body(双标签)

• 作用：H5的基本骨架，用于展示网页内容

h1&/h1~h6&/h6(双标签)

• 作用：标题标签

• 位置：位于body标签内部

p&/p(双标签)

• 作用：声明段落

• 位置：位于body标签内部

br/(单标签)

• 作用：换行

• 位置：通常在p标签内部用于段落换行

hr/(单标签)

• 作用：生成水平线

• 位置：通常在body标签内用于生成水平线

• 属性：
• color：设置水平线的颜色
• width：设置水平线的长度
• size：设置水平线的宽度
• align：设置水平线的对齐方式(默认居中)，可取值(left|right)

img(单标签)

• 作用：在网页中展示图片

• 位置：常用在body中展示图片，或用做超文本链接

• 属性：
• src：记录图片存储的路径，分为绝对路径、相对路径、网络路径
• 绝对路径：从电脑盘符起的路径
• 相对路径：以当前文件为基准的路径，两者在同一路经下可以直接访问
• 子级关系：/
• 父级关系：../
• 同级关系：./
• 网络路径：具体的网络地址
• alt：规定图像的替代文本(图片不显示时的替代文本)
• title：鼠标悬停在图片上给予提示
• width：规定图像的宽度
• height：规定图像的高度

a&/a(双标签)

• 作用：生成超文本连接，默认情况下未访问过的链接显示为蓝色字体并且带有下划线；访问过的链接显示为紫色并且带有下划线；点击链接时(不松鼠标左键)，链接显示为红色并且带有下划线

• 位置：常用于body标签内部用于生成超文本链接

• 属性：
• href：用于描述链接的地址

文本标签

• em&/em(双标签)
• 作用：定义着重文字
• 位置：常用于body标签内用于定义着重文字

• b&/b(双标签)
• 作用：定义粗体文字
• 位置：常用于body标签内用于定义粗体文字

• i&/i(双标签)
• 作用：定义斜体字
• 位置：常用于body标签内用于定义斜体字

• strong&/strong(双标签)
• 作用：定义加重语气
• 位置：常用于body标签内用于定义加重语气

• del&/del(双标签)
• 作用：定义删除字
• 位置：常用于body标签内用于定义删除字

• span&/span(双标签)
• 作用：定义没有特定含义的文字
• 位置：常用于body标签内用于定义没有特定含义的文字

• 应当视文本本身的含义来选择合适的文本标签

• 常用文本标签和段落标签是不同的，段落代表一段文本，而文本标签常表示文本词汇，故文本标签常用在段落标签中

有序列表标签

• 格式：有序列表始于ol标签，每个列表项始于li标签

• 作用：用于生成有序表

• 位置：常用于body标签内生成有序列表

• 属性：
• ol的属性type：
• 1：表示列表项目用数字标号(默认项)
• a：表示列表项目用小写字母标号
• A：表示列表项目用大写字母标号
• i：表示列表项目用小写罗马数字标号
• I：表示列表项目用大写罗马数字标号

• 有序标签可以进行嵌套

无序列表标签

• 格式：无序列表始于ul标签，每个列表项始于li标签

• 作用：生成无序列表，且每个列表项用粗体原点进行标记；生成网页导航部分

• 位置：常用于body标签内生成无序列表

• 属性：
• ul的属性type：
• disc：默认实心圆(默认项)
• circle：空心圆
• square：小方块
• none：不显示

• 无序列表同有序列表一样可以进行嵌套

表格标签

• 格式：表格主要有三个标签构成
• 表格标签：table&/table
• 行标签：tr&/tr
• 列标签：td&/td

• 作用：生成一个表格

• 位置：常用于body标签内用于生成表格

• 属性：
• table标签属性：
• border：设置表格的边框
• width：设置表格的宽度
• height：设置表格的高度
• td标签属性：
• colspan(列合并，就是水平两格合并)：属性值填写合并单元格的个数，写在最前面的一个td标签上，保留左边，删除右边
• rowspan(行合并，就是垂直两行合并)：属性值填写合并单元格的个数，写在最前面的一个tr标签上，保留上边，删除下边

form标签(双标签)

• 作用：用于生成Form表单，用于为用户提供输入框

• 位置：常用于body标签内生成Form表单

• 属性：
• action：服务器ip地址
• name：表单名称
• method：内有两个可选值，一个是get，一个是post，用于表示将数据提交给服务器的不同方式，二者的区别如下：
• get提交的数据url(服务器)可以看到，但post提交的数据url看不到
• get一般用于提交少量数据，post用于提交大量数据

表单元素

• input标签(单标签)
• 作用：为用户提供输入框或者按钮
• 位置：常用于form标签内为用户提供输入框或者按钮
• 属性：
• type：常用值有text，password,submit等
• text：为用户提供文本框
• password：为用户提供密码框
• submit：为用户提供提交按钮，将用户输入的内容提交给form属性中的url,可以在input标签中多增加一个属性value改变按钮的名称

• button标签(双标签)
• 作用：为用户提供按钮
• 位置：常用于form标签内为用户提供按钮

块元素与内联元素

• 块元素与内联元素的区别：
• 块元素会在页面中独占一行(自上向下垂直排列)，导致每次使用块元素时都会换行；内联元素不会独占页面中的一行，只占自身的大小，导致每次使用内联元素时不会换行
• 块元素可以设置width和height属性；内联元素width、height属性无效
• 一般块元素内可以包含其他块元素和内联元素；一般内联元素可以包含内联元素但是不能包含块元素

• 常见块级元素
• div、form、h1~h6、hr、p、table、ul等

• 常见内联元素
• a、b、em、i、span、strong等

• 行内块级元素(调用这些块元素时不会换行)
• button、img、input

HTML5新增标签

• div(双标签)
• 作用：容器元素

• 如：
• 位置：网页设计中用来装载不同模块，在网页设计中都可以见到
• 属性：
• id：可选值(id取值可以自己定义，但是建议按照规范)有header、nav、article、section、sidebar、footer等
• header：头部
• nav：导航
• article：文章
• section：内部模块
• sidebar：侧边栏
• footer：底部
• ps：id值在H5替换为如下标签
• id="header"：头部
• 2<header></header>
• id="nav"：导航
• <nav></nav>
• id="article"：代表一个完整的、独立的相关内容块
• <article></article>
• id="section"：定义文档中的节，比如章节
• <section></section>
• id="sidebar"：侧边栏
• <aside></aside>
• id="footer"：脚部
• <footer></footer>

CSS基础

CSS的引入方式

• 内敛样式：在需要的相关标签内引入style属性(只对当前元素生效)

• 如：

• 内部样式：用style标签在head标签内定义样式(只对当前网页所有此类元素生效)

• 如：

• 外部样式(就是在当前文件夹下单独写一个CSS文件，带入CSS文件的页面的此类元素都能生效，推荐)
• html文件如何引入CSS文件：
• 在头部调用link标签
如：
其中href属性填写CSS文件的地址
• CSS如何编写：
• 如：

选择器

• 全局选择器：
• 特点：可以和任何元素匹配，优先级最低，一般做样式的初始化

• 如：

• 元素选择器：
• 特点：选择的是页面上所有这种类型的标签，所以经常用来描述共性，但是无法描述单一元素的个性

• 如：

• 类选择器
• 特点：通过.来定义，针对想要的所有标签使用，十分灵活，可以描述个性

• 如：
其中class的属性值命名规则与后端代码变量命名规则相同

• ID选择器
• 特点：针对某个特定的标签使用，且只能使用一次

• 如：
其中id的属性值不能重复，所以id选择器只能生效一次

• 合并选择器
• 特点：常用来提取共同的样式，减少重复的代码

• 如：
其中选择器是其他多个选择器用逗号隔开

• 选择器的优先级
• 元素选择器权重：1
• class选择器权重：10
• id选择器权重：100
• 内联样式权重：1000
• 当权重相同时就按照代码的执行顺序进行格式调整

字体属性

• color
• 作用：设置字体的颜色
• 格式：
• color：red(不推荐使用，因为能表示的颜色有限)；
• color：#ff0000；
• color：rgb(255,0,0)；
• color：rgba(255,0,0,1);

• font-size
• 作用：设置字体的大小
• 格式：font-size:30px;

• ps:chrome浏览器接受的最小字体是12px

• font-weight
• 作用：设置字体的粗细
• 格式：
• font-weight:normal;(默认粗细)
• font-weight:bold;(定义粗体字符)
• font-weight:bolder;(定义更粗的字符)
• font-weight:lighter;(定义更细的字符)
• font-weight:900;(取值范围为100~900，定义由细到粗的字符，400等同于默认，700等同于bold，常用！！！)

• font-style
• 作用：指定文本的字体样式
• 格式：
• font-style:normal;(默认值)
• font-style:italic;(定义斜体字)

• font-family
• 作用：指定一个元素的字体
• 格式：font-family:"Microsoft YaHei";

• ps：如果字体名称包含空格，就必须加上双引号，建议全部都加上双引号

背景属性

• background-color
• 作用：设置背景颜色
• 格式
• background-color：red;(不推荐使用，因为能表示的颜色有限)；
• background-color：#ff0000；
• background-color：rgb(255,0,0)；
• background-color：rgba(255,0,0,1);

• background-image
• 作用：设置背景图片
• 格式：background-image:url("1.jpeg");(括号内填填图片的路径)

• background-position
• 作用：设置背景图片显示位置
• 格式：
• background-position：left top；（默认值，左上）
• background-position：left center；（左中）
• background-position：left bottom；（左下）
• background-position：right top；（右上）
• background-position：right center；（右中）
• background-position：right button；（右下）
• background-position：center top；（中上）
• background-position：center center；（中中）
• background-position：center button；（中下）
• background-position：x% y%；（按百分比选取起始渲染点）
• background-position：xpx ypx；（按像素点选取起始渲染点）

• background-repeat
• 作用：设置背景图片如何填充
• 格式：
• background-repeat:repeat;(默认值，即向xy两个方向填充)
• background-repeat:repeat-x;(只向水平方向填充)
• background-repeat:repear-y;(只向垂直方向填充)
• background-repeat:no-repeat;(不平铺)

• background-size
• 作用：设置背景图片大小
• 格式：
• length方式：background-size：1200px 1000px；（图片可能变形）
• percentage方式：background-size：100% 100%；（图片可能变形）
• cover方式：background-size：cover；（图片不变形，对容器进行全覆盖，多余部分不显示）
• contain方式：background-size：contain；（图片不变形，对图片进行完全显示，剩余部分保留空白）

文本属性

• text-align
• 作用：指定元素文本的水平对齐方式
• 值
• left：文本居左排列，默认值
• right：文本居右排列
• center：文本居中排列

• 如：

• text-decoration
• 作用：规定添加到文本的修饰，包括添加下划线、上划线、删除线等
• 值

快捷键

• 生成浏览器文件的快捷方式：！+回车

• 代码格式化：shift+alt+F

• 向上或向下移动一行：alt+up||alt+down

• 快速复制一行代码：shift+alt+up||shift+alt+down

• 快速保存：ctrl+S

• 快速查找：ctrl+F

• 快速替换：ctrl+H

• 快速生成HTML5的无序列表：ul>li*3(生成li标签的数量)

• 快速生成HTML5的表格：table>tr *3>td *3(生成三行三列表格)