HTML5基础：框架，文字，图片，表格，列表

原创已于 2022-07-31 22:11:37 修改 · 381 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #html

于 2022-07-31 20:59:26 首次发布

前端专栏收录该内容

53 篇文章

订阅专栏

这篇博客详细介绍了HTML的基础框架和常用元素，包括标题、段落、特殊字体、分块、图片、链接、列表、表格等。通过实例展示了如何创建网页结构，帮助读者巩固和加深对HTML语法的理解。

主要是对基础进行复习加深印象

基础框架，VS code 输入！可自动输入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

标题段，分别对应1,2,3,4级标题：

<h1>XXXXXXXX</h1>
<h2>XXXXXXXX</h2>
<h3>XXXXXXXX</h3>
<h4>XXXXXXXX</h4>

段落：

<p>XXXXXXXXX</p>

下一行：

<br/>

特殊字体，分别对应：

加粗、倾斜、删除线、下划线

<strong>XXXXXX</strong>
<bm>XXXXXX</bm>
<del>XXXXXX</del>
<ins>XXXXXX</ins>

分块,div表示整行分块，span表示小块分块：

<div>XXXXX</div>
<span>XXXXX</span>

图片：

<img scr="image/11.jpg" width="100" >

链接,XXXXX可以是文本图片等,target表示前往新网站的类型，默认为将现有网站变换为新网站，_blank表示打开一个新的浏览器网页加载

<a href="http://www.baidu.com" target="_blank">XXXXXXX</a>

对同一网页内的链接，下文中需要出现同样的id :

<a href="#live" target="_blank">XXXXXXX</a>



<h1 id=live>XXXX</h1>

列表：

无顺序列表：

    <ul>
        <li>溜了</li>
        <li>撒1</li>
        <li>破损</li>
    </ul>

有顺序列表：

    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>

自定义列表：

    <dl>
        <dt>关注我们</dt>
        <dd>新浪微博</dd>
        <dd>联系我们</dd>
    </dl>

表格：

基础框架，<tr>表示行，<td>表示单元格，下面表示两行三列的表格

<table width="20" align="center" border="1" cellpadding="20" cellspacing="0">
    <tr>
        <td>XX</td><td>XX</td><td>XX</td>
    </tr>
    <tr>
        <td>XX</td><td>XX</td><td>XX</td>
    </tr>
</table>

也可以将<td>换为<th>表示头行（自动加粗）

<tr>
    <th>排名</th><th>关键词</th><th>趋势 </th><th>今日搜索</th><th>最近七日 </th><th>相关链接 </th>
</tr>

为了更好的区分头行部分与身体部分，可以设置分区<thead>,<tbody>:

    <table width="20" align="center" border="1" cellpadding="20" cellspacing="0">

        <thead>
            <tr>
                <th colspan="6">自我介绍</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>排名</th><th>关键词</th><th>趋势 </th><th>今日搜索</th><th>最近七日 </th><th>相关链接 </th>
            </tr>
            <tr>
                <td>1</td><td>鬼吹灯</td><td><img scr="image/11.jpg" width="100"></td><td>345</td><td>123</td><td><a href="http://www.baidu.com" target="_blank">百度</a></td>
            </tr>
        </tbody>
    </table>

上面的 colspan=“6”表示合并六个单元格（列），如果以合并行的单元格则为rowspan=“6”（对右边或者对下面进行合并）

<th colspan="6" rowspan="6">自我介绍</th>