HTML - H5新增元素与CSS基本样式

一、 HTML5新增元素

• 以前用div +class的方式来规划页面格式

    <div class="header"></div>
    <div class="nav"></div>
    <div class="article">
        <div class="section">新闻中心</div>
        <div class="section">郑重生命</div>
    </div>
    <div class="aside">
        <div class="address"></div>
    </div>
    <div class="footer"></div>

• 现在可以利用 HTML5 的新元素

<!-- HTML5新增元素 -->
<header></header>
<nav></nav>
<article>
    <section></section>
</article>
<aside>
    <address>地址</address>
</aside>
<footer></footer>

二、基本单位

• 长度
  • px：像素
  • em：相对长度单位。相对于当前对象内文本的字体尺寸。比如n em 就是当前对象内文本的font-size的 px 的 n倍
  • rem：相对长度单位。相对于根元素(即html元素)font-size计算值的倍数，比如：n rem 相对于根类px的 n 倍。

三、块级元素和行内元素转换

• 块级元素---->行内元素：style="display:inline;"

<div style="display:inline;"  >我是div</div>

• 行内元素---->块级元素 style="display:block;"

<span style="display:block;" >我是span</span>

• 行内元素，但是还需要可以设置宽高，也就是说行内的块如何设置？

display: inline-block;

• display其他应用：隐藏元素

<span style="display:none;" >我是span</span>

• 注意：只有块级元素才能设置对应的 宽和高 height、width，行内元素设置之后是没有效果的。

四、 文本和字体基本样式

• 字体大小

        font-size: 20px;

• 字体

        font-family: "Comic Sans MS";

• 缩进

        text-indent: 2em;

• 文本对齐方式

        text-align: center;

• 文字样式（斜体）

        font-style: italic;

• 加粗

        font-weight: bold;

• 单词折断换行

        word-wrap:break-word;

• 显示省略号的效果设置

        overflow:hidden;/*超出的隐藏*/
        white-space:nowrap;/*不让换行 直到br*/
        text-overflow:ellipsis;/*...的效果（CSS3） */

五、边框背景基本样式

• 设置边框

<table border="1">
//或者
<div class="outer"></div>
.outer{
        border:10px solid burlywood;
        border-radius: 10px;
}

• 设置边框合并

table{
        /*将相邻的边框合并*/
        border-collapse:collapse;
    }

六、表格和列表

• 表格

<table border="1">
    <tr >
        <td>小明</td>
        <td>第一</td>
    </tr>
    <tr>
        <td>小王</td>
        <td>第二</td>
    </tr>
</table>

• 列表
  • 有序

<ol>
    <li>第一</li>
    <li>第二</li>
</ol>

- 无序

<ul>
    <li>测试1</li>
    <li>测试2</li>
</ul>

七、IE独有&CSS HACK （每家浏览器都有自己的特点）

CSS HACK可以理解为对应不同的浏览器去进行适配

CSS HACK.png