[HTML] HTML基础知识

已于 2023-01-22 18:12:08 修改
阅读量2.6k 收藏 18
点赞数 3
分类专栏： HTML 文章标签： HTML
于 2023-01-05 21:41:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Hudas/article/details/128557275
版权

1.HTML简介

HTML指的是超文本标记语言(HyperText Markup Language)，是一种用于创建网页的标准标记语言

HTML页面基本结构

<!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>My bolg</title>
</head>
<body>
    <h1>This is my first title.</h1>
    <p>This is my first paragraph.</p> 
</body>
</html>

1.<!DOCTYPE html>声明为HTML5文档 

2.<html>元素是HTML页面的根元素

3.<head>元素包含了文档的元(meta)数据，如 <meta charset="utf-8"> 定义网页编码格式为utf-8

4.<title>元素描述了文档的标题 

5.<body>元素包含可见的页面内容，只有<body>区域才会在浏览器中显示

6.<h1>元素定义一个大标题

7.<p>元素定义一个段落

运行结果如下图所示

HTML文档的后缀名.html

HTML文档包含了HTML标签及文本内容

HTML标签

①HTML标签是由尖括号包围的关键词，比如 <html>

②HTML标签通常是成对出现的，比如 <p> 和 </p>

③标签对中的第一个标签是开始标签，第二个标签是结束标签

<开始标签>内容</结束标签>

④开始标签也被称为起始标签(opening tag)，结束标签也被称为闭合标签(closing tag)

⑤HTML标签需使用小写标签

2.HTML元素

一个 HTML元素包含了开始标签与结束标签，举个例子

<p>This is a paragraph</p>

提示Tips：HTML元素以开始标签为起始，以结束标签为终止，元素的内容是开始标签与结束标签之间的内容

HTML元素可以进行嵌套，可理解为HTML元素可以包含其他HTML元素，HTML文档由相互嵌套的HTML元素构成，例如以下实例包含了三个HTML元素

<!DOCTYPE html>
<html>
<body>
    <p>This is a paragraph.</p>
</body>
</html>

HTML空元素

没有内容的HTML元素被称为空元素

空元素是在开始标签中关闭的，比如 <br>、<hr>

3.HTML属性

HTML元素可以设置属性，属性是HTML元素提供的附加信息

属性一般描述于开始标签，总是以名称/值对的形式出现，例如: attr="value"

attr表示属性名，value表示属性值，属性值使用双引号" "括起来

例如: HTML链接由<a>标签定义，链接的地址在href属性中指定 

<!DOCTYPE html>
<html>
<body>
    <a href="https://blog.csdn.net/Hudas">This is my blog.</a>
</body>
</html>

HTML常用的通用属性

属性描述
id赋予某个html标签唯一的名称(标识符)
class为html标签定义一个或多个类名(classname)
title用来对标签内容进行描述说明，当鼠标移动到该标签上方时会显示出 title属性的值
style规定html标签的行内样式(inline style)
<!DOCTYPE html>
<html>
<style>
    #username{
        color: red;
    }

    .content1{
        color: cornflowerblue;
    }
    .content2{
        text-decoration: underline;
    }
</style>
<body>
    <!-- id属性 -->
    <p id="username">My name is Andy.</p>
    <!-- class属性 -->
    <p class="content1 content2">I graduated from Dalian Maritime University.</p>
    <p class="content1">I'm learning HTML.</p>
    <p class="content1">Welcome to my Blog!!!</p>
    <!-- title属性 -->
    <a href="https://blog.csdn.net/Hudas" title="Andy的博客">This is my blog.</a>
    <!-- style属性 -->
    <p style="color:orange;">Let's learn HTML together!!!</p>
</body>
</html>

运行结果如下图所示

4.HTML标题

标题(Heading)是通过 <h1>...<h6> 标签进行定义的 

