HTML+CSS的静态网页笔记整理

一、编程工具的选择

        在这里我选择的是Sublime text 3，它是一款轻量级网页编辑器，拥有高亮显示、tab键自动补全功能。这个功能应该没有哪个懒人能够拒接吧。

        官网下载链接：Download - Sublime Text

二、HTML文件的建立

        我们先进行HTML的文件建立。新建HTML文件步骤：

        ①双击图标打开

        ②ctrl+N 新建

        ③合法命名 XXX.html 保存【若没有自动显示框架，shift+1按tab键补全即可】

        ④书写代码

        ⑤ctrl+s保存，鼠标右键，在浏览器打开

三、HTML基本标签

        HTML中是使用标签来区分文档中的不同内容的。

        标签的语法是：

                双标签：<标签名>xxx<标签名>

                单标签：<标签名/>

3.1 标题标签 h1 - h6  

        特点：自动加粗，依次减小。h1是最大标题 h6是最小标题

        属性：就是用于描述标签的特征的。

        语法：

                双标签：<标签名  属性="属性值"   属性="属性值">  </标签名>
                单标签：<标签名  属性="属性值"   属性="属性值"  />

3.2 一些描述性的简单标签     

        换行        br
        加粗        b
        倾斜        i
        下划线    u
        删除线    s
        文字        font

3.3 水平线标签 hr

        属性：    color 颜色
                       width 宽度
                        size    粗细、高度
                        align    水平对齐【默认居中对齐】

3.4 段落标签 p

        网页中部分字符是不识别的，需要使用转义字符。语法上以&开头，以;结尾。
                &nbsp;        一个英文空格
                &ensp;        半个字空格
                &emsp;        一个字空格
                &gt;            大于号 >
                &lt;            小于号 <
                &copy;        版权
                &reg;        注册
        段落有水平对齐方式属性 align 【属性值是left  right  center】

3.5 图像标签 img

        - src        路径【绝对路径和相对路径】
        - alt        图片非正常加载时，显示提示文字
        - width    宽度
        - height    高度
        - border    边框
        - title        鼠标滑过时显示提示文字

3.6 列表标签 ul ol dl

3.6.1 无序列表 ul

        无序列表是一个整体，里面包含若干个列表项
        快捷键：    ul > li{写文字内容} * 10
        可以使用type属性修改项目符号类型
        属性值有：disc默认实心圆    circle空心圆    square小方块        none无

3.6.2 有序列表 ol

        有序列表是一个整体，里面包含若干个列表项

        快捷键： ol > li{文字内容} * 10

        可以使用type属性修改默认符号类型

        属性值有：1 默认值 a A i I

        可以使用start属性修改起始值

        可以使用reversed属性设置倒序

3.6.3 自定义列表 dl

        自定义列表多用于图文混排，包含两部分内容：dt定义项 dd描述项

        快捷键： dl > dt + dd

