入门标签的语法及文本属性

1：文本标题标签：h1-h6

        特点：有默认的样式，文字会加粗，而且字号不一样。

        h1标签比较特殊，唯一性，单个网页中只能够出现一次，一般用于网站的logo。

        h2-h6标签：板块的标题、一段叙述性文本的标题。

        需要注意的问题：h1-h6 不能互相嵌套。

        

        2：字体样式等：

        加粗：<b></b>   <strong></strong>

        倾斜：<i></i>   <em></em>

        下划线：<u></u>

        水平线：<hr>

        换行符：<br>

        3:段落标记：

        <p></p>

        不能进行相互嵌套

        不能嵌套h1-h6 

        span标签：

        表示一个字符 或者 一小段文本

        4：转义字符：

        &nbsp     不换行空格

        &lt;&gt   左右尖角号

        &copy     备案图标

        div        作为一个块或者容器标签，主要是划分网页的结构

        5：无序列表和有序列表

        无序列表：

        <ul>

            <li>某某新闻标题</li>

            <li>某某新闻标题</li>

            <li>某某新闻标题</li>

            <li>某某新闻标题</li>

            <li>某某新闻标题</li>

        </ul>

        特点：默认情况下：每一个li前面都存在一个列表符号（实心圆点）

        怎么用：实现新闻列表、页面的主导航

        有序列表:

        <ol>

            <li>某某新闻标题</li>

            <li>某某新闻标题</li>

            <li>某某新闻标题</li>

            <li>某某新闻标题</li>

            <li>某某新闻标题</li>

        </ol>

        特点：列表符号默认为数字

        拓展： 换字母和罗马数字

            type="a"   小写字母

            type="A"   大写字母

            type="i"   罗马小写

            type="I"   罗马大写

        start=""  属性值：只能接收数字（1、2、3...)

        自定义列表：

        <dl>

            <dt></dt>

            <dd></dd>

        </dl>

    6：超链接

        <a></a>

        a标签的属性：

            href="url"   作用：跳转地址。

                <a href="#">新闻</a>   //空连接，在当前页面进行跳转。

                <a href="###">新闻</a>  //空连接，不会跳转 （用来模拟一个按钮）

                <a href="javascript:void(0)"></a>

            target=""

                属性值：

                    _self  默认值：在当前窗口打开

                    _blank 新建一个窗口打开目标的地址

            

            title=""

                属性（不仅仅使用在a上面，大部分标签都支持）

                做提示信息

    超链接默认的样式：文字为蓝色、下划线

    实现新闻列表的结构：

        <ul>

                <li>

                    <a href="#">新闻内容信息等</a>  

                </li>

                <li>

                    <a href="#">新闻内容信息等</a>  

                </li>

                <li>

                    <a href="#">新闻内容信息等</a>  

                </li>

                <li>

                    <a href="#">新闻内容信息等</a>  

                </li>

        </ul>

    7：相对路径

        ./  当前的路径（操作文件所在的路径）

        ../ 返回上一级

    

    8：表格

        表格标签：

            table  表格

            tr     行

            td     列

        表格属性：

            width=""        宽 （table上面添加  整个表格的宽，如果添加在td上 每列的一个宽）

            height=""       高

            border=""       添加边框

            bordercolor=""  更改边框的颜色

            cellpadding=""  内容距离边框的一个间距

            cellspeacing="" 边框与边框之间的间距

            align=""        水平对齐方式:left   right   center

            valign=""       垂直对齐方式：top   bottom  middle

    

    9:单元格的合并

        行合并： rowspan="合并的单元格的数量"

        列合并： colspan="合并的单元格的数量"

        

        跨行合并行！跨列合并列！

        注：无论合并行 还是 合并列 都是给td添加属性。和谁合并就删除谁。

文本属性：

        文本大小的设置：

            1：font-size:

                常规像素为16px 像素的大小一般为偶数（不低于12px） 

                em的大小决定于font-size

                    例如：font-size=20px  1em=20px  默认1em=16px

                em的其他应用：

                    line-height(行高)

                    line-height:2em  (根据font-size的值确定)

                使用法定字号：

                    xx-small == 9px

                    x-small == 11px

                    small == 13px

                    medium == 16px

                    large == 19px

                    x-large == 23px

                    xx-large == 27px

            2:设置文本的颜色

                color:

                    #六位或者三位16进制数字。

                    0带表最暗的颜色 f代表最亮的颜色。

                    RGB模式：rgb（245，245，245）

            3：设置文本的字体

                font-family:多个属性值的时候是用逗号隔开

                英文默认的字体:Arial

                font-family属性值是中文需要放在引号里面，英文字体多个单词，也需要放在引号里面。一个英文字体的单词，不需要放在引号里面。

                如果存在中英文字体：先写英文再写中文字体。

            4：设置文本字体的加粗 font-weight

                属性值；

                    bold    加粗

                    bolder  更粗

                    nomal   恢复常规文本

                            100

                            200

                            300

                            ...

                            900

                        100 - 500 常规状态

                        600 - 900 加粗状态

            5：控制文本的倾斜  font-style

                属性值：

                        normal  恢复常规文本

                        italic  文本倾斜

                        oblique  文本倾斜

            6：line-height  行高

                再设计图上量取行高:(地一行的开始第二行的顶端)

                当单行文本的line-height值  和 容器高保持一致，可使文本在容器里面上下居中！！！

            7：文本对齐方式  text-align

                left

                right

                center

                justify  ( 两端对齐 )

            8:文本修饰属性  

                属性值：

                    none           去掉下划线

                    underline      下划线

                    overline       上划线

                    line-through   删除线（例如淘宝的标签价格）

            9：首行缩进  text-indent:

                text-indent:2em;

                text-indent能接收负值（悬挂缩进）

            10:字符间距  letter-spacing

            11:单词间距  word-spacing

            12:text-transform

                属性值:

                    capitalize   首字母大写

                    uppercase    全部大写

                    lowercase    全部小写