<!DOCTYPE html>
<html>
<body>
    <h1>这是第一个标题</h1>
    <h2>这是第二个标题</h2>
    <h3>这是第三个标题</h3>
    <h4>这是第四个标题</h4>
    <h5>这是第五个标题</h5>
    <h6>这是第六个标题</h6>
</body>
</html>

运行结果如下图所示

提示Tips: HTML标题标签只能用来定义标题，不可以使用标题标签来对文本进行加粗设计 

5.HTML段落

HTML中可以使用段落标签<p>来将文档中的内容分割为若干个段落

段落标签由开始标签<p>和结束标签</p>组成，开始和结束标签之间的内容会被视为一个段落

<!DOCTYPE html>
<html>
<body>
    <p>这是段落1</p>
    <p>这是段落2</p>
    <p>这是       段    落3</p>
    <p>这是
       段落4
    </p>
</body>
</html>

运行结果如下图所示 

提示Tips

默认情况下，段落标签会对文本中的空白符进行合并，将多个连续的空白符显示为一个空格的效果，具体表现如下：

①如果段落中出现多个连续的空格，浏览器会忽略这些空格只保留一个

②如果段落中出现多个连续的换行，浏览器会将这些换行转换成一个空格

6.HTML换行 

如果想要在段落中进行换行，需要使用专门的换行标签<br />

<!DOCTYPE html>
<html>
<body>
    <p>这个<br>段落<br>演示了换行的效果</p>
</body>
</html>

运行结果如下图所示 

7.HTML水平线

<hr>标签在HTML页面中创建水平线，可用于分隔内容

<!DOCTYPE html>
<html>
<body>
    <p>这是段落1</p>
    <hr>
    <p>这是段落2</p>
    <hr>
    <p>这是段落3</p>
</body>
</html>

运行结果如下图所示

8.HTML文本格式化 

HTML常用的文本格式化标签

标签描述
b加粗标签中的字体
i定义标签中的字体为斜体
sub定义下标文本
sup定义上标文本
del在文本内容上添加删除线
ins定义文档的其余部分之外的插入文本
em强调标签中的内容，并使标签中的字体倾斜
strong强调标签中的内容，并将字体加粗
small定义标签中的字体为小号字体
big定义标签中的字体为大号字体
pre定义预格式化的文本，被该标签包裹的文本会保留所有的空格和换行符，字体也会呈现为等宽字体
<!DOCTYPE html>
<html>
<body>
    <b>加粗文本1</b><br />
    <i>斜体文本2</i><br />
    <span>上下标文本3: H<sub>2</sub>SO<sub>4</sub> = 2H<sup>+</sup>SO<sub>4</sub><sup>2-</sup></span>
    <br />
    <del>删除文本4</del><br />
    <ins>插入文本5</ins><br />
    <em>强调内容文本6</em><br />
    <strong>加重语气文本7</strong><br />
    <small>定义小号字文本8</small><br />
    <big>定义大号字文本9</big><br />
    <pre>预格式  
         文本    10</pre>
</body>
</html>

运行结果如下图所示

9.HTML注释

HTML注释主要用来对文档中的代码进行解释说明，注释也是代码的一部分，但浏览器会自动忽略注释的内容，所以用户在网页中是看不到注释的内容

通过注释我们可以帮助自身或者他人更好的阅读代码，提高代码的可读性

我们也可以注释程序中的代码，例如当不希望某段代码执行时，就可以先将它们注释掉，这样浏览器就不会执行这段代码

在HTML中可以使用<!-- -->在代码中添加注释，<!--和 -->之间的所有内容都会被视为注释

<!DOCTYPE html>
<html>
<body>
    <!--这是一个注释的字段-->
    <p>这是一个未注释的字段</p>
</body>
</html>

运行结果如下图所示

提示Tips: 注释可以出现在HTML文档的任意位置，包括文档开头、文档末尾、文档中间、标签外部、标签内容中等

10.HTML超链接

点击超链接可以从一张页面跳转到另一张页面

HTML使用标签 <a>来设置超文本链接，常用的语法格式如下所示

