HTML的基本结构及基本标签

首页 > 代码库 > HTML的基本结构及基本标签

HTML的基本结构及基本标签

2024-10-07 19:16:03 217人阅读

一、什么是HTML?

HTML:超文本标签语言

HTML:网页的源码

浏览器：“解释和执行”HTML源码的工具

二、HTML文档的结构：

（一）

1.<!DOCTYPE html>

HTML的文档类型声明，声明这个文档是html5文件，让浏览器按照HTML5准备进行解析显示，

文档声明在HTML文件中必须要有，而且必须写在文件最上方

2.

注释:写给程序员看的，网页中不会显示

HTML中注释的快捷键：Ctrl+/

（二）Head部分

1.<head>

head头部作用：用于描述网页的一些关键信息，比如网页的配置，设置，关键字等等...

这些信息，大多在浏览器看不到，但是对网页的解析至关重要！

2.<meta charset="utf-8" />

meta标签，用于描述网页的各种信息，

其中<meta charset="utf-8" />设置网页的编码格式为UTF-8格式

常见的中文编码格式：

GB2312：国标码，简体中文；

GBK：扩展的国标码，简体中文；

UFT-8：万国码，兼容各种语言编码，常用！！！！！！

①<meta name="keywords"content="杰瑞教育,网页开发">

设置网页关键字，有助于搜素引擎的搜索。

name="keywords"表示这个meta标签设置的是网页的关键字，

content=""表示关键字的详细信息，多个关键字，用英文逗号分隔；

②<meta name="description"content="这是我在杰瑞教育开发的第一个网页！">

设置网页的描述信息，搜索引擎搜索时，标题下面的一段文字！非常重要！！！

name="description"表示这个meta标签设置的是网页的描述信息；

content=""表示描述信息的详细内容！！！

3.<title>这是我的第一个网页！</title>

title：网页的标题，显示在浏览器选项卡上面的文字

4.<link rel="icon"href="http://www.mamicode.com/img/icon.jpg"/>

链接网页的小图标：网页选项卡上的小图片

rel="icon"表示当前link的作用，是链接网页图标；

href="http://www.mamicode.com/img/icon.jpg"表示图标的地址在何处

!DOCTYPE html>
<html>
    <head>        
        <meta charset="utf-8" />
        <meta name="keywords"content="杰瑞教育,网页开发">
        <meta name="description"content="这是我在杰瑞教育开发的第一个网页！">
        <title>这是我的第一个网页！</title>
        <link rel="icon"href=http://www.mamicode.com/"img/icon.jpg"/>
        </head>
    <body>
        
    </body>
</html>

（三）基本块级标签

HTML标签的分类：

块级标签：显示为块状，独占一行，自动换行。

行级标签：在一行中，从左往右依次排列，不会自动换行。

1.标题标签

h标签：标题标签，显示为黑体加粗

标题标签，共分为6种：h1-h6，h1最大，h6最小

2.分割线标签

hr标签：表示一条水平线

3.段落标签

p标签：表示段落标签，相当于我们文章中的一段文字

4.换行标签

<br/>：换行符

注意：在代码中，直接回车换行，浏览器并不认识，必须使用<br/>告诉浏览器这里要断行

5.预格式

pre标签：预格式标签。会保留代码中的空格，回车等符号，直接在浏览器显示

pre标签常用于在网页中显示代码，保留代码格式！！

6.块引用标签<blockquote cite="http://www.baidu.com"></blockquote>

blockquote：块引用标签。表明一段话是从其他网站引用的

有一个重要属性：cite=""表示这段话的引用来源，常放一个网站地址，但是浏览器显示并没有任何区别

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <h1>这是h1标签</h1>
        <h2>这是h2标签</h2>
        <h3>这是h3标签</h3>
        <h4>这是h4标签</h4>
        <h5>这是h5标签</h5>
        <h6>这是h6标签</h6>
        <hr/>
        <p>这是一段文字这是一段文字这是一段文字<br/>这是一段文字这是一段文字这是一段文字</p>
        <p>这是一段文字这是一段文字这是一段文字<br/>这是一段文字这是一段文字这是一段文字</p>
        

        <pre>
             这是一段文字
                    这是一段文字
                    这是一段文字
                    这是一段文字
        </pre>
        <!--
            pre标签：预格式标签。会保留代码中的空格，回车等符号，直接在浏览器显示
            pre标签常用于在网页中显示代码，保留代码格式！！
        -->
        <blockquote cite="http://www.baidu.com">
            光明正大的抄你的！
        </blockquote>

    </body>
</html>

（四）、基于布局的块级标签

1、无序列表

有多个列表项组成，每个列表项前面带小黑点，称为无序列表。

无序列表用<ul>表示，列表中的每一项用<li>表示

2.有序列表

有序列表用<ol>表示，标签中的每个列表项用<li>表示

3、定义列表（定义描述列表）

定义列表<dl>，里面有一个标题<dt>，有多个描述项<dd>，

标题默认顶格显示，描述项相对标题向后缩进显示。

4、图片组合标签

组合标签<figure>里面有两部分：

①图片<img/>后续讲解

②图片的标题<figcaption></figcaption>

5、分区标签div（最常用标签）

div标签没有任何的特殊作用，仅仅起到一个包裹内容的作用。常用于网页中划分区块

div标签中可以包裹任何内容，需配合css一起使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <ul>
            <li>这是无序列表第一项</li>
            <li>这是无序列表第二项</li>
            <li>这是无序列表第三项</li>
            <li>这是无序列表第四项</li>
        </ul>
        <ol>
            <li>这是有序列表第一项</li>
            <li>这是有序列表第二项</li>
            <li>这是有序列表第三项</li>
            <li>这是有序列表第四项</li>
        <dl>
            <dt>这是dl列表的标题</dt>
            <dd>这是dl列表的描述项1</dd>
            <dd>这是dl列表的描述项2</dd>
            <dd>这是dl列表的描述项3</dd>        
        </dl>
        <figure>
            <img src=http://www.mamicode.com/"img/icon.jpg"/>
            <figcaption>图片的描述标题</figcaption>
        </figure>
        <div style="width:500px;height:100px;background-color:yellow ;">
            这是div里面的文字
            <p>11111</p>
        </div>
    </body>
</html>

三、基本行级标签

（一）【块级标签与行级标签的区别】

1、块级标签：默认宽度100%（占满一行）；

块级标签自动换行（独占一行，右边不能有任何东西）；

可以使用css设置宽度高度

2、行级标签：默认宽度由内容撑开（内容多宽，宽度就占多宽）；

行级标签不会自动换行（一行当中，从左往右依次排列）；

宽度高度不能设置

（二）【常见的行级标签】

1、span标签：①只是包裹作用，没有其他任何含义；

②span作用与div类似，需配合CSS使用。只不过div是块级标签，span是行级标签

2、【em/strong i/b区别】

①em和i都能倾斜，strong和b都能加粗。但是，i和b仅仅是单纯的倾斜加粗，而em和 strong多了强调的语义。

②em和strong都表示强调，但是strong强调的级别更高

注意：

①强调的目的：让搜索引擎知道网页重点强调的内容！便于搜索引擎显示！

②strong和em都可以多层嵌套，表示强调程度的递增！

3、q标签

q标签：表示短引用

cite属性：用于声明引用的来源

【常用引用标签】

<blockquote>用于引用一段内容</blockquote>

<q>用于引用一句话</q>

<cite>常用于引用作品名、书画名等</cite>

相同点：三个引用标签，都用city属性表示引用来源

不同点：①引用内容不同

blockquote->一段话，q->一句话，city->作品名

②显示的默认效果不同

blockquote->默认整段向右缩进；

q->默认加引号；

city->默认倾斜

4、small和big

small标签：将字体缩小一号；

big标签：将字体放大一号

注意：

①small和big可以多层嵌套，直到字体达到最小或最大为止

②这俩标签已经被淘汰，并不建议使用

5、img图片标签：

①src属性：表示图片的路径

-【图片路径的合法方式】

- a、网络连接：由于图片在其它网站，如果其他网站删除图片，我们也不能访问，所以不建议使用这种方式

b、绝对路径：使用绝对路径的图片，只有在本机使用file协议才能访问！所以严禁使用这种方式

c、相对路径：

①图片与当前文件在同一层文件夹：直接写图片名

②图片在当前文档的下一层文件夹：文件夹名/图片名

③图片在当前文档的上一层文件夹：../图片名（../表示后退一层）

但是，一定要注意：图片必须包含在项目里面，不能访问项目外的图片。

②height:图片的高度 width:图片的宽度

③title：图片的标题，鼠标指上后看到的提示文字

④alt:图片无法加载时显示的文字

⑤align:图片周围的文字相对于图片如何对齐

可选值：top->图片顶部center->图片中部bottom->图片底部

<img src="http://www.mamicode.com/img/icon.jpg"align="bottom"/>12345

6.超链接标签a

①href属性：表示超链接需要跳转的页面

a.可以写网络地址：

<a href="http://www.baidu.com">这是一个超链接</a>

b.可以打开本地html文件：

采用相对路径确定文件地址，与img标签确定方式相同

<a href="http://www.mamicode.com/02-HTML-基本块级标签.html">这是一个超链接</a>

②title属性：鼠标指上后显示的提示文字

<a href="http://www.baidu.com"title="hhh">这是一个超链接</a>

③target属性：设置新页面打开的窗口位置

可选值：_self自身页面打开（默认）_blank新窗口打开

<a href="http://www.baidu.com"target="_blank">这是一个超链接</a>

④rel属性：声明即将跳转的文件与当前文件的关系

rel="prev":即将打开的页面是当前页面的前一篇；

rel="next":即将打开的页面是当前页面的后一篇

<a href="http://www.mamicode.com/next.html"rel="next">下一篇文章</a>

这个属性设置以后对用户没有任何作用，但多搜索引擎是友好的，搜索引擎在抓取网页时，可以很清楚的知道网页中的上下文结构关系

【超链接的特殊应用】

1.功能性连接（了解）：

mailto://点击链接给指定邮箱发送邮件

<a href="mailto://jianghao@jrel.com">点击链接发封邮件</a>

tencent://message/?uin=251241143点击与指定QQ聊天

还有：tell://手机端点击打电话

message://手机端点击发送短信

ftp://使用ftp协议进行文件的上传下载

2.锚链接：

>>>本页面锚链接

①在页面的指定位置设置一个锚点，用name属性表示锚点的名字

②将超链接的href属性，设置为#加锚点名字

<a href="http://www.mamicode.com/#top">点击链接，跳转到top锚点位置</a>

>>>页面间锚链接

①在新页面的指定位置设置一个锚点，用name属性表示锚点的名字

②将超链接的href属性，设置为新页面地址#加锚点名字

<a href="http://www.mamicode.com/text.html#top">点击链接，跳转到text.html的top锚点位置</a>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <a name="top"></a>
        江汉真<span style="color: red;font-size:48px ;">帅</span><br />
        <em>这是em标签</em><br />
        <strong>这是strong标签</strong><br />
        <i>这是i标签</i><br />
        <b>这是b标签</b><br />
        <u>这是u标签</u><br />
        <q cite="http://www.666666.com">我是q标签引用</q>
        <blockquote>我是blockquote的引用</blockquote>
        <cite>我是city标签的引用</cite><br />
        <small>我比正常小一号</small><br />
        <big>我比正常大一号</big><br />
        <img src=http://www.mamicode.com/"https://www.baidu.com/img/bd_logo1.png"/>
        <img src=http://www.mamicode.com/"img/icon.jpg"height=""width=""title="鼠标指上后看到的提示文字"alt="图片无法加载时看到的文字"align="bottom"/>12345
        <img src=http://www.mamicode.com/"../icon.jpg" /><br />
        <div style="height: 800px;background-color: red;"></div>
        
        <a href=http://www.mamicode.com/"http://www.baidu.com"title="hhh"target="_blank">这是一个超链接</a>
        <a href=http://www.mamicode.com/"mailto://jianghao@jrel.com"title="hhh"target="_blank">点击链接发封邮件</a>
        
        <a href=http://www.mamicode.com/"#top">点击跳转到顶部！</a>
        
        <a href=http://www.mamicode.com/"img/text.html#one">点击跳到新页面第一部分</a>
        <a href=http://www.mamicode.com/"img/text.html#two">点击跳到新页面第二部分</a>
        <a href=http://www.mamicode.com/"img/text.html#three">点击跳到新页面第三部分</a>
        <a href=http://www.mamicode.com/"img/text.html#four">点击跳到新页面第四部分</a>
    </body>
