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

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    全部小写

posted @ 2020-02-22 16:57  Animy开发  阅读(360)  评论(0)    收藏  举报