HTML基础知识巩固

最新推荐文章于 2022-11-17 19:56:16 发布

1scy

最新推荐文章于 2022-11-17 19:56:16 发布

阅读量597

点赞数 1

分类专栏： HTML 文章标签： html 前端

原文链接：https://blog.csdn.net/qq_44111805/category_11592837.html?spm=1001.2014.3001.5482

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言，而是一种标记语言
(markup language)
HTML 使用标记标签来描述网页

2、HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词
HTML 标签通常是成对出现的标签对中的第一个标签是开始标签，第二个标签是结束标签
HTML存在自结束标签，即不写自结束的 /

3、HTML基本结构

<!--<!DOCTYPE html>为HTML5的文档声明（HTML的注释可以用快捷键Ctrl+/生成）（注意：注释：开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要）-->
<!DOCTYPE html>
<!--<html lang="en">是告诉浏览器你写的是英文网站，运行时会弹出“是否翻译”，若不想弹出则应该改为<html lang="zh">-->
<html lang="ch">
<head>
  <!-- <meta charset="UTF-8">是设置字符集与编辑器保持一致，若编码解码的字符集不一致将会出现乱码问题  -->
    <meta charset="UTF-8">
    <title>Hard Coder</title>
</head>
<!-- VSCode对齐快捷键为:Shift + Alt + F-->
<!--HTML样式 的background-color属性为元素定义了背景颜色;text-align 属性规定了元素中文本的水平对齐方式-->
<body style="background-color:yellow">
    <!--HTML标题标签是通过 <h1> - <h6> 标签进行定义的，重要性依次递减，一般只用到h1-h3 -->
    <!-- hgroup标签将h标题分组 -->
    <hgroup>
        <h1 style="background-color:red;text-align: center">This is heading 1</h1>
        <h2 style="background-color:red;text-align: center">This is heading 2</h2>
        <h3 style="background-color:red;text-align: center">This is heading 3</h3>
        <h4 style="background-color:red;text-align: center">This is heading 4</h4>
        <h5 style="background-color:red;text-align: center">This is heading 5</h5>
        <h6 style="background-color:red;text-align: center">This is heading 6</h6>
    </hgroup>
    <!--段落标签，用p表示，是一个块元素（即独占一行）  -->
    <p style="background-color:green">这是段落1。</p>
    <!-- <hr /> 标签在 HTML 页面中创建水平线 -->
    <hr />
    <p style="background-color:green">这是段落2。</p>
    <hr />
    <p style="background-color:green">这是段落3。</p>
    <hr />
    <!--<br /> 标签用于换行，<br /> 元素是一个空的 HTML元素  -->
    <p style="background-color:green">这是段落4。<br />这是段落5。</p>
    <!-- <b>定义粗体文本 -->
    <b>This text is bold</b>
    <br />
    <!-- <strong>定义加重语气 -->
    <strong>This text is strong</strong>
    <br />
    <!-- <em>定义着重文字 -->
    <em>This text is emphasized</em>
    <br />
    <!-- <big>定义 大号字-->
    <big>This text is emphasized</big>
    <br />
    <!-- <small>定义 小号字 -->
    <small>This text is emphasized</small>
    <br />
    这是长的引用：
    <!--<blockquote>定义长的引用；浏览器通常会对 <blockquote> 元素进行缩进处理  -->
    <blockquote>
        这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
    </blockquote>
    <!-- <q>定义短的引用；浏览器通常会为 <q> 元素包围引号。 -->
    这是短的引用：
    <q>
        这是短的引用。
    </q>
</body>
</html>

显示效果：
在这里插入图片描述

4、HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。属性总是以名称/值对的形式出现，比如：name=“value”。属性总是在 HTML 元素的开始标签中规定。
属性值应该始终被包括在引号内。双引号是最常用的，也可以使用单引号。在某些个别的情况下，比如属性值本身就含有双引号，则必须使用单引号。
HTML 标签参考手册

5、HTML 超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
我们通过使用 <a> 标签在 HTML 中创建链接。

两种使用 <a> 标签的方式：

通过使用 href 属性 - 创建指向另一个文档的链接；
通过使用 name 属性 - 创建文档内的书签。