</html>

w3c规范：

1.w3c:万维网联盟，负责制定和维护web行业开发标准；

2.w3c要求的规范：

①w3c规范中倡导的两个分离:

内容与表现分离：（HTML与css分离）

内容与行为分离：（HTML与JavaScript分离）

②HTML语言要遵循语义化

③关于代码书写的规范：

HTML中的标签与属性必须要小写；

HTML中的标签必须要闭合；

属性值必须用引号引起来；

HTML标签必须正确嵌套

四、表格

表格用table表示，表格中的每一行用tr表示，一行中的每一列用td表示

th:表示表头，表头中的文字默认为加粗居中，th要放在tr中，用于替换td

（一）table的常用属性

1.border：给表格加边框。默认给所有td加边框，并且给整个table加外边框，当增大 border的值时，td上的边框不变化，只有最外层大边框变宽

2.cellspacing：单元格与单元格之间的距离。

【注意】表格边框线合并的css写法:

style="border-collapse：collapse;"

这条css与cellspacing="0"有什么区别？

cellspacing="0"仅仅是将单元格之间的距离调整为0，实际上单元格之间依然还是两条线

border-collapse：collapse；试讲表格相邻的两条边框进行合并处理，只有一条线存在

（一旦边框合并，collapse属性将会失效）

3.cellpadding:单元格中的文字与单元格边框的距离

4.height:表格的高度

width:表格的宽度

使用表格宽高属性设置大小：

使用css样式设置大小：

5.align:设置表格在浏览器中的位置，不建议使用了。

可选值：left/center/right

6.bgcolor:背景色

bordercolor：边框颜色

background：背景图

背景图和背景色同时存在时，背景图会覆盖背景色

（二）tr与td常用属性

1.width：单元格宽度

height：单元格高度

2.bgcolor：单元格颜色

3.align：设置单元格中的文字，水平对齐方式

left/center/right

Valign：设置单元格中的文字，垂直对齐方式

4.nowrap="nowrap"当单元格文字过多时，设置单元格文字不断行显示。但是，

会把表格的宽度撑大

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <table border="1"cellspacing="0"style="border-collapse: collapse;"
            cellpadding="15"bgcolor=""bordercolor=""background="">
            <tr>
                <th>标题一</th>
                <th>标题二</th>
                <th>标题三</th>
            </tr>
            <tr>
                <td align="right"valign="bottom">1-1</td>
                <td>1-2</td>
                <td>1-3</td>
            </tr>
            <tr>
                <td>2-1</td>
                <td>2-2</td>
                <td>2-3</td>
            </tr>
        </table>
        
        
        <table border="1">
            <tr>
                <th>标题一</th>
                <th colspan="2">标题二</th>
            </tr>
            <tr>
                <td rowspan="2">1-1</td>
                <td>1-2</td>
                <td>1-3</td>
            </tr>
            <tr>
                <td>2-2</td>
                <td>2-3</td>
            </tr>
        </table>
    </body>
</html>

HTML的基本结构及基本标签

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > HTML的基本结构及基本标签

HTML的基本结构及基本标签

看完仍有疑问？有类似问题直接问程序猿