HTML+CSS学习日记-01

前言

        HTML是用于创建网页的标记语言，是web开发的基础，HTML使用标签来描述文本内容和定义网页格式和结构。CSS则用于定义网页的样式，用于网页的布局和外观美化，两者结合制作更加精美的网页，本文用于介绍HTML基础的标签使用和简单的CSS入门。

一、HTML标签介绍

        标签分为单标签和双标签，基本的语法结构如下：

        单标签：<标签名/>

        双标签：<标签名></标签名>

1.1 标题标签

        标题标签h1-h6，共有6级标题，标签名越大，标题字体越小，且标题标签字体自动加粗。

        语法格式为：<h*>标题内容</h*>。

        

1.2 段落标签&换行标签

        段落标签<p></p>，在HTML中，若需要输入长串文字，则需要用到段落标签，进行分段，增加网页的可读性。不使用段落标签的情况下，即使文本中输入换行符，网页中也不会进行换行操作，而是以一个空格作为替代，结果就是长串文字粘连。

        使用段落标签后可以看到明显改善。

       除了使用段落标签进行分段，还可以使用换行标签<br />对文本进行强制换行。

       同时，网页中有很多字符并不能正确识别，需要用到转义字符，以&开头，以；结尾，例如：

英文空格：&nbsp；

半个字符空格：&ensp；

一个字符空格：&emsp；

大于号：&gt；

小于号：&lt；

1.3 分割线标签

        分割线标签<hr />用于产生一条水平分割线，可以通过添加属性值更改分割线颜色，宽度，粗细。

1.4 图像标签

        通过图像标签，可以向网页中插入你所需要的图片，可以通过添加属性修改图片尺寸等信息。语法格式：<img src=" " alt=" " width=" " height=" " title=" " />

 属性值：

1.src（必带）：表示图片路径

2.alt：图片加载失败时显示的文字

3.width/height：控制图片宽高度

4.title：鼠标划过时显示的提示文字

1.5 列表标签

        列表标签分为无序列表，有序列表和自定义列表，一般常用有序列表和无序列表，自定义列表通常用于图文混排。

1.5.1 无序列表：

        无序列表为一个整体，里面包含若干列表项，可以使用type属性修改默认符号类型，属性值有：disc（默认实心圆）  circle空心圆  square小方块  none无

        可以通过快捷写法快速建立列表：ul>li{内容}*5（任意需要的数字即可）+TAB键

1.5.1 有序列表：

        有序列表为一个整体，里面包含若干列表项，可以使用type属性修改默认符号类型，属性值有：1（默认值）       a         A        i        I

        同时可以通过属性值start修改起始位置，属性reversed设置倒序。

        可以通过快捷写法快速建立列表：ol>li{内容}*5（任意需要的数字即可）+TAB键

1.5.3 自定义列表

        自定义列表包括dl (总标签) dt (定义项) dd (描述项)，常用于图文混排，也可以通过快捷键实现：

        dl > dt + dd＋TAB键

1.6 超链接标签

        通过超链接标签向网页中的文字或图片添加超链接，用户通过点击超链接可以跳转至其他网页，电子邮箱，文件等，其基本语法格式为：<a href=" " target="_blank">链接描述</a>

属性值：

href（必带）：添加目标链接或其他内容，若在href中添加#，则视为空链接

target：打开新页面进行跳转，如果不添加target则默认在当前页面跳转

