其他分享
首页 > 其他分享> > HTML基础知识点

HTML基础知识点

作者:互联网

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"/>

在这里插入图片描述

标签:Chapter,知识点,ba,标签,基础,HTML,explains,bla
来源: https://blog.csdn.net/qq_44111805/article/details/122487740