<a href="url"  target="opentype">链接文本</a>

href 属性用来指明要跳转到的 url地址，target 属性用来指明新页面的打开方式，链接文本需要写在 <a> 和 </a> 之间

示范1

<!DOCTYPE html>
<html>
<body>
    <a href="https://blog.csdn.net/Hudas/">访问我的博客</a>
</body>
</html>

运行结果如下图所示

点击文本链接即可跳转到我的博客主页

示范2

<!DOCTYPE html>
<html>
<body>
    <a href="https://blog.csdn.net/Hudas/" target="_blank">访问我的博客</a>
</body>
</html>

提示Tips: 使用 target 属性，可以定义被链接的文档在何处显示，绝大部分情况下，target 属性要么不写，保持默认值 _self，在现有窗口中打开新页面;要么将它的值设置为 _blank，在新窗口中打开页面

11.HTML表格

在HTML 中，使用 <table> 标签来定义表格，利用表格来展示数据

示例1

<!DOCTYPE html>
<html>
<style>
    .content{
        color: aliceblue;
    }
</style>
<body>
    <!-- border-collapse: collapse;使表格的双边框变为单边框 -->
    <table width="600" style="border-collapse: collapse;" border="1">
        <caption>人员基本信息表</caption>
        <!-- 单元格对齐方式使用align属性 -->
        <!-- 单元格添加背景色使用bgcolor属性 -->
        <tr align="left" bgcolor='#555555'>
          <th class="content">First Name</th>
          <th class="content">Last Name</th>
          <th class="content">City</th>
        </tr>
        <tr>
          <td>John</td>
          <td>Smith</td>
          <td>深圳</td>
        </tr>
        <tr>
          <td>Andy</td>
          <td>Hu</td>
          <td>广州</td>
        </tr>
        <tr>
          <td>Even</td>
          <td>Jackson</td>
          <td>上海</td>
        </tr>
        <tr>
          <td>Adam</td>
          <td>Bob</td>
          <td>北京</td>
        </tr>
     </table>
</body>
</html>

运行结果如下图所示

<table> 表示表格，表格的所有内容需要写在 <table> 和 </table> 之间，如果不定义边框属性border，表格将不显示边框

<caption>标签定义表格标题，当表格需要标题时，使用<caption>表格标题</caption>

<tr>表示表格的行(table row)，表格中有多少个 <tr> 标签就表示有多少行数据

<th>表示表格的表头(table heading)

<td>表示表格的单元格(table datacell)，单元格可以包含文本、图片、列表、段落、表单、水平线、表格等

示例2：跨行跨列合并单元格

跨行合并：rowspan="合并单元格的个数"

跨列合并：clospan="合并单元格的个数"

具体格式如下

<td rowspan="n">单元格内容</td>
<td colspan="n">单元格内容</td>
初始表格 
<!DOCTYPE html>
<html>
<body>
    <table border="1" cellspacing="0" width="500" height="249">
            <!-- 跨列合并第一行的第二列和第三列 -->
            <tr>
                <td></td>
                <td colspan="2"></td>
                <!-- <td></td> -->
            </tr>
            <!-- 跨行合并第一列的第二行和第三行 -->
            <tr>
                <td rowspan="2"></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <!-- <td></td> -->
                <td></td>
                <td></td>
            </tr>
    </table>
</body>    
</html>

运行结果如下图所示

12.HTML列表

HTML支持有序、无序和自定义列表

标签描述
<ol>定义有序列表
<ul>定义无序列表
<li>定义列表项
<dl>定义列表
<dt>自定义列表项目
<dd>定义自定列表项的描述

示例1：无序列表

无序列表，使用 <ul> + <li> 标签

<!DOCTYPE html>
<html>
<body>
    <ul>
        <li>Andy</li>
        <li>Jack</li>
        <li>Rita</li>
    </ul>
</body>    
</html>

运行结果如下所示

示例2：有序列表

有序列表，使用 <ol> + <li> 标签

