html5-html 字体标签 列表 表格 表单

金沙官网线上 1

html 字体标签 列表 表格 表单
一、字体标签
金沙官网线上,1、字体标签使用...表示
color属性:表示字体颜色
取值:英文 red blue yellow green black pink white
十六进制 #开头 前两位控制红色 中间两位控制绿色 后两位控制蓝色 #00 00 00 十六进制的取值0-F
face属性:字体格式 比如:宋体、微软雅黑
size属性:字体大小 取值:1-7 可以为负数,为负数字字体会变小,超出7以最大值为准
默认为3 (官方取值1-7,无特殊情况,不要使用负数)

 

加粗字:<b>...</b>标签中的内容字体会加粗斜体字:<i>...</i>标签中的内容字体会倾斜下划线字:<u>...</u>标签中的内容字体会有下划线

*http://html5doctor.com/nav
*http://html5doctor.com/article
*http://html5doctor.com/section
*http://html5doctor.com/aside
http://html5doctor.com/div
http://html5doctor.com/figure
http://html5doctor.com/outline
http://html5doctor.com/semantics

二、列表
1、有序列表 order list


表示有序列表
list item 列表元素

 

  1. type属性取值: 1 阿拉伯数字 默认 A 大写的英文字母 a 小写的英文字母 I 大写的罗马数字 i 小写的罗马数字2、无序列表 unordered list

      表示无序列表
    • list item 列表元素
      type属性取值:disc 实心圆 默认 circle 空心圆 square 实心方块 none 不修饰 一级默认实心圆 二级默认空心圆 三级默认实心方块3、自定义列表 definition list
      自定义列表
      自定义标题 definition title
      自定义描述 definition description
      ...

    p 和 span 的理解

    三、表格

    p标签是指一个段落,而且默认是一个块级元素,
    span是一个行内元素的代表,没有什么意思,一般可以放文字等行内元素
    
    <p>这是一段简介内容这是一段 简介 内容这是一段简介内容这是一</p>
    

    ...

     


     列表

    1、无序列表(列表标签中使用最多的一种,非常重要):unordered list

    制作导航条、商品列表、新闻列表等
    有序列表能做的,无序列表都能完成
    

    金沙官网线上 2金沙官网线上 3

    #1、作用:
    制作导航条、商品列表、新闻列表等
    #2、组合使用ul>li
        <ul>
            <li>秒杀</li>
            <li>优惠券</li>
            <li>PLUS会员</li>
            <li>闪购</li>
            <li>拍卖</li>
            <li>京东服饰</li>
            <li>京东超市</li>
            <li>生鲜</li>
            <li>全球购</li>
            <li>京东金融</li>
        </ul>
    
    #3、ul标签的属性type(这属于列表的样式,所以了解即可)
    type:列表标识的类型
            disc:实心圆(默认值)
            circle:空心圆
            square:实心矩形
            none:不显示标识
    可以通过css直接去掉小圆点
    <style type="text/css">
                ul {
                    list-style: none;
                }
    </style>
    
    #4、注意
    ul与li是组合标签应该一起出现,并且ul的子标签只应该是li,而li的子标签则可以是任意其他标签
    

    无序列表(列表标签中使用最多的一种,非常重要):unordered list

    2、有序列表(极少使用)

    金沙官网线上 4金沙官网线上 5

     <h1>智商排名</h1>
        <ol>
            <li>Egon</li>
            <li>刘清正</li>
            <li>武佩奇</li>
            <li>alex</li>
            <li>元昊</li>
        </ol>
    
        <!--有序列表能干的事,完全可以用无序列表取代-->
        <h1>智商排名</h1>
        <ul style="list-style: none">
            <li>1. Egon</li>
            <li>2. 刘清正</li>
            <li>3. 武佩奇</li>
            <li>4. alex</li>
            <li>5. 元昊</li>
        </ul>
    

    有序列表(极少使用)

    3、自定义列表(也会经常使用)

    金沙官网线上 6金沙官网线上 7

    #1、作用分析
    选择用什么标签的唯一标准,是看文本的实际语义,而不是看长什么样子
    无序列表:内容是并列的,没有先后顺序
    有序列表:内容是有先后顺序的
    自定义列表:对一个题目进行解释说明的时候,用自定义列表,可以做网站尾部相关信息,网易注册界面的输入框
    
    #2、自定义列表也是一个组合标签:dl>dt+dd
    dl:defination list,自定义列表
    dt:defination title,自定义标题
    dd:defination description,自定义描述
    <dl>
        <dt>自定义标题1<dt>
        <dd>描述1<dd>
        <dd>描述2<dd>
        <dd>描述3<dd>
    
        <dt>自定义标题2<dt>
        <dd>描述1<dd>
        <dd>描述2<dd>
        <dd>描述3<dd>
    
        <dt>自定义标题3<dt>
        <dd>描述1<dd>
        <dd>描述2<dd>
        <dd>描述3<dd>
    </dl>
     #3、注意: 3.1 dl>dt+dd应该组合出现,dl中只应该存放dt和dd,而可以在dt和dd中添加任意其他标签 3.2 一个dt可以可以没有对应的dd,也可以有多个,但建议一个dt对应一个dd
    

    3、自定义列表(也会经常使用)

     


     

    本文由金沙官网线上发布于Web前端,转载请注明出处:html5-html 字体标签 列表 表格 表单

    您可能还会对下面的文章感兴趣: