HTML的浅析（一）

作为一个萌新，我打算从现在开始我的博客之旅，实际上本来打完一篇了却忘记保存，我人麻了。。又得重新写，啊啊啊啊啊啊啊！我是新手，如有错误请大家不吝指教！

首先要辨析好块元素，行内元素以及行内块元素

块元素

1. 高度，行高、外边距以及内边距都可以自己设置
2. 如果不设置宽度，宽度默认是容器的100%，而高度默认为0由内容撑开
3. 独占一行！！
4. 可以容纳内联元素和其他块元素

行内元素

1. 高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
2. 行内元素的宽度与高度都是由内容撑开
3. 和相邻行内元素在一行上。
4. 行内元素只能容纳文本或则其他行内元素。 a标签除外

行内块元素

1. 可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。
2. 和相邻行内元素（行内块）在一行上,但是之间会有间隙，例子如下
3. 默认宽度就是它本身内容的宽度
4. 高度，行高、外边距以及内边距都可以修改且生效

*{
            margin: 0;
            padding: 0;
        }
        .box{
            text-align: center;
            
        }
        .box a{
            display: inline-block;
            width: 36px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
            text-align: center;
            line-height: 36px;
            text-decoration: none;
            color: #333;
            font-size: 14px;
        }
        .box .prev,
        .box .next{
            width: 85px;
            
        }
        .box .current,
        .box .elp{
            background-color: #fff;
            border: none;
        }
        .box input{
            height: 36px;
            width: 45px;
            border: 1px solid #ccc;
            outline: none;
        }
        .box button{
            width: 60px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
        }
        
        <div class="box">
        <a href="#" class="prev">&lt;&lt;上一页</a>
        <a href="#" class="current">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#" class="elp">...</a>
        <a href="#" class="next">&gt;&gt;下一页</a>
        到第
        <input type="text">
        页
        <button>确定</button>
    </div>

接下来进入到html最重要的标签学习

首先是h1-h6标签

h1–h6被称为标题标签，总共有6级，从1到6重要性递减，h1的重要性仅次于title标签，一般一个网页只有一个h1，一般标题标签只会用到h1到h3。他们的区别就是包裹的字体样式不同，不过不需要特别在意，因为后期可以通过css进行修改，注意下这个标签是块元素！

然后是p标签

p标签顾名思义是段落的意思，也是块元素，独占一行

span标签

span标签也是一般用来包裹字体，不同的是它是行内元素，宽高是由内容撑开且不能设置宽高，这个标签也是挺常用的

br标签

br标签是起到换行作用，相似的可以直接写 表示空格

结构化标签

header 表示网页的头部
main 表示网页的字体部分(一个页面都有一个main)
footer表示网页的底部
nav 表示网页中的导航，这个标签较为常用，一般用来做导航条的大盒子，容易认
aside 表示和主题相关的内容（侧边栏）这个也是比较常用的
article 表示一个独立的文章
section 表示独立的区块，上面的标签都不能表示时可用
注意下上面的标签都是块元素

div标签

div标签也是结构化标签的一种，不过因为比较重要所以拎出来单独讲。这个标签可以说是后期用得最多的，基本上上面能用的情况下这个都可以用。div没有语义，就用来表示一个区块

列表

分为三种：无序列表： 使用ul标签来创建,使用li表示列表项 这个用得比较多，
有序列表： 使用ol标签来创建，使用li表示列表项，
定义列表： 使用dl标签创建一个定义列表，使用dt来表示定义内容，使用dd对内容进行解释说明
列表之间可以互相嵌套
在这三种呢一般推荐用无序列表，虽然会有些默认样式的出现，但只要修改下li的样式即可

border:0;
margin:0;
padding:0;
list-style:none;

内联框架

iframe 标签规定一个内联框架。
一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。
使用方法如下：

<iframe src="http://www.baidu.com"></iframe>

a标签

这个标签的属性有点小多，我打算重开一篇来讲

img标签

使用img标签来引入外部照片，img标签是一个自结束标签
img这种元素属于替换元素（基于块和行内元素之间，具有两种元素的特点）
这个属性以及注意点也是比较多，也是另外开一章

audio与video作为新标签也是重开一篇

第一次写文章可能会比较水，后面我也会继续努力争取做得更好，希望大家多点点赞激励下萌新！