3.7 超链接 a

        超链接（hyperlink）是Web页面中用于连接不同资源的一种机制。它允许用户点击文字或图片，从而跳转到另一个页面、文件、电子邮件地址或执行其他操作

        链接源：文字、图片

        链接目标：网页、网址、文件、邮箱、应用程序exe、锚点、空链接【#】等等等

        属性： 1.href 路径

                    2.target 设置窗口打开方式 _self原窗口 _blank新窗口

        快捷键：ul>li*10>a[#]{家用电器}*3

        锚点链接：【跳转到当前页面任意位置】

        第一步：设置锚点 id属性设置 属性名必须符合命名规范

        第二步：跳转到锚点 #锚点名

3.8 表格标签 table

        表格是一个整体，里面包含行tr 列 td 或者 th

        快捷键： table > tr*5 > td{内容}*4

        制作细线表格有这样几步：

                1、给table设置width height bgcolor=red

                2、给tr设置bgcolor=white 【tr的背景色 覆盖掉 table的背景色】

                3、给table设置 cellspacing = 1 【调整边框的粗细】

3.9 表单标签 form

        表格：多行多列的参数，用于数据的展示

        表单：用于数据的手机，实现用户与服务器的交互。

        表单是一个整体，里面包含若干项

3.9.1 输入框 input

        使用type属性，修改输入框的类型

        1、在radio单选框中，必须使用name设置同一组，才能实现单选

        2、在单选框radio和复选框CheckBox中使用checked设置初始选中

        3、在文本框 密码框中使用 placeholder 设置模糊提示文字

        4、有三种按钮形式reset重置 submit提交 button普通

3.9.2 下拉列表 select

        下拉列表select是一个整体，里面要包含选项option

3.9.3 文本域 textarea

        cols 控制列数/宽度

        rows 控制行数/高度

        maxlength 控制最大长度/限制字数

3.10 HTML5新增语义化标签

        time 【时间日期】

        nav【导航】

        header【头部】

        footer【底部】

        main【主体】

        aside 【侧边栏】

四、CSS样式表

        网页组成 = HTML + CSS + Js

        HTML：超文本标记语言，控制网页的结构

        CSS：层叠样式表，控制网页的外观

        建立与HTML差不多，要在命名样式中改为XXX.CSS，就OK了。

4.1 CSS基本选择器

全局选择器 *	*{color: red;} 选择所有标签，文字颜色为红色
标签选择器 标签名	p{color: red;} 选择所有p标签，文字颜色为红色
class类选择器 .类名	.name_li{color: red;} 选择所有class名为name_li的标签，文字颜色为红色
id选择器 #id名	#tel{color:red;} 选择唯一的id名为tel的标签，文字颜色为红色
伪类选择器 :状态名	:link{} 初始状态 :visited{} 点击后的状态 :hover{} 鼠标悬停/滑过状态 :active{} 鼠标点击状态 :focus{} 获取光标状态
包含选择器 以空格隔开	ul li{} 选择ul里面的li ol li{} 选择ol里面的li .nav .a2{} .nav a:hover{} ul li a:hover{}
群组选择器 以,隔开	h1,h2,h3{}

4.2 CSS的使用方式

        1、行内样式【优先级最高，不建议使用】

        2、内部样式【只能修改一个页面，重用率低】

3、外部样式【可以修改任意页面，重用率高】

4.3 文字样式 【修改文字】

4.4 文本样式

4.5 列表样式

4.6 背景样式

五、CSS3新增属性

5.1 元素显示/转换

        标签有分类——单标签、双标签

        元素有分类——块元素、行内元素、行内块元素

                1、块元素：独占一行、设置宽高生效、默认宽度占父元素100%

                        display: block;

                2、行内元素：在一行之内显示、设置宽高不生效、默认宽度是内容撑开的

                        display: inline;

                3、行内块元素：既在一行之内显示、宽高还生效

                        display: inline-block;

5.2 圆角边框 border-radius

        圆角边框的关键词是"border-radius"

        border-radius: 6px  意思是四个边框边角变成圆角，半径是6像素

        border-radius：50%  意思是四个边框边角变成圆角，半径是边框的50%

        可以设置1到4个属性值，遵循“顺指针、对角线”原则

5.3 背景色渐变

5.4 文字阴影 text-shadow

5.5 盒子阴影 box-shadow

5.6 过渡动画 transition

        缺点：只能由一种状态过渡到另一种状态

5.7 帧动画 animation

        一帧一帧组成的，类似于我们看到的小人书。 

5.8 溢出   overflow

5.9 文本溢出 text-overflow

六、布局

        在页面制作中，我们也需要三步走：布局、HTML结构、CSS样式、JS动画

        布局——给页面画图纸，设计元素在指定的位置

6.1 静态布局

        从上往下逐一摆放

        缺点：会造成空间浪费

6.2 浮动布局 float

6.3 使用float进行DIV+CSS布局

        页面的内容都有指定的标签 p h1-h6 img ……

        使用div来表示块元素、也可称之为盒子

        页面的所有元素都是盒子

        盒模型有四部分、五属性

6.4 定位布局 position

position:static;	静态定位，没有定位，默认值
position:relative;	相对定位，相对于自身进行定位【位移时，自身原位置不消失】
position:absolute;	绝对定位，相对于body或者带有定位的父元素进行定位【位移时，自身原位置消失】
position:fixed;	固定定位，相对于浏览器窗口进行定位【滚动时也是固定的】

        其中注意一点：因为相对定位自身位置不消失，所以一般不会使用相对定位进行位移。

        我们通常采用父相子绝来进行定位处理。

        位移必须配合方向词：left right top bottom，单位有px em % 等，正负值都可以。

        使用定位时，盒子会产生层叠效果，可以通过z-index属性进行层叠顺序调整。

        z-index属性是不带单位的数字，正负都可以，值越大越显示在上方。