<!DOCTYPE html>
<html>
<body>
    <ol>
        <li>Andy</li>
        <li>Jack</li>
        <li>Rita</li>
    </ol>
</body>    
</html>

运行结果如下所示

示例3：自定义序列

自定义列表，使用 <dl> + <dt> + <dd> 标签

<!DOCTYPE html>
<html>
<body>
    <h3>自定义列表：</h3>
    <dl>
        <dt>Apple</dt>
        <dd>- Sweet and sour</dd>
        <dd>- Produced in Liaoning Province</dd>
        <dt>Banana</dt>
        <dd>- Soft and delicious</dd>
        <dd>- Produced in Guangdong Province</dd>
    </dl>
</body>    
</html>

运行结果如下所示

<!DOCTYPE html>
<html>
<body>
    <dl>
        <dl style="margin-bottom:0px;">
            <dt><b>HTML</b></dt>
            <dd style="margin:auto auto 10px 0px;">HTML是一种专门用来开发网页的标记语言</dd>
            <dt><b>CSS</b></dt>
            <dd style="margin:auto auto 10px 0px;">CSS层叠样式表可以控制HTML文档的显示样式,用来美化网页</dd>
            <dt><b>Javascript</b></dt>
            <dd style="margin:auto auto 10px 0px;">Javascript简称JS,是一种用来开发网站的脚本编程语言</dd>
        </dl>
    </dl>
</body>    
</html>

运行结果如下所示

13.HTML图像

HTML使用<img> 标签插入图片，语法如下所示

<img src="url" alt="some_text">

src属性用来指明图片的地址或者路径，alt属性用来定义图片的文字描述信息，当图片无法加载时，就会显示alt属性中的信息

示例

文件存储路径如下图所示

<!DOCTYPE html>
<html>
<body>
    <img src="C:\Users\X2001565\Desktop\图片\风景图片.jpeg" alt="Scenery">
</body>    
</html>

运行结果如下所示

在 <img> 标签中可以使用 width 和 height 属性来设置图片的宽度和高度，使用title属性设置图片提示文本，当鼠标悬停到图片时才会显示文字

我们也可以通过在<a>标签中嵌套 <img> 标签，通过点击图像即可跳转到指定的超文本链接

14.HTML表单 

为了实现浏览器和服务器的互动，可以使用HTML表单搜集不同类型的用户输入、将输入的内容从客户端的浏览器传送到服务器端，经过服务器上的后端程序进行处理后，再将用户所需要的信息传递回客户端的浏览器上，从而获得用户信息，实现交互效果

HTML表单用于收集用户的输入信息

表单是一个包含表单元素的区域，表单元素是允许用户在表单中输入内容，比如: 文本域(textarea)、下拉列表(select)、单选框(radio-buttons)、复选框(checkbox)等

在 HTML 中创建表单需要用到<from>标签，具体语法如下所示：

<form name="form_name" action="url" method="GET|POST" enctype="value" target="target_win">
    表单中的其它标签
</form>
<form>标签属性说明
name表单的名称
method设置表单的提交方式(GET或者POST方式)，method属性默认方式为GET方式
action指向处理该表单页面的URL(相对位置或绝对位置)
enctype设置表单内容的编码格式
target设置返回信息的显示方式，target的属性值包括"_blank"、"_parent"、"_self"、"top"

