铺垫、头信息、常用标签

最新推荐文章于 2025-08-16 09:42:10 发布

原创最新推荐文章于 2025-08-16 09:42:10 发布 · 320 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #html头信息 #html标签

HTML 专栏收录该内容

4 篇文章

订阅专栏

一、铺垫：
1、JavaSE、JavaEE区别：
JavaSE java标准开发平台 C/S 客户端/服务器
JavaEE java企业级开发平台。B/S 浏览器/服务器购物商城

2、域名通过被DNS域名解析器解析成IP地址，从而访问服务器（三大要素：IP、端口号、协议）

3、HTML
1、Hyper Text Mark Language 超文本标记语言（标签）
2、以.html（.htm .mht .html）为后缀的文本文件。早期的windows系统仅识别三位后缀名。
3、标记语言：以固定标记和文本组成的文本文件。W3C 万维网联盟。整合资源：文字信息、图片信息、音频视频信息、文件。

二、头信息的作用：
1. 可以设置网页的标题。
2. 可以通知浏览使用指定的码表解析html页面。
举例：

效果显示：

三、html常用的标签：
1、学习标记的含义：
1）规则：<关键字></关键字>
关键字不区分大小写 W3C建议使用小写的形式（微软建议大写）。
标签一般都是成对出现的。前面的叫开始标签，后面叫结束标签。对称结构嵌套标签。

2、<h1>~<h6> 表示是一个标题
3、<p> 段落标签
4、<hr/> 水平线标签
5、<br/> 换行标签
6、<sub> 下标
7、<sup> 上标

举例1：

结果：

7、<pre> 原样标签：原样标签会保留空格和换行符。
8、<ol> <li> 有序的列表标签、
9、<ul> <li> 无序的列表标签。

举例2：

结果：

10、项目列表标签(dl dt dd) dt、dd均写在dl下，虽然写的时候dt、dd没有从属关系，但是显示出来的时候，dd会相对dt靠后一个TAB键的大小
11、行内标签(span)
12、块标签<div> div标签的内容会独立占一行。

举例3：

结果：

最后两个标签看似无用，但是当接触了css和javascript后作用就会显现了。而且有这样的一种布局格式叫做，css+div的布局格式。

完整代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <h1>第一级标题</h1><h2>第二级标题</h2><h3>第三级标题</h3>
    <h4>第四级标题</h4><h5>第五级标题</h5><h6>第六级标题</h6>
    <hr/>
    <p><!--&nbsp;空格  -->
        今天心情不错；今天心情不错；今天心情不错；今天心情不错；今天心情不错；今天心情不错；今天心情不错；今天心情不错；
        今天心情不错；今天心情不错；今天心情不错；今天心情不错；今天心情不错；今天心情不错；
        今天心情不错；今天心情不错；今天心情不错；今天心情不错；今天心情不错；今天心情不错；<br/>
        &nbsp;&nbsp;今天心情不错；今天心情不错；今天心情不错；今天心情不错；今天心情不错；今天心情不错；今天心情不错；今天心情不错；
        今天心情不错；今天心情不错；今天心情不错；今天心情不错；今天心情不错；
    </p>
    水的化学式：H<sub>2</sub>O
    <br/>
    2的16次方：2<sup>16</sup>
    <pre>
                                       静夜思
                                床前明月光，疑是地上霜。
                                举头看屏幕，低头写代码。
    </pre>
    应该怎么学习呢？
    <ol type="a">
        <li>早上学</li>
        <li>下午学</li>
        <li>晚上学</li>
    </ol>
    你能选择的公司有？
    <ul type="square">
        <li>百度</li>
        <li>华为</li>
        <li>腾讯</li>
    </ul>
     公司的组成：
    <dl>
        <dt>项目部</dt>
        <dd>项目经理</dd>
        <dd>程序员1</dd>
        <dd>程序员2</dd>
        <dd>程序员3</dd>
        <dt>人事部</dt>
        <dd>HR1</dd>
        <dd>HR2</dd>
    </dl>
    <span>好好学习<div>天天向上</div></span>
</body>
</html>