<!--在VSCode中新建HTML页面时可以先输入!再tab键，快速生成HTML代码模板 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hard Coder</title>
</head>
<body>
    <!-- href表示目标跳转路径
    值可以是外部网站地址，也可以是内部页面地址
    #表示回到顶部
    使用id属性（注意id为唯一属性，一个页面内的所有id不能一样，以字母开头且区分大小写，靠前的元素优先生效）
    可以创建直接跳至页面的某个小节 ，无需滚动寻找信息
    -->
    <a href="https://www.baidu.com/">超链接1</a>
    <br />
    <!-- 当我们需要跳转一个服务器内部页面时，一般使用相对路径
    且相对路径一般以./ 或 ../开头，其中./可以省略不写表示当前文件所在的目录
    ../表示当前文件素所在目录的上一级目录
    当我们不确定相对路径时可以选中文件右键选择"复制相对路径"-->
    <a href="./practice.html">超链接2</a>
    <br />
    <a href="Test\test1.html">超链接3</a>
    <br />
    <!-- target属性为可选值
    _self为默认值(一般不写)表示在当前页面打开
    _blank表示在新的页面打开 -->
    <a href="http://www.w3school.com.cn/" target="_blank">超链接4</a>
    <br /><br />
    <!-- 链接到同一个页面的不同位置 -->
    <p>
        <a href="#C4">查看 Chapter 4。</a>
    </p>
    <h2>Chapter 1</h2>
    <p>This chapter explains ba bla bla</p>
    <h2>Chapter 2</h2>
    <p>This chapter explains ba bla bla</p>
    <h2>Chapter 3</h2>
    <p>This chapter explains ba bla bla</p>
    <!-- 注意此处给Chapter 4定义一个唯一id -->
    <h2><a id="C4">Chapter 4</a></h2>
    <p>This chapter explains ba bla bla</p>
    <h2>Chapter 5</h2>
    <p>This chapter explains ba bla bla</p>
    <h2>Chapter 6</h2>
    <p>This chapter explains ba bla bla</p>
    <h2>Chapter 7</h2>
    <p>This chapter explains ba bla bla</p>
    <h2>Chapter 8</h2>
    <p>This chapter explains ba bla bla</p>
    <h2>Chapter 9</h2>
    <p>This chapter explains ba bla bla</p>
    <h2>Chapter 10</h2>
    <p>This chapter explains ba bla bla</p>
    <h2>Chapter 11</h2>
    <p>This chapter explains ba bla bla</p>
    <h2>Chapter 12</h2>
    <p>This chapter explains ba bla bla</p>
    <h2>Chapter 13</h2>
    <p>This chapter explains ba bla bla</p>
    <h2>Chapter 14</h2>
    <p>This chapter explains ba bla bla</p>
    <h2>Chapter 15</h2>
    <p>This chapter explains ba bla bla</p>
    <h2>Chapter 16</h2>
    <p>This chapter explains ba bla bla</p>
    <h2>Chapter 17</h2>
    <p>This chapter explains ba bla bla</p>
    <a href="#">回到顶部</a>
</body>
</html>

效果展示：
在这里插入图片描述