action 属性用来指明将表单提交到哪个页面，method 属性表示使用哪个方式提交数据，包括GET 和POST两种方式，GET方式是将表单内容附加在URL地址后面发送;POST方式是将表单中的信息作为一个数据块发送到服务器上的处理程序中，在浏览器的地址栏不显示提交的信息

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML表单演示</title>
</head>
<body>
    <form action="./userinfo.php" method="POST">
        <!-- 文本输入框控件 -->
        <label>用户名： </label><input name="username" type="text" placeholder="请输入用户名"><br>
        <!-- 密码框控件 -->
        <label>密&emsp;码： </label><input name="password" type="password" placeholder="请输入密码"><br>
        <!-- 下拉菜单控件 -->
        <label>性&emsp;别：</label>
        <select name="sex">
            <!-- selected属性的作用是默认选中 -->
            <option value="1" selected>男</option>
            <option value="2">女</option>
        </select>
        <br>
        <!-- 复选框控件 -->
        <label>爱&emsp;好：</label>
        <input type="checkbox" name="hobby" value="1">音乐
        <input type="checkbox" name="hobby" value="2">电影
        <input type="checkbox" name="hobby" value="3">阅读
        <input type="checkbox" name="hobby" value="4">运动
        <br>
        <!-- 单选按钮控件 -->
        <label>学&emsp;历：</label>
        <input type="radio" name="education" value="1">小学
        <input type="radio" name="education" value="2">初中
        <input type="radio" name="education" value="3">高中
        <input type="radio" name="education" value="4">大专
        <!-- check属性的作用是默认选中 -->
        <input type="radio" name="education" value="5" checked>本科
        <input type="radio" name="education" value="6">研究生
        <br>
        <!-- 文本域 -->
        <!-- cols属性规定文本域内可见宽度,rows属性规定文本域内可见行数 -->
        <textarea cols="30" rows="10">填写对你印象最深的一件事</textarea>
        <br>
        <!-- 按钮 -->
        <label>补充个人简历文件：</label>
        <input type="file" value="补充个人简历文件"><br>
        <input type="submit" value="提 交">&emsp;&emsp;
        <input type="reset" value="重 置">
    </form>
</body>
</html>

运行结果如下所示

填写好用户数据，点击“提交”按钮，即可使用POST方式将数据提交到当前目录下的userinfo.php 页面，在服务器端通过 PHP 代码可以接收提交的数据 

<label>标签用于为表单中的各个控件定义标题

<input>标签用于定义输入框或按钮，通过type属性展示不同形式的输入域类型

type属性值

说明

text文本框，用于输入单行文本
password密码框，用于输入密码
radio单选框，用于多选一
checkbox多选框
file文件选择，用于上传文件
submit提交按钮，用于提交
reset重置按钮，用于清除与重置表单内容

<select>标签用于定义下拉列表，<option>标签用于定义下拉列表中的选项

<textarea>标签用于定义文本域，可以在其中输入更多的文本

15.HTML块级/行内元素 

HTML元素分为块级元素和行内元素，两者的区别如下

①块级元素在浏览器显示时，通常会另起新行，行内元素在显示时通常不会以新行开始

②块级元素中可以包含其它的内联元素和块级元素，内联元素中包含文本或者其他内联元素

③块级元素设置高度height、宽度width、外边距margin及内边距padding都是可控有效的，行内元素设置height高度和width宽度无效，可以设置padding内边距，也可以设置margin外边距，但只对左右外边距有效，上下外边距无效

常见的HTML块级元素有<p>、<h1> ~ <h6>、<div>、<hr>、<ul>、<ol>等

常见的HTML行内元素有<span>、<b>、<i>、<li>、<sup>、<sub>、<a>等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    <div>div标签(块级标签)</div>
    <p>p标签(块级标签)</p>
    <span>span标签(行内标签)</span>
    <a href="#">a标签(行内标签)</a>
</body>
</html>

运行结果如下所示

<div>标签和<span>标签介绍

<div>标签是块级元素，用于组合其他 HTML元素的容器，没有特定的含义，当与CSS一同使用，可用于对所包含的内容块设置样式属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    <div style="padding:0px 20px;border:1px solid #ccc; background-color:#eee;">
        <h4>Web前端开发技术栈</h4>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>Vue</li>
        </ul>
    </div>
</body>
</html>

运行结果如下图所示

<span>标签是行内元素，用作文本的容器，也没有特定的含义，当与CSS一同使用时，可用于为文本设置样式属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
    #profile span{
        display: inline-block;
        padding: 2px 4px;
        border: 1px solid #ddd;
        background-color: #f6f6f6;
        border-radius: 3px;
    }
    </style>
