HTML5基础（一）——元素、属性、格式化、样式、链接、表格、列表、块、布局

本文链接：https://blog.youkuaiyun.com/Metis100/article/details/44676777

这篇博客是作者学习HTML5的笔记，主要介绍了HTML的基本元素、属性、格式化、样式设置、链接、表格、列表和布局。文章中提到了使用Intellij IDEA或HBuilder作为开发工具，并提及了学习了如何引入样式文件如mystytle.css和div.css，但更多的CSS样式将在后续学习中探讨。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开始学习html5,自己记录学习笔记，基本上是代码：
开发工具：Intellij IDEA或者HBuilder
首先学习的自然是html标签语言，其实w3cschool中都有，我上传了W3Cschool电子版可以下载看更全面。
第一天，基本标签使用：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>元素、属性、格式化、样式、链接、表格、列表、块、布局</title>
    <!--本地样式链接-->
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <link rel="stylesheet" type="text/css" href="div.css">
    <!--段落的样式-->
    <style type="text/css">
        p{
            color: aqua;
        }
    </style>
    <!--id为span的样式-->
    <style type="text/css">
        span{
            color: blueviolet;
        }
    </style>
</head>
<body background="">
    <h1 align="right">标题</h1>
    <p >第一段</p>
    <p style="color: bisque"><b>第二</b><br/><i>二段</i><strong>二段</strong><sub>e</sub>二段<ins>二段</ins><del>二段</del></p>
    <!--超链接-->
    <a href="http://www.ctrip.com/?allianceid=1328&sid=1643&ouid=000401app-&utm_medium=&utm_campaign=&utm_source=&isctrip=" target="_blank">旅游</a>
    <a href="http://www.ctrip.com/?allianceid=1328&sid=1643&ouid=000401app-&utm_medium=&utm_campaign=&utm_source=&isctrip=" target="_blank">
     <img src="img/129.jpg" width="200px" height="200px" alt="html5logo">
    </a>
<!--表格-->
    <table border="1" cellpadding="20px" cellspacing="10xp" background="img/129.jpg">
        <caption>表格</caption>
         <tr>
            <th>表头1</th> <th>表头2</th>
         </tr>
         <tr>
            <td></td><td>单元格2</td>
         </tr>
        <tr>
            <td>单元格1</td><td>单元格2</td>
        </tr>
    </table>
<!--表格嵌套-->
<table border="1">
    <caption>表格</caption>
    <tr>
        <th>表头1</th> <th>表头2</th>
    </tr>
    <tr>
        <td>
            <ul>
                <li>1</li><li>2</li><li>3</li>
            </ul>
        </td>
        <td>
            <ol>
                <li>1</li><li>2</li><li>3</li>
            </ol>
        </td>
    </tr>
</table>
<!--无序列表-->
<ul type="circle">
    <li>a</li>
    <ul> <li>aj fa</li><li>aghlkaj</li></ul>
    <li>b</li>
    <ul> <li>aj fa</li><li>aghlkaj</li></ul>
    <li>c</li>
</ul>
<!--有序列表-->
<ol type="circle">
    <li>a</li>
    <ul> <li>aj fa</li><li>aghlkaj</li></ul>
    <li>b</li>
    <ul> <li>aj fa</li><li>aghlkaj</li></ul>
    <li>c</li>
</ol>
<!--其他列表-->
<dl>
    <dt>helloworld</dt>
    <dd>每个语言都要答</dd>
    <dt>helloworld</dt>
    <dd>每个语言都要答</dd>
    <dt>helloworld</dt>
    <dd>每个语言都要答</dd>
</dl>

<!--快-->
<p>大家好</p>
<h1>加好</h1>
<div id="divid">
    <a>大家好div样式</a>
</div>
<div id="p">
  <p>这是个什么测绘<span>hahhahhah</span></p>
</div>
</body>
</html>

样式文件：mystytle.css