6、在 HTML 中，图像由 <img> 标签定义。
<img> 是空标签，即它只包含属性，并且没有闭合标签。（img 属于替换元素，属于行内元素和替换元素之间的一种元素，即img这段代码被具体的东西给替换了）
要在页面上显示图像，需要使用源属性（src），src 指 "source"且源属性的值是图像的 URL 地址。URL 指存储图像的位置。浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。当浏览器无法载入图像时，替换文本属性可告诉读者他们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。请注意，如果把鼠标指针移动到图像上，大多数浏览器会显示 “alt” 文本。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hard Coder</title>
</head>
<!--body的属性background可以设置图像背景（gif 和 jpg 文件均可用作 HTML 背景，且如果图像小于页面，图像会进行重复）  -->
<body background="huawen.png">
    <!-- <img>的属性包括 src、alt、width（单位为像素px）和height（单位为像素px）
        （注意：若只修改了width或height一个，图片会被等比例缩放；
        若同时指定了一个个图片的width和height就不会等比例变化;
        且各个属性之间不要用逗号隔开
    -->
    <!-- 此处的src放的是相对路径（我们可以直接把需要展示的图像拖进项目中） -->
    <img src="wiliuqi.jpg"  width=500px>
    <br />
    <img src="wuliuiq.gif" height=200px>
    <br />
    <!-- 将服务器的图片显示到网页中 -->
    <img src="http://www.w3school.com.cn/i/w3school_logo_white.gif" />
    <!-- 在文字中排列图像（默认对齐方式为底部对齐） -->
    <h2>未设置对齐方式的图像：</h2>
    <p>图像 <img src="eg_cute.gif"> 在文本中</p>
    <h2>已设置对齐方式的图像：</h2>
    <p>图像 <img src="eg_cute.gif" align="bottom"> 在文本中</p>
    <p>图像 <img src="eg_cute.gif" align="middle"> 在文本中</p>
    <p>图像 <img src="eg_cute.gif" align="top"> 在文本中</p>
    <!--使图片浮动至段落的左边或右边-->
    <p>
        <img src ="eg_cute.gif" align ="left"> 
        带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。
        </p>
        <p>
        <img src ="eg_cute.gif" align ="right"> 
        带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。
        </p>
</body>
</html>

显示效果：
在这里插入图片描述

7、HTML 创建表格，表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
如果不定义边框属性，表格将不显示边框。表格的表头使用 <th> 标签进行定义。大多数浏览器会把表头显示为粗体居中的文本。在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hard Coder</title>
</head>
<body>
    <h4>这个表格没有边框：</h4>
    <table>
        <tr>
            <td>100</td>
            <td>200</td>
            <td>300</td>
        </tr>
        <tr>
            <td>400</td>
            <td>500</td>
            <td>600</td>
        </tr>
    </table>
    <!-- border 属性规定规定围绕表格的边框的宽度。
    border 属性会为每个单元格应用边框，并用边框围绕表格
    -->
    <h4>水平表头：</h4>
    <table border="1">
        <tr>
            <th>姓名</th>
            <th>电话</th>
            <th>性别</th>
        </tr>
        <tr>
            <td>Bill Gates</td>
            <td>123 456 789</td>
            <td>男</td>
        </tr>
    </table>
    <h4>垂直表头：</h4>
    <table border="1">
        <tr>
            <th>姓名</th>
            <td>Bill Gates</td>
        </tr>
        <tr>
            <th>电话</th>
            <td>123 456 789</td>
        </tr>
        <tr>
            <th>性别</th>
            <td>男</td>
        </tr>
    </table>
    <!--<caption>标签定义表格标题  -->
    <h4>这个表格有一个标题和粗边框：</h4>
    <table border="6">
        <caption>我的标题</caption>
        <tr>
            <td>100</td>
            <td>200</td>
            <td>300</td>
        </tr>
        <tr>
            <td>400</td>
            <td>500</td>
            <td>600</td>
        </tr>
    </table>
    <!--th的属性colspan表示单元格横向跨越的列数，colspan=2即合并两列  
    th的属性rowspan表示单元格纵向跨越的行数，rowspan=2即合并两行
    -->
    <h4>横跨两列的单元格：</h4>
    <table border="1">
        <tr>
            <th>姓名</th>
            <th colspan="2">电话</th>
        </tr>
        <tr>
            <td>Bill Gates</td>
            <td>123 456 789</td>
            <td>123 456 789</td>
        </tr>
    </table>
    <h4>横跨两行的单元格：</h4>
    <table border="1">
        <tr>
            <th>姓名</th>
            <td>Bill Gates</td>
        </tr>
        <tr>
            <th rowspan="2">电话</th>
            <td>123 456 789</td>
        </tr>
        <tr>
            <td>123 456 789</td>
        </tr>
    </table>
    <!-- table标签的属性bgcolor表示表格背景颜色
    注意td标签也有这个属性 -->
    <h4>背景颜色：</h4>
    <table border="1" bgcolor="red">
        <tr>
            <td>First</td>
            <td>Row</td>
        </tr>
        <tr>
            <td>Second</td>
            <td>Row</td>
        </tr>
    </table>
    <!-- table标签的属性background表示表格背景图像
    注意td标签也有这个属性-->
    <h4>背景图像：</h4>
    <table border="1" background="huawen.png">
        <tr>
            <td>First</td>
            <td>Row</td>
        </tr>
        <tr>
            <td>Second</td>
            <td>Row</td>
        </tr>
    </table>
    <!-- th和td标签均有align属性设置左右对齐方式 -->
    <table width="400" border="1">
        <tr>
         <th align="left">消费项目</th>
         <th align="right">一月</th>
         <th align="right">二月</th>
        </tr>
        <tr>
         <td align="left">衣服</td>
         <td align="right">100</td>
         <td align="right">100</td>
        </tr>
        <tr>
         <td align="left">化妆品</td>
         <td align="right">300</td>
         <td align="right">300</td>
        </tr>
        <tr>
         <td align="left">食物</td>
         <td align="right">500</td>
         <td align="right">500</td>
        </tr>
        <tr>
         <th align="left">总计</th>
         <th align="right">900</th>
         <th align="right">900</th>
        </tr>
       </table>
