ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2020-02-22 17:04:02  阅读:241  来源: 互联网

标签:某某 font 入门 标签 新闻标题 文本 文本属性 属性


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

标签:某某,font,入门,标签,新闻标题,文本,文本属性,属性
来源: https://www.cnblogs.com/Animy/p/12346109.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有