Web页面制作基础总结

一、html中的标签及其属性

标签

标签是由w3c提前制定好的一些针对于html文档的标记符号，这些符号是具备各自的含义的。通常，我们也会将标签称作元素。具体在html中的变化形式由<>括起来的对象，比如：html head body。

属性

属性是额外的对标签进行描述的信息。一个标签是可以拥有多个属性的，多个属性之间通过空格分隔，属性是写在开始标签的<>中。属性分为两大类：全局属性（任何元素都具备的属性）、局部属性（也叫特定属性，只能某一些元素能够使用）。

元素的分类

元素通过在页面中的展示以及对于元素的特性，可以分为三大类。

块元素（block element）特点：1.块元素具有布局特点，一般常用于页面的整体布局；2.块元素独占（其父元素）页面的一行；3.块元素可以嵌套任何类型的元素（除p元素外）； 4.块元素可以设置宽和高，默认的宽度是其父元素的宽度； 5.块元素默认高度是由内容决定的。

行内元素（inline element）特点： 1.正常情况下，行内元素是不会换行的； 2.行内元素会在一行排不下时进行换行； 3.行内元素不能设置宽和高，是由其内容决定的；4.行内元素一般不能嵌套块级元素，大多数是嵌套文本或者其他行内元素。

行内块元素（inline-block element）特点：1.行内块元素不会独占一行；2.可以设置宽和高（默认是内容的宽和高）。

列表标签

在html中是可以创建列表的，列表有三种：有序列表（使用ol标签来创建的，列表中的每一项是通过li标签来代表）、无序列表（使用ul标签来创建的，列表中的每一项是通过li标签来代表，相对说用的最多）、定义列表（使用dl标签来创建的，使用dt来表示定义的内容—小标题，使用dd来对小标题解释说明 ）。

超链接标签（a标签）

超链接就是让我们从一个页面跳转到其他页面，将各个单独的网页进行关联。超链接的作用：​ 1.可以访问到外部网络的资源​； 2.可以访问本地网页资源​； 3.可以作为锚点，在当前页面指定位置进行定位跳转。

img标签

img标签：用于渲染，图片资源的标签。其中的两个属性：src： 指定外部的图片资源路径，或者本地图片资源路径​ ；alt：对图片额外信息的描述，方便SEO检索到该图片​ 当图片无法加载时，显示alt中信息，提示用于，该图片的大致内容。

二、CSS（层叠样式表）

引入CSS的三种方法

<!-- 行内样式 -->
<div style="width: 100px; height:100px;  background-color: red;" ></div>
<div></div> 

<!-- 内联样式 -->
<style>
    div {
        width: 100px;
        height: