HTML简介及部分常用标签

最新推荐文章于 2024-07-20 18:16:53 发布

N_Peng

最新推荐文章于 2024-07-20 18:16:53 发布

阅读量290

点赞数

文章标签： HTML 前端

本文链接：https://blog.csdn.net/N_Peng/article/details/90342171

版权

一、HTML简介

1）HTML简介

HTML是⽤于创建⽹⻚的语⾔。我们通过使⽤HTML标记标签创建html⽂档来创建⽹⻚。 HTML代表超⽂
本标记语⾔。 HTML是⼀种标记语⾔，它具有标记标签的集合。
HTML标签是由尖括号括起来的词，如，。标签通常成对出现，例如和

。⼀对中的第⼀个标签是开始标签;第⼆个标签是结束标签。在上⾯的示例中，是开始标签，⽽是结束标签。我们还可以将开始标签称为起始标签，结束标签称为闭合标签。

2）HTML结构

HTML文件的结构如下：

<html>
    <head>...</head>
    <body>...</body>
</html>

在以上代码中：

1.< html >< /html >称为根标签，所有的网页标签都在< html >< /html >中。

2.< head >< /head>标签用于定义文档的头部，它是所有头部元素的容器。

3.< body >和< /body >标签之间的内容是网页的主要内容，如< h1 >,< p >,< a >,< img >等网页内容标签，在这里的标签的内容会在浏览器中显示出来。

二、HTML标签

1）<!DOCTYPE>——HTML 文档类型

不是 HTML标签，为浏览器提供一种信息（声明），声明HTML版本，以便浏览器正确显示HTML页面。必须放在HTML文档第一行。

如，HTML5声明为：

<!DOCTYPE html>

2）head头部标签

<head>
    
<!--HTML注释方法-->
    <title>...</title>
    <meta>
<!--
若网页出现乱码，则需在head标签之间使用<meat charset="utf-8">
-->
    <link>
    <style>...</style>
    <script>...</script>
</head>

3）body文本标签

3.1 段落标签 p

<p>段落1<p>
<p>段落2<p>
<p>段落3<p>
<!--
1.浏览器会自动在段落的前后添加空行
（<p>是块级元素，且必须有结束标签）
-->

3.2 标题标签 hx

<h1>标题</h1>
<h2>标题</h2>   
    ...
<h6>标题</h6>   
<!--
1.<h1>为最大的标题，<h6>为最小的标题
2.浏览器会自动在标题的前后添加空行（默认情况下，浏览器会自动在块级元素前后添加一个额外的空行，比如段落，标题元素前后）
-->

3.3 强调标签 em , strong

<em>em标签1</em>
<strong>strong标签2</strong>
<!--
1.<em>表示强调，<strong>表示更强烈的强调
在浏览器中，<em>用斜体表示，<strong>用粗体表示。
2.<em>和<strong>标签是强调一段话中的关键字时使用，它们的语义是强调。
3.<span>标签是没有语义的，它是为了设置单独样式用的，把一段话圈起来，然后用CSS设置样式。
-->

3.4 引用标签 q , blockquote

<q>短引用文本</q>
<blockquote>长引用文本</blockquote>
<!--
1.要引用的文本不用加双引号，浏览器会对引用标签里的内容自动添加双引号。
2.引用标签的真正意义在于：引用别人的话。
3.浏览器对<blockquote>标签的解析是缩进样式。
-->

3.5 换行标签 br/

<p>
    第一行<br/>第二行<br/>第三行<br/>
</p>
<!--
1.使用<br>换行也不会出错，但建议使用<br/>
-->

3.6 分割线标签 hr/

<p>
    第一行<br/><hr>第二行,两行之间以分割线隔开
</p>
<!--
1.<hr/>标签在浏览器中默认样式为灰色较粗的一根线条。
2.<br/>与<hr/>标签都是空标签，所以只有开始标签，无结束标签。
-->

3.7 特殊字符

<p>好好学习&nbsp;天天向上<br/>
&reg;<br/>
    &copy;<br/>
    &trade;
</p>
<!--
1.&nbsp; ——> 空格
	浏览器会自动忽略源代码中的排版（省略了多余的空格和换行）
2.&reg; ——> @  ——> 已注册图标
3.&copy; ——> © ——> 版权
4.&trade ——> ™ ——>商标

-->

3.8 地址标签 adress

<adress>地址信息</adress>
<!--
1.<adress>标签为网页加入地址信息
-->

3.9 代码标签 code, pre

<code>代码语言(单行)</code>
<pre>代码语言（多行）</pre>
<!--
1.<code>标签用来显示单行代码，如：int i = 0;
2.<pre>标签用来显示多行代码，如：
int a = 0;
int b = 1;
int c = a+b;
3.<pre>标签的主要作⽤:预格式化的⽂本。被包围在 pre 元素中的⽂本通常会保留空格和换⾏符。如果⽤以前的⽅法，回⻋需要输⼊<br>签，空格需要输⼊ &nbsp; 。而在<pre></pre>间的文本不需要。
4.<pre> 标签不只是为显示计算机的源代码时⽤的，在你需要在⽹⻚中预显示格式时都可以使⽤它，只是<pre>标签的⼀个常⻅应⽤就是⽤来展示计算机的源代码。
-->

