12月19日学号：478291 HTML基础知识总结-标签 - HTML基础

Community Learn Tools Library Leisure

English

Home > List of blog posts > 12月19日学号：478291 HTML基础知识总结-标签

Blogger Information

Blog 24

fans 4

comment 0

visits 20105

Special Recommendation

More>

Related recommendations

1.基本标签与语义化标签，知识点总结：

(1)<!doctype>：声明文档的类型，包括html、xml、xhtml
(2)<html></html>：网页的根元素，表示HTML文件的开始与结束，可以在该标签内设置当前网页的语言，包括en（英语)、zh-CN(中文)
(3)<head></head>：网页的头元素，在浏览器中无法直观的看到。主要作用对应于浏览器，在该标签中设置一些信息、关键词，有助于搜索引擎能够搜索到你的网页
(4)<meta>：设置网页的关键字以及字符编码集，如：utf-8、gb2312、gbk等
(5)<title></title>：设置网页的标题，可以在浏览器的最顶端的标题栏查看
(6)<body></body>：网页主体，即正文内容，展示在浏览器给用户看的部分
(7)<header></header>：页眉，通常包括网站标志、主导航、全站链接以及搜索框等。
(8)<nav></nav>：导航，包含一些文件或其他页面的链接
(9)<main></main>：页面主要内容，也可包含nav，一个页面只能够使用一次
(10)<article></article>：相当于文章一样的内容，可以article嵌套article
(11)<aside></aside>：侧边栏，一般包含指向文章的一组链接、广告、友情链接、相关产品列表等内容
(12)<footer></footer>：页脚，一般包含logo、备案信息、友情链接、版权等内容
(13)<section></section>：片段，具有相似主题的一组内容，可重复使用并不限制位置
(14)<div></div>：容器，用来对 html 文档的内容进行排版布局，可以把逻辑功能相对完整的内容作为一个区块

运行代码：

<!DOCTYPE html><!--文档类型-->
<html lang="en"><!--网页当前语言-->
<head><!--头元素-->
    <meta charset="UTF-8"><!--申明编码-->
    <title>基本标签</title><!--网页标题-->
</head>
<body><!--网页主体-->
    <header><!--页眉-->
        <nav><!--导航-->
            <a href="#">页面1</a><!--链接-->
            <a href="#">页面2</a>
            <a href="#">页面3</a>
            <a href="#">页面4</a>
        </nav>
    </header>
    <main>
        <article><!--文章-->
            <header>
                <h1>标题1</h1><!--标题-->
                <p>内容1</p><!--段落-->
            </header>
            <section><!--区块-->
                <h2>标题2</h2>
                <p>内容2</p>
            </section>
            <footer>
                <section>分页条</section>
            </footer>
        </article>
        <aside><!--侧边栏-->
            <ul>
                <li>推荐信息1</li>
                <li>推荐信息2</li>
                <li>推荐信息3</li>
                <li>推荐信息4</li>
                <li>推荐信息5</li>
            </ul>
        </aside>
        <aside><!--侧边栏-->
            <section>
                <h3>广告位招商</h3>
            </section>
        </aside>
        <section>
            <span>标签1</span>
            <span>标签2</span>
            <span>标签3</span>
        </section>
    </main>
    <footer><!--页脚-->
        <div class="link"><!--容器-->
            <a href="">链接1</a>
            <a href="">链接4</a>
            <a href="">链接3</a>
        </div>
    </footer>
</body>
</html>

运行结果：

2.基本文本标签，知识点总结：

(1)<span></span> ：行内元素，仅能包含行内元素，不可包含块元素，如div
(2)<p></p>：段落，不限制使用的位置
(3)<pre></pre>：可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。一个常见应用就是用来表示计算机的源代码。最好不要包含标签、段落等会导致段落断开的标签

运行代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本文本标签</title>
</head>
<body>
    <p>这是一个段落</p>
    <pre>
        这是一段源代码
    </pre>
    <p>这是第一段 <br> 这是第二段?</p>
    <span style="color: red">这是一段文字</span>
</body>
</html>

运行结果：

3图片元素，知识点总结：

(1)<img />：图片标签,为单标签，在网页上显示图片
(2)src：图片属性，内容为要显示的图片文件相对于当前网页文档的位置
(3)alt：图片属性，当图片不存在或图片出错时，页面显示的内容
(4)wdith/height：图片属性，设置图片的宽高，仅设置其中一项，图片也会对应的等比例缩放
(5)title：图片属性，当鼠标悬停在图片上时显示的文字

运行代码：

<img src="images/1.jpg" alt="狗与猫"><!-- 显示图片 -->
<img src="images/1.jpg" alt="狗与猫" width="300"><!-- 设置宽度，图片会自动等比例缩放 -->
<img src="images/11.jpg" alt="狗与猫" width="300"><!-- 当显示图片不存在或出错时，alt属性中的内容会被显示 -->

运行结果：

4.链接元素，知识点总结：

(1)<a></a>：链接标签
(2)href：属性，要跳转的新页面的地址。内容为url地址时，跳转至新的页面；当内容为文件地址时，则直接下载该文件；内容为mail:邮箱地址时，会自动打开邮箱客户端进行发送邮件的操作；内容为tel:电话号码时，则进行拨打电话的操作；当内容为#id时，则跳转至该id所指向的页面元素的位置（本页面），即锚点功能
(3)target：属性，新页面打开的方式。包括_self-当前页面，_bank-新窗口，_parent-父页面,_top-顶层窗口，name-指定名称的窗口

