HTML-2

作者: Wonder茂茂 | 来源:发表于2017-12-07 13:53 被阅读0次

    列表

    有序、无序和定义列表

    无序列表

    无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。开始于<ul></ul>标签,列表项为<li></li>

    <ul>

    <li>Wonder</li>

    <li>maomao</li>

    </ul>


    • Wonder
    • maomao

    有序列表

    开始于<ol></ol>标签,列表项为<li></li>

    <ol>

    <li>Wonder</li>

    <li>maoamo</li>

    </ol>


    1. Wonder
    2. maoamo

    定义列表

    自定义列表不仅仅是一列项目,而是项目及其注释的组合。

    自定义列表以<dl></dl>标签开始。每个自定义列表项以<dt></dt>开始。每个自定义列表项的定义以<dd></dd>开始。


    <dl>

    <dt>Wonder</dt>

    <dd>奇迹</dd>

    <dt>maomao</dt>

    <dd>茂茂</dd>

    </dl>


    Wonder奇迹maomao茂茂


    块元素

    块级元素在浏览器显示时,通常会以新行来开始(和结束)

    例如:<h1>,<p>,<ul>,<table>,<div>

    内联元素

    内联元素在显示时通常不会以新行开始

    例如:<b>,<td>,<a>,<img>,<span>

    网站布局

    HTML5          语义元素

    header          定义文档或节的页眉

    nav                定义导航链接的容器

    section          定义文档中的节

    article            定义独立的自包含文章

    aside              定义内容之外的内容(比如侧栏)

    footer              定义文档或节的页脚

    details              定义额外的细节

    summary          定义 details 元素的标题


    实例

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    #header{

    background-color:black;

    color:white;

    text-align:center;

    padding:5px;

    }

    nav{

    line-height:30px;

    background-color:#eeeeee;

    height:800px;width:100px;float:left;padding:5px;

    }

    section{

    width:350px;float:left;padding:10px;

    }

    footer{

    background-color:black;

    color:white;

    clear:both;

    text-align:center;

    padding:5px;

    }

    </style>

    </head>

    <body>

    <div id="header">

    <h1>茂茂专属</h1>

    </div>

    <nav>

    前端学习<br>

    爱好<br>

    游戏<br>

    </nav>

    <section>

    <h1>前端学习</h1>

    <h3> HTML阶段 </h3>

    <p>

    HTML文档结构——段落标签——文字标签——图片标签——超链接标签——列表标签——表格标签——表单标签——框架标签——HTML5新增标签和属性(表单标签——canvas标签——媒体标签)

    </p>

    <h3> CSS阶段 </h3>

    <p> CSS语法——CSS选择器(ID选择器——类选择器——符合选择器)——CSSS样式(背景——文本——字体——链接——列表——表格)——盒子模型(边框——外边框——内边框)——CSS定位(相对定位——绝对定位——浮动)——CSS3新增属性——CSS布局实战 </p>

    <h3> JavaScript阶段 </h3>

    <p> 基本语法——变量——数据类型——函数——运算符——流程控制——JS对象(String对象——Array对象——Date对象——Window对象——Document对象)——DOM操作——JS和CSS综合操作 </p>

    </section>

    <footer>

    http://m.wondermaomao.faisco.cn/manage/mobiDesign.jsp

    </footer>

    </body>

    </html>

    #header{background-color:black;color:white;text-align:center;padding:5px;}nav{line-height:30px;background-color:#eeeeee;height:800px;width:100px;float:left;padding:5px;}section{width:350px;float:left;padding:10px;}footer{background-color:black;color:white;clear:both;text-align:center;padding:5px;}

    茂茂专属

    前端学习
    爱好
    游戏

    前端学习

    HTML阶段

    HTML文档结构——段落标签——文字标签——图片标签——超链接标签——列表标签——表格标签——表单标签——框架标签——HTML5新增标签和属性(表单标签——canvas标签——媒体标签)

    CSS阶段

    CSS语法——CSS选择器(ID选择器——类选择器——符合选择器)——CSSS样式(背景——文本——字体——链接——列表——表格)——盒子模型(边框——外边框——内边框)——CSS定位(相对定位——绝对定位——浮动)——CSS3新增属性——CSS布局实战

    JavaScript阶段

    基本语法——变量——数据类型——函数——运算符——流程控制——JS对象(String对象——Array对象——Date对象——Window对象——Document对象)——DOM操作——JS和CSS综合操作

    http://m.wondermaomao.faisco.cn/manage/mobiDesign.jsp

    相关文章

      网友评论

          本文标题:HTML-2

          本文链接:https://www.haomeiwen.com/subject/vysdixtx.html