</head>
<body>
    <span style="font-size:18px; color:#666;">About My Blog</span>
    <p>Welcome to my Blog.Currently I have published almost <b>240</b> articles.</p>
    <p id="profile">Including <span>Python</span>,<span>Pandas</span>,<span>HTML</span>,<span>JavaScript</span></p>
</body>
</html>

运行结果如下所示

16.HTML嵌入CSS样式 

CSS(Cascading Style Sheets))是用于渲染HTML元素标签的样式

CSS可以通过以下方式添加到HTML中

1.内联样式表导入CSS

在HTML元素中使用style属性，在style属性中添加CSS样式，适用于当特殊的样式需要应用到个别元素时，就可以使用内联样式表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    <a href="https://baidu.com">有下划线的链接</a>
    <br>
    <a href="https://baidu.com" style="text-decoration:none;">无下划线的链接</a>
</body>
</html>

运行结果如下所示

从上述代码可以看出内联样式导入CSS没有实现样式和结构相分离 

2.内部样式表导入CSS

内部样式表即在HTML文档头部 <head>区域使用<style>元素来使用CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style type="text/css">
        h1 {color:red;}
        p {color:blue;}
    </style>
</head>
<body>
    <h1>This is a title.</h1>
    <p>This is a paragraph.</p>
</body>
</html>

运行结果如下所示

3.外部样式表导入CSS

将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link>标签将外部样式表文件链接到HTML文档中

<head>
  <link href="CSS文件的路径"  rel="stylesheet" />
</head>

当样式需要被应用到很多页面的时候，外部样式表将是最理想的选择，使用外部样式表，就可以通过更改一个文件来改变整个站点的外观

/* styles.css */
h1{
    color: blue;
}