运行代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接元素</title>
</head>
<body>
<!--访问网页-->
<a href="www.baidu.com">百度</a>
<!--下载文件-->
<a href="demo5.rar">下载文档</a>
<!--发送邮件-->
<a href="mailto: 947641539@qq.com">发邮件</a>
<!--打电话-->
<a href="tel: 28392839">打电话</a>
<!--当前页面打开-->
<a href="www.baidu.com" target="_self">百度</a>
<!--在新的窗口中打开-->
<a href="www.baidu.com" target="_blank">百度</a>
<!--跳转到锚点元素所在位置-->
<a href="#hello" target="_parent">锚点</a>
<h1 id="hello" style="height: 1000px">Hello World！</h1>
</body>
</html>

运行结果：

5.列表元素，知识点总结：

(1)<ul></ul>：无序列表
(2)<ol></ol>：有序列表
(3)<dl></dl>：自定义列表
(4)<li></li>：列表项，配合ul，ol使用
(5)<dt></dt>：自定义标题，配合dl使用
(6)<dd></dd>：自定义内容，配合dl使用

运行代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表元素</title>
</head>
<body>
<!--无序列表-->
<ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">博客</a></li>
    <li><a href="#">视频</a></li>
</ul>
<!--水平分隔线-->
<hr>
<!--有序列表-->
<ol start="1" type="1">
    <li><a href="#">HTML标签</a></li>
    <li><a href="#">基本标签</a></li>
    <li><a href="#">语义化标签</a></li>
    <li><a href="#">文本标签</a></li>
    <li><a href="#">元素标签</a></li>
</ol>
<hr>
<!--自定义列表-->
<h2>友情链接</h2>
<dl>
    <dt>PHP中文网:</dt>
    <dd>
        <a href="php.cn">PHP中文网</a>
    </dd>
    <dt>百度:</dt>
    <dd>
        <a href="www.baidu.com">百度</a>
    </dd>
</dl>
</body>

运行结果：

6.表格元素，知识点总结：

(1)<table></table>：表格标签，定义表格显示的内容区域
(2)<caption></caption>：定义表格标题
(3)<thead></thead>：表头，即内容标题，如：序号等
(4)<tbody><tbody>：表格内容
(5)<tr></tr>：代表一行，有多少个tr标签代表多少行
(6)<td></td>：单元格，一行中有多少个td，代表有多少列
(7)border：表格属性，设置表格的边框
(8)width/height：表格属性，设置表格的大小
(9)cellpadding：表格属性，设置文本内容与单元格边框的距离
(10)cellspacing：表格属性，设置单元格之间的距离
(11)bgcolor：表格属性，设置背景色
(12)colspan：单元格属性，合并列，或者可以理解为向右合并单元格
(13)rowspan：单元格属性，合并行，或者可以理解为向下合并单元格
(14)align：设置对齐方式，表格与单元格都适用

运行代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格元素</title>
</head>
<body>
<table border="1" cellpadding="5" cellspacing="0" width="600" align="center">
    <!-- 表格标题-->
    <caption>商品清单</caption>
    <!-- 表头-->
    <thead bgcolor="red">
        <tr><!--行-->
            <th>编号</th><!--单元格-->
            <th>类别</th>
            <th>名称</th>
            <th>单价</th>
            <th>数量</th>
            <th>金额</th>
        </tr>
    </thead>
    <!-- 表格内容-->
    <tbody align="center">
        <tr>
            <td>1</td>
            <td rowspan="2">3C</td>
            <td>笔记本电脑</td>
            <td>8900</td>
            <td>1</td>
            <td>8900</td>
        </tr>
        <tr>
            <td>2</td>
            <td>数码单反相机</td>
            <td>13800</td>
            <td>1</td>
            <td>13800</td>
        </tr>
        <tr>
            <td>3</td>
            <td>服饰</td>
            <td>冠军卫衣</td>
            <td>1000</td>
            <td>2</td>
            <td>2000</td>
        </tr>
    </tbody>
    <!--底部-->
    <tfoot align="center">
    <tr>
        <td colspan="4">合计:</td>
        <td>4</td>
        <td>24700</td>
    </tr>
    </tfoot>
</table>
</body>
</html>

运行结果：

7.框架元素，知识点总结：

(1)<iframe></iframe>：框架标签
(2)frameborder：属性，设置边框
(3)src：属性，设置显示的网页的URL地址
(4)width/height：设置框架的大小
(5)name：属性，框架的名称，通过该属性可以实现点击链接<a>，显示不同的页面
(6)srcdoc：属性，可填写HTML标签

运行代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>
<!--显示网页内容-->
<iframe src="https://j.map.baidu.com/ef/_6" frameborder="0" width="500" height="400"></iframe>
<hr>
<!--通过链接元素切换显示不同页面-->
<ul style="float: left;margin-right: 15px;">
    <li><a href="demo6.html" target="content">列表元素</a></li>
    <li><a href="demo7.html" target="content">表格元素</a></li>
    <li><a href="demo5.html" target="content">链接元素</a></li>
</ul>
<iframe srcdoc="<h1>通过链接元素切换显示不同页面</h1>" frameborder="1" name="content" width="530" height="450"></iframe>
</body>
</html>

运行结果：

8.表单元素，知识点抄写：

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：写得极棒, 远超要求, 已推荐到群中了

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

1 comments

晚风 2019-12-20 19:55:25

教科书版的作业贼溜

1 floor

Author's latest blog post

12月19日学号：478291 HTML基础知识总结-标签

2019-12-20 15:51:35