1.7 表格标签

        通过表格标签可以向网页中添加不同格式的表格，table表示整个表格，tr表示表格的一行，td则表示表格的一个单元格，即table包含tr，tr包含td，也可以通过快速写法快捷创建表格。

        快捷写法：table>tr*5(行数）>td{内容}*5（任意数字，实例为创建5行5列表格）

        可以通过修改属性值对表格进行适当的修改。

常用属性：

①table：

width/height：表格整体的宽高        bgcolor：表格背景色        align：水平对齐方式

border：边框        cellspcing：单元格之间的间隔

②tr：

height：高度        bgcolor：背景色        align：水平对齐方式        valign：垂直对齐方式

③td：

width：宽度        bgcolor：背景色        align：水平对齐方式        valign：垂直对齐方式

colspan：水平合并单元格        rowspan：垂直合并单元格

        单元格合并的格式为：rowspan/colspan = 数字（数字为需要合并的单元格数），完成合并后需要将被合并的单元格删除。

1.8 表单标签

        表单用于数据的收集，实现用户与服务器的交互，表单是一个整体的结构，里面包含若干项。

1.8.1 input标签

        用户通过input标签将文本，邮箱，日期等各种信息输入网页中，实现收集数据的目的。

1.8.2 下拉列表

1.8.3 文本域

        文本域是用于用户输入长文字的标签，基本格式为：

        <textarea name=" " id=" " cols="30" rows="10"></textarea>

属性值：

cols：控制列数/宽度

rows： 控制行数/高度

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

        将以上标签综合运用后，我们得到这样一个页面：

二、CSS样式表

        CSS是样式设置规则，用于控制页面的样式外观，实现样式复用，提高开发效率。

2.1 CSS使用方式

        在页面开发的过程中，需要在HTML文件中将CSS样式文件导入，才能实现样式的使用，需要用到link命令进行链接。

<link rel="stylesheet" type="text/css" href="CSS样式文件的路径">

2.2 CSS的基本选择器

2.2.1全局选择器

        全局选择器：*，选择所有标签，设置为该样式

2.2.2 标签选择器

        标签选择器 使用标签名作为选择器名称，以修改该标签下的内容样式。

2.2.3 类选择器

        使用标签自定义的class属性作为选择器名称，使用时用 .+class类名。

2.2.4 id选择器

        使用自定义的唯一的id名为选择器，使用时#+id名。

2.2.5 伪类选择器

        根据不同的状态显示不同的样式，一般多用于标签，格式为 :+状态名

四种状态：

:link 初始状态
:visited 点击后状态
:hover 鼠标悬停/划过的状态
:active 鼠标点击状态

2.2.6 包含选择器

        在某个选择器内在设置选择器，以空格隔开。

        例如：

         ul li{}，选择ul列表下的li中的内容

        .nav .a2{}，选择nav类下的a2类中的内容

2.2.7 群组选择器

        将多个具有相同样式的选择器放在一起声明，使用逗号隔开

        例如：h1,h2,h3{}

2.3文字样式

        通过修改文字样式可以达到修改文字的目的。

文字样式类型：

color：颜色；	修改文字颜色。
font-size：文字大小；	修改文字的大小，px为绝对单位，em为相对单位。
font-family：字体；	修改文字字体。
font-weight：类型；	文字是否加粗，bold为文字加粗，normal为正常。
font-style：风格；	修改文字风格，italic为倾斜文字，normal为正常

         具有同意前缀的属性，可以通过复合书写减少代码长度，例如：

        font：100px  "隶书";

2.4文本样式

        通过修改文本样式可以达到修改文本格式的目的

文本样式类型：

text-indent：缩进值；	修改文本首行缩进值。
line-height：行高；	修改文本行高，单位有px，em，200%，2.5*
text-align：center；	水平居中对齐
text-decoration：underline；	文本添加下划线
text-decoration：overline；	文本添加上划线
text-decoration：line-through；	文本添加删除线
text-decoration：none；	文本取消下划线（用于超链接取消下划线）

2.5背景样式

        通过修改背景样式可以修改页面的背景

background-color：颜色；	设置背景颜色
background-image：url（图片链接）；	设置背景图片
background-repeat：no-repeat；	设置背景平铺，no-repeat为背景图不重复
background-position：水平 垂直；	设置背景位置，手动设置水平和竖直坐标
background-attachment：状态；	设置背景图状态，scroll：背景随滚动条滚动。fixed：背景固定。
background-size：宽 高；	设置背景图片大小

三、CSS3新增属性

3.1元素转换

        元素有分类--块元素，行内元素，行内块元素

        块元素：独占一行、设置宽高生效、默认宽度占父元素100%。   display: block;

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

        行内块元素：既在一行之内显示、宽高还生效。display: inline-block;

3.2 圆角边框

        通过border-radius可以设置边框的圆角，设置4个值，顺序为上，右，下，左，修改时遵循顺时针，对角线原则。

3.3 文字阴影

        通过text-shadow来给文字添加阴影，达到立体文字的效果。

3.4 盒子阴影

        通过box-shadow给盒子添加阴影。

3.5 过渡动画 transition

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

8.7 帧动画 animation

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

8.8 溢出

8.9 文本溢出 text-overflow

8.10 布局

实际生活中，盖房子的步骤是：①画图纸[审核]，②打地基垒框架，③装修

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

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

8.10.1 静态布局

从上往下逐一摆放

缺点：会造成空间浪费

8.10.2 浮动布局 float

float 原来是进行图文混排的处理的

float 现在可以在页面中进行【分列】

8.10.3 使用float进行DIV+CSS布局

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

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

页面的所有元素都是盒子

盒模型有四部分、五属性

8.10.4 定位布局 position

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

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

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

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

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

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