html入门新手笔记1

绝对路径和相对路径

 

1. 绝对路径：就是你的文件或目录在硬盘上的真正的路径例如“bg.jpg”这个图片是存放在硬盘的“E:\img”目录下，那么 “bg.jpg”这个图片的绝对路径就是“E:\img\bg.jpg"

2. 相对路径：顾名思义，相对路径就是相对于当前文件的路径。网页中一般表示路径都用这个方法，例如在“s1.html” 文件里引用了“bg.jpg”图片，由于“bg.jpg”图片相对于“s1.html”来说，是在同一个目录下的，那么要在“s1.html”文件里使用以下代 码后，只要这两个文件的相对位置没有变(也就是说还是在同一个目录内)，那么无论上传到Web服务器的哪个位置，在浏览器里都能正确地显示图片。再举一个例子，假设“s1.html”文件所在目录为“E:\html”下面，而“bg.jpg”图片所在目录为“E:\html\img”，那么“bg.jpg”图片相对于“s1.html”文件来说，是在其所在目录的“img”子目录里，则引用图片的路径应该为：img/bg.jpg 。

列表标签

  列表标签表格：

无序列表：

<!-- 设置空心圆符号 -->
    <ul type="circle">
        <li>Maxime incidunt temporibus mollitia?</li>
        <li>Reprehenderit optio quibusdam ad.</li>
        <li>Natus labore impedit placeat?</li>
        <li>Tenetur rerum illum repellat!</li>
        <li>Ipsum officia laudantium distinctio!</li>
    </ul>
    <!-- 设置实心方块符号 -->
    <ul type="square">
        <li>Veritatis id voluptatem vitae.</li>
        <li>Accusamus corrupti voluptate officiis?</li>
        <li>Exercitationem voluptatibus alias quod.</li>
        <li>Aut cumque ipsa dignissimos.</li>
        <li>Distinctio commodi eaque soluta?</li>
    </ul>

效果：

无序列表可以type属性对排序样式进行设置，默认样式为空。

有序列表：

<!-- 默认排序样式 -->
    <ol>
        <li>HTC区块链手机</li>
        <li>军运会奖牌榜第一</li>
        <li>切尔西1-0纽卡</li>
        <li>微信钱包银行储蓄</li>
        <li>小学生偷开奥迪</li>
    </ol>
    <!-- 按大写字母排序 -->
    <ol type="A">
        <li>HTC区块链手机</li>
        <li>军运会奖牌榜第一</li>
        <li>切尔西1-0纽卡</li>
        <li>微信钱包银行储蓄</li>
        <li>小学生偷开奥迪</li>
    </ol>

效果：

有序列表同样可以用type属性对排序样式进行设置，默认样式为数字。

自定义列表：

<dl>
        <dt>计算机
            <dd>Lorem, ipsum dolor.</dd>
        </dt>
        <dt>CPU
            <dd>Quasi, aut beatae.</dd>
        </dt>
        <dt>主板
            <dd>Quam, assumenda fugit.</dd>
        </dt>
    </dl>

效果：

自定义列表：一般用于名词解释。dl，defined list；dt，表示关键字（词）；dd，表示对dt的描述内容