</body>
</html>

显示效果：
在这里插入图片描述

8、HTML 支持有序、无序和定义列表。
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于 <ul> 标签。每个列表项始于 <li>。

有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
在这里插入图片描述

自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd>。
注意：列表之间可以相互嵌套。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hard Coder</title>
</head>
<body>
    <!-- ul标签的type属性值有三个：disc（默认值实心圆）；circle（空心圆）；square（实心方块） -->
    <h4>Disc 项目符号列表：</h4>
    <ul type="disc">
        <li>苹果</li>
        <li>香蕉</li>
        <li>柠檬</li>
        <li>桔子</li>
    </ul>
    <h4>Circle 项目符号列表：</h4>
    <ul type="circle">
        <li>苹果</li>
        <li>香蕉</li>
        <li>柠檬</li>
        <li>桔子</li>
    </ul>
    <h4>Square 项目符号列表：</h4>
    <ul type="square">
        <li>苹果</li>
        <li>香蕉</li>
        <li>柠檬</li>
        <li>桔子</li>
    </ul>
    <!--ol标签的type属性值有四个：十进制数字（默认）；小写字母顺序列表；大写字母顺序列表；小写罗马数字和大写罗马数字  -->
    <h4>数字列表：</h4>
    <ol>
        <li>苹果</li>
        <li>香蕉</li>
        <li>柠檬</li>
        <li>桔子</li>
    </ol>
    <h4>字母列表：</h4>
    <ol type="A">
        <li>苹果</li>
        <li>香蕉</li>
        <li>柠檬</li>
        <li>桔子</li>
    </ol>
    <h4>小写字母列表：</h4>
    <ol type="a">
        <li>苹果</li>
        <li>香蕉</li>
        <li>柠檬</li>
        <li>桔子</li>
    </ol>
    <h4>大写罗马字母列表：</h4>
    <ol type="I">
        <li>苹果</li>
        <li>香蕉</li>
        <li>柠檬</li>
        <li>桔子</li>
    </ol>
    <h4>小写罗马字母列表：</h4>
    <ol type="i">
        <li>苹果</li>
        <li>香蕉</li>
        <li>柠檬</li>
        <li>桔子</li>
    </ol>
    <h4>一个嵌套列表：</h4>
    <ul>
        <li>咖啡</li>
        <li>茶
            <ul>
                <li>红茶</li>
                <li>绿茶
                    <ul>
                        <li>中国茶</li>
                        <li>非洲茶</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>牛奶</li>
    </ul>
    <h2>一个定义列表：</h2>
    <dl>
        <dt>计算机</dt>
        <dd>用来计算的仪器 ... ...</dd>
        <dt>显示器</dt>
        <dd>以视觉方式显示信息的装置 ... ...</dd>
    </dl>
</body>
</html>

显示效果：
在这里插入图片描述

8、内联框架的iframe 用于在网页内显示网页，其中属性src指定要引入的网页路径，frameborder 只有0/1 两个值分别表示显示与不显示边框。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hard Coder</title>
</head>
<body>
    <iframe src="https://www.w3school.com.cn" 
    frameborder="0" 
    width=800 
    height=400>
    </iframe>