p{
    color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <h1>This is a title.</h1>
    <p>This is a paragraph.</p>
</body>
</html>

运行结果如下所示

从上述代码可以看出通过外部样式表导入CSS完全实现了结构和样式相分离 

17.HTML头部标签

HTML中的<head>标签是所有头部标签的容器，这些头部标签用来定义有关HTML文档的元数据(描述数据的数据)以及所需资源的引用，例如CSS样式文件和JavaScript 脚本文件，对文档能够在浏览器中正确显示起到了非常重要的作用

在<head> 标签中可以使用的头部标签有 <title>、<link>、<style>、<meta>、<script>、<base> 等

① <title>标签用来定义HTML文档的标题，一个HTML文档只允许存在一个<title>标签，并且<title>标签必须放置在<head>标签中，<title>标签内部仅允许包含纯文本内容，不能包含其他HTML标签

<html>
<head>
    <meta charset="UTF-8">
    <title>title设置标题</title>
</head>
<body>
    <div>一段文本</div>
</body>
</html>

运行结果如下所示

② <link>标签经常用于引用外部CSS样式表，<link>标签中包含两个主要的属性，分别是rel和href，其中rel属性用来指示引用文件的类型，href属性用来设置外部文件的路径，<head>标签中可以包含任意数量的<link>标签

首先准备一个外部的 css 文件，然后在html 文件中引入 css 文件

/* index.css */
div {
    color: blue;
}
<!-- 引入 index.css 文件-->
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div>一段文本</div>
</body>
</html>

运行结果如下所示 

③ <style>标签可以在HTML文档中嵌入CSS样式(用于定义内部CSS 样式)，需要注意在<style>标签中定义的样式仅对当前 HTML文档有效，对于文档中的唯一样式可以使用<style>标签，但对于在多个文档中通用的样式，使用外部样式表更为合适

<html>
<head>
    <meta charset="UTF-8">
    <title>document</title>
    <style>
        #box {
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box">一段文本</div>
</body>
</html>

运行结果如下所示

④ <script>标签用于定义JavaScript脚本，既可以包含脚本语句，也可以通过src属性指向外部脚本文件

示例1

<html>
<head>
    <meta charset="UTF-8">
    <title>document</title>
    <script>
        document.write("Hello World!!!")
    </script>
</head>
<body>
    <div>一段文本</div>
</body>
</html>

运行结果如下所示

示例2

定义一个外部的 js 文件，通过 html 调用外部的 js 文件

// index.js
window.onload = function() {
    document.getElementById("box").style.backgroundColor = "yellow"
}
<html>
<head>
    <meta charset="UTF-8">
    <title>document</title>
    <script src="./index.js"></script>
</head>
<body>
    <div id="box">一段文本</div>
</body>
</html>

运行结果如下所示

⑤ <base>标签用于指定页面中所有链接的基准路径，该标签作为HTML文档中所有的链接标签的默认链接

href属性指定所有链接的基准路径，target属性指定超链接默认在哪个窗口打开链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>base标签</title>
    <!-- 指定默认行为: 在本页面打开百度-->
    <base href="http://www.baidu.com" target="_self">
</head>
<body>
    <h3>默认行为: 在本页面打开百度</h3>
    <!-- 使用默认行为 -->
    <a href="">使用默认行为</a>

    <!-- 只改变打开方式 -->
    <a href="" target="_blank">只改变打开方式</a>

    <!-- 只改变地址 -->
    <a href="https://blog.csdn.net/Hudas/">只改变地址</a>

    <!-- 同时改变地址和打开方式 -->
    <a href="https://blog.csdn.net/Hudas/" target="_blank">同时改变地址和打开方式</a>
</body>
</html>

⑥ <meta>标签用于提供有关HTML文档的元数据(描述数据的数据)，<meta>标签定义的数据并不会显示在页面上，但却会被浏览器解析

1.定义字符集

<meta charset="UTF-8">

2.定义页面描述

定义页面的描述信息有利于搜索引擎的搜索

<meta name="description" content="HTML是超文本标记语言(HyperText Markup Language)，是一种用于创建网页的标准标记语言">

3.定义页面作者

<meta name="author" content="Andy">

4.定义关键字 

<meta name="keywords" content="HTML,CSS,JavaScript">

上述只列举了4个<meta>标签描述元数据的代码，如果需要了解其他描述代码，读者可自行去查阅

18.HTML字符实体

显示结果描述实体名称
空格&nbsp;
<小于号&lt;
>大于号&gt;
&和号&amp;
"引号&quot;
'撇号 &apos; (IE不支持)
￠分&cent;
£镑&pound;
¥元&yen;
€欧元&euro;
§小节&sect;
©版权&copy;
®注册商标&reg;
™商标&trade;
×乘号&times;
÷除号&divide;
山茶花开时。
关注
  • 3
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何在指定的地方插入html内容和文本内容
12-01
dhtml提供了两个方法来进行添加，insertAdjacentHTML和insertAdjacentText insertAdjacentHTML方法：在指定的地方插入html标签语句。 原型：insertAdjacentHTML(swhere,stext) 参数： swhere:指定插入html标签语句的地方，有四种值可以用： 1.beforeBegin:插入到标签开始前 2.afterBegin:插入到标签开始标记后 3.beforeEnd:插入到标签结束标记前 4.afterEnd:插入到标签结束标记后 stext:要插入的内容 例： 代码如下: var sHTML=”<input
HTML基础知识
weixin_48751562的博客
03-22 1589
文章目录HTML文档基本结构html中一些基本的标签作用 什么是HTML？ HTML中文译名：超文本标记语言 使用HTML编写的文档称为网页 HTML是构成网页文档的主要语言，它是由HTML标签和字符信息组成，HTML标签可以标识文字、图片、动画、表格、超链接等网页对象，字符信息用以传达网页内容，如标题、段落文本、图片等。 HTML文档基本结构 HTML文档基本结构 HTML文档基本结构由3个标签组成 < html > ：该标签标识了HTML文档，html页面是由一对< html
HTML基础及CSS基础
meoo_的博客
03-20 598
一.HTML基础。
Web前端学习：HTML基础【入门宝典】
Oh_Python的博客
03-11 4539
一、HTML简介 什么是HTML？ HTML(HyperText Markup Language) 超文本标记语言，是一种用于创建网页的标准标记语言。 1、HTML的特点 （1）HTML不是编程语言，而是标记语言。 （2）HTML使用标签的形式来标识网页的不同组成部分 （3）HTML文档包含了HTML标签和文本 （4）HTML文档又叫做Web页面 （5）HTML文档的后缀：html 或 htm 2、HTML元素语法 （1）HTML 元素以开始标签起始 （2）HTML 元素以结束标签终止
HTML基础教程（非常详细）从零基础入门到精通，看完这一篇就够了。
ZL_1618的博客
09-06 8047
HTML全称Hyper Text Markup Language, 翻译成中文就是超文本标记语言，是一种最基础的网页开发语言, 需要注意的是HTML并不是编程语言, 而是一种标记语言超文本可以理解为超越了文本的意思, 也就是超级文本, 超文本不只是普通的文本内容, 还可以加入图片,视频,声音等内容, 甚至可以从一个文件跳转到另一个文件(超级链接文本)标记语言可以理解为一套标记标签,也就是由许多标记标签组成的语言。
HTML常用基础内容总结
moteandsunlight的博客
02-26 2534
Web前端: 顾名思义是来做Web的前端的。我们这里所说的前端泛指Web前端，也就是在Web应用中用户可以看得见碰得着的东西。包括Web页面的结构、Web的外观视觉表现以及Web层面的交互实现。Web后端：后端更多的是与数据库进行交互以处理相应的业务逻辑。需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等。HTML，即Hyper Text MarkupLanguage，是一种超文本标记语言。顾名思义，这种语言可以表示很多形式的信息，不仅限于文本。
HTML入门（详细）
qq_63525426的博客
05-03 1万+
HTML（全称为“超文本标记语言”）是一种用于创建Web页面的标记语言。它是Web开发的基础，允许开发者定义页面的结构、内容和样式。HTML使用一些标记或“标签”来描述文本和媒体内容的结构和格式，这些标签可以指示网页浏览器如何显示内容，包括标题、段落、列表、超链接、图像、音频、视频等等。HTML还可以与其他Web技术（如CSS和JavaScript）结合使用，以实现更复杂和交互性的Web应用程序。这篇文章只是介绍HTML的基础标签的使用。
HTML零基础入门教程（详细）
热门推荐
ZONGXP的博客
10-22 21万+
HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。 HTML 指的是超文本标记语言:HyperTextMarkupL...
HTML 基础
icc_hhy的博客
06-24 283
HTML标签的基础知识及用法整理，主打一个不求甚解！
html基础知识
firenaimal的博客
04-06 2091
文本标签加粗加粗倾斜倾斜删除下滑线字体修饰标签有哪些？加粗
html基础知识1111
最新发布
03-26
html基础知识1111
Html基础知识点.docx
07-23
Html基础知识点.docx
HTML5基础知识.pdf
07-05
HTML5基础知识
HTML:HTML 基础知识
05-13
1990 年，由于对 未来发展的远见，Tim Berners-Lee 提出了 的概念，并在第二年在 的基础上将其正式定义为一个标记语言。 于 1993 年正式开始制定 HTML 规范，并在经历了几个版本的草案后于 1995 年发布了 HTML 2.0 ...
HTML基础知识讲解！
03-26
HTML基础知识讲解！
HTML保姆级基础知识
09-28
HTML保姆级基础知识
html入门基础知识
10-08
HTML（Hypertext Markup ...除了这些基础知识，HTML还有许多其他的标签和属性可以用来创建复杂的网页，如标题标签、列表标签、表格标签、图像标签等等。此外，还可以使用CSS（层叠样式表）来为HTML元素添加样式和布局。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值