3.10 汇总练习

针对这一部分标签，具体试用一下,代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html标签练习.上</title>
</head>
<h1>H1标题:练习使用段落，两种强调，（长/短）引用标签</h1>
<p>
    <strong>段落一</strong><br/>
2     <q>失败是成功之母</q><br/>
<blockquote>这是一个长引用，引用一段话：<br>
    HTML是⽤于创建⽹⻚的语⾔。我们通过使⽤HTML标记标签创建html⽂档来创建⽹⻚。 HTML代表超⽂
    本标记语⾔。 HTML是⼀种标记语⾔，它具有标记标签的集合。
</blockquote>
</p><hr/>
<strong><h2>H2标题：练习两种强调，换行，下划线标签</h2></strong>
<p>
    打印一首诗，试一试< em >和< strong ><br/>
    <em>床前明月光，(使用em)</em><br/>
    <strong>疑是地上霜。(使用strong)</strong><br/>
<em><strong>举头望明月，(使用em+strong)</strong></em><br/>
    低头思故乡。(未使用强调标签)<br/><hr/>
</p>
<h3>H3标题：练习使用特殊字符标签，地址标签，代码标签</h3>
<p>
    <strong>练习使用特殊字符</strong><br/>
    李&nbsp;白&nbsp;&nbsp;&nbsp;&reg;&nbsp;&nbsp;&nbsp;&copy;&nbsp;&nbsp;&nbsp;&trade;
    <!--输出结果应为：李（一个空格）白（三个空格）@（三个空格）©（三个空格）™--><br/>
    <em>练习使用地址标签</em><br/>
<adress>陕西省西安市</adress><br/>
    <strong>练习使用代码标签</strong><br/>
    <code>int i = 0;
        这是一行文本，换行需要&nbsp;br&nbsp;标签。
    </code>
<pre>
    int a = 0;
    int b = 1;
    int c = a+b;
    这是一段&nbsp;pre&nbsp;标签内部的代码/文本，
    它的换行不需要&nbsp;br&nbsp;标签。
</pre>
</body>
</html>

结果如下:
Html标签练习1

4）HTML列表标签

4.1 无序列表

<ul>
    <li>列表元素1</li>
    <li>列表元素2</li>
    <li>列表元素3</li>
</ul>
<!--
1.无序列表是一个项目的列表，此列项目使用粗体圆点进行标记。
2.无序列表始于<ul>标签，每个列表项始于<li>
3.列表项内部可以使用段落，换行符，图片，链接及其他列表等。
-->

4.2 有序列表

<ol>
    <li>列表元素1</li>
    <li>列表元素2</li>
    <li>列表元素3</li>
</ol>
<!--
1.有序列表也是一个项目的列表，此列项目使用数字进行标记。
2.无序列表始于<ol>标签，每个列表项始于<li>。
3.列表项内部可以使用段落，换行符，图片，链接及其他列表等。
-->

4.3 定义列表

<dl>
    <dt>列表元素1</dt>
    <dd>列表元素2</dd>
    <dd>列表元素3</dd>
</dl>
<!--
1.自定义列表以不仅仅是一列项目，而是项目及其注释的组合。
2.自定义列表以<dl>标签开始，每个自定义列表以<dt>开始。每个自定义列表项的定义以<dd>开始。
-->

4.4 列表标签练习

针对这一部分标签，试用一下,代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML标签练习.下</title>
</head>
<body>
<H3><strong>无序列表练习</strong></H3>
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
</ul>
<H3><em>有序列表练习</em></H3>
<ol>
    <li>juice</li>
    <li>tea</li>
    <li>coffee</li>
</ol>
<H3><strong><em>自定义列表练习</em></strong></H3>
<dl>
    举例：
    <dt>
    天上飞的：<br/>
    <dd>飞机</dd>
    <dd>小鸟</dd>
    </dt>
    <dt>
    地上跑的:<br/>
    <dd>汽车</dd>
    <dd>马</dd>
    </dt>
</dl>
<H3><strong>练习：写一个嵌套列表</strong></STRONG></H3>
<ul>
    <li>咖啡</li>
    <li>茶
        <ol>
            <li>红茶</li>
            <li>绿茶</li>
        </ol>
    </li>
    <li>牛奶</li>
</ul>
</body>
</html>

效果如下：
Html标签练习2

N_Peng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML简介及部分常用标签

一、HTML简介1）HTML简介HTML是⽤于创建⽹⻚的语⾔。我们通过使⽤HTML标记标签创建html⽂档来创建⽹⻚。 HTML代表超⽂本标记语⾔。 HTML是⼀种标记语⾔，它具有标记标签的集合。HTML标签是由尖括号括起来的词，如，。标签通常成对出现，例如和。⼀对中的第⼀个标签是开始标签;第⼆个标签是结束标签。在上⾯的示例中，是开始标签，⽽是结束标签。我们还可以将开...
复制链接

扫一扫