</body>
</html>

效果展示：
在这里插入图片描述
9、HTML的语义标签

10、HTML 字符实体（相当于进行转义）

HTML实体符号参考手册
11、HTML媒体
在这里插入图片描述

WAVE 是因特网上最受欢迎的无压缩声音格式，所有流行的浏览器都支持它。如果需要未经压缩的声音（音乐或演讲），应该使用 WAVE 格式。
MP3 是最新的压缩录制音乐格式。MP3 这个术语已经成为数字音乐的代名词。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hard Coder</title>
</head>
<body>
    <!-- audio标签用来向一个页面引入一个外部音频文件，默认情况下不允许用户自己控制播放和停止
    属性为controls（表示是否允许用户控制播放）
    autoplay（表示音频文件是否自动播放，若设置autoplay则音乐在打开页面时会自动播放
    但是目前大部分浏览器都不会对音乐进行播放 
    loop（表示音乐是否循环播放-->
    <audio controls>
    <source src="还是会想你 .mp3" > 
    </audio>
    <!-- video标签用来向一个页面引入一个外部视频文件
    属性与audio相同-->
    <video controls>
        <source src="敬礼.mp4">
    </video>
</body>
</html>

效果显示：
在这里插入图片描述
12、HTML表单用于收集用户输入。<form> 元素定义 HTML 表单，表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等。

表单元素语法：

<input  type="text"（input元素类型）name="fname"（input元素名称） value="text"（input元素的值）/>

在这里插入图片描述
文本框-语法：

<input  type="text"(文本框)  name="userName"(文本框名称) value="用户名"(文本框初始值) size="30"(文本框长度) maxlength="20"(文本框可输入最多字符) />

密码框-语法：

<input  type="password "(密码框)  name="pass"(密码框的名称)  size="20"(密码框的长度) />

单选按钮-语法：

<input name="gen" type="radio"(单选按钮框) value="男"(值)  checked(单选按钮选中状态)  />男
<input name="gen" type="radio" value="女" />女

复选框-语法：

<input type="checkbox"(复选框) name="interest" value="sports"(值)/>运动
<input type="checkbox" name="interest" value="talk" checked(复选框选中状态) />聊天
<input type="checkbox" name="interest" value="play"/>玩游戏

列表框-语法：

<select(列表框) name="列表名称" size="行数">
<option value="选项的值" selected="selected"(默认选中项)>…</option >
<option(选项) value="选项的值">…</option >
</select>

按钮-语法：

<input type="reset" (重置按钮) name="butReset"  value="reset按钮"(按钮上显示的文字)>
<input type="submit"(提交按钮) name="butSubmit" value="submit按钮">
<input type="button"(普通按钮) name="butButton" value="button按钮"/>

多行文本域-语法：

<textarea(多行文本域)  name="showText"  cols="x"(显示的列数)  rows="y"(显示的行数)>文本内容 </textarea  >

文件域-语法：

<form action="" method="post" enctype="multipart/form-data"（表单编码属性）>
  <p><input type="file"(文件域) name="files" />
  <input type="submit" name="upload" value="上传" /></p>
</form>

邮箱-语法：

<p>邮箱:<input type="email"（邮箱）  name="email"/></p>
<input type="submit"/>

网址-语法：

<p>请输入你的网址:<input type="url"（网址）  name="userUrl"/></p>
<input type="submit"/>

数字-语法：

<p>请输入数字:<input type="number"(数字)  name="num" min="0"(允许的最小值) max="100"(允许的最大值) step(合法的数字间隔)="10"/></p>
<input type="submit"/>

滑块-语法：

<p>请输入数字:<input type="range"(滑块)  name="range1" min="0"(允许的最小值) max="10"(允许的最大值) step(合法的数字间隔)="2"/></p>
<input type="submit"/>

搜索框-语法：

<p>请输入搜索的关键词:<input type="search"(搜索框)  name="sousuo"/></p>
<input type="submit"/>

在这里插入图片描述

1scy

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML基础知识巩固

HTML基本结构显示效果
复制链接

扫一扫

专栏目录

HTML基础知识巩固

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