前端入门01 -- 前言，HTML，HTML标签

作者: YanZi_33 | 来源:发表于2021-12-05 10:17 被阅读0次

网页

网站：是指在因特网上根据一定规则，使用HTML等制作的用于展示特定内容相关的网页集合；
网页：是网站中一页，通常是HTML格式的文件，它通过浏览器来阅读；
网页是构成网站的基本元素，它通常由图片，链接，文字，声音，视频等元素组成，通常我们看到的网页常见以.htm或.html后缀结尾的文件，因此将其俗称为HTML文件；

HTML

HTML：是超文本标记语言，它是用来制作网页的一门语言；
HTML不是一种编程语言，而是一种标记语言；
标记语言是一套标记标签；
所谓超文本的含义如下：
- 它可以加入图片，声音，动画，多媒体等内容，超越了文本的限制；
- 它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接(超级链接文本)；
网页是由网页元素组成的，这些元素是利用HTML标签描述出来，然后通过浏览器解析来显示给用户的；

image.png

浏览器

浏览器是网页显示，运行的平台，常用的浏览器有IE，火狐，谷歌，Safari，Opera等五大浏览器；
浏览器内核：即渲染引擎，负责读取网页内容，整理讯息，计算网页的显示方式并显示页面；

image.png

目前国内一般浏览器都会采用Webkit/Blink内核，例如360，UC，QQ，搜狗等等；

Web标准

Web标准：是由W3C组织和其他标准化组织执行的一系列标准的集合，W3C(万维网联盟)是国际最著名的标准化组织；
使用Web标准的原因：
- 让Web的开发发展前景更广阔；
- 内容能被更广泛的设备访问；
- 更容易被搜寻引擎搜索；
- 降低网站流量费用；
- 使网站更易维护；
- 提高网页的浏览速度；
Web标准的构成：主要包括结构，表现和行为三个方面，如下所示：

image.png

Web标准提出的最佳体验方案：结构，样式，行为三者分离，简单理解就是结构写到HTML文件中，样式写到CSS文件中，行为写到JavaScript文件中；

HTML语法规范

HTML标签是由尖括号包围的关键词，例如<html>；
HTML标签通常是成对出现的，例如<html>和</html> 称为双标签，标签对中的第一个标签是开始标签，第二个标签是结束标签；
有些特殊的标签必须是单标签(极少情况)，例如<br />，称为单标签；
标签关系有如下：
- 包含关系：相当于父子关系；
- 并列关系：相当于兄弟关系；

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

html与head是包含关系，head与body是并列关系；

HTML基本结构标签

每一个网页都会有一个基本结构标签(也称为骨架标签)，页面内容也是在这个基本标签上书写；

image.png

新建一个html文件，必须以.html结尾，然后使用浏览打开；

开发工具

开发工具有Sublime Text，VS Code，WebStorm，HBuilder等等，这里我使用的VS Code开发工具，下载官方网址为：https://code.visualstudio.com/
利用VS Code创建一个html文件03_vscode创建页面.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>利用vscode创建的第一个页面</title>
</head>
<body>
    写代码是一件非常好的事情！！！
</body>
</html>

安装open in browser插件，如下所示：
image.png
然后在html文件的编辑区域，右击选择Open In Defalut Browser在默认浏览器中显示刚刚编写的html文件；
常用快捷键：针对Mac电脑的；
- command + 加号：代码字号放大；
- command + 减号：代码字号缩小；
- command + N：新建文件；
- command + S：保存文件到指定路径，主要文件格式为html；
- 输入! 按下Tab键：生成html文件的页面骨架结构；
- control + G：定位代码行；
其他插件有如下：
- 中文显示：Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
- 每次保存，都会自动格式化js，css，html代码：JS-CSS-HTML Formatter
- 自动重命名配对的HTML标签：Auto Rename Tag
- 追踪至样式：CSS Peek
VS Code安装的插件如下所示：

image.png

输入! 按下Tab键，生成html文件的页面骨架结构，下面针对生称的内容进行介绍一下；
<!DOCTYPE html>：是文档类型声明标签，作用就是告诉浏览器使用哪种HTML版本来显示网页，此标签的意思是：当前页面采用的是HTML5版本来显示网页；
- <!DOCTYPE html>声明位于文档中的最前面的位置，处于<html>标签之前；
- <!DOCTYPE html>不是一个html标签，它是文档类型声明标签；
<html lang="en">：定义当前文档显示的语言；
- en表示英文；
- zh-CN 表示中文；
- 简单来说定义为en就是英文网页，定义为zh-CN就是中文网页；
<meta charset="UTF-8">：设置字符集用来规定HTML文件使用的字符编码，UTF-8字符集基本包含了全世界所有国家用到的字符；

HTML标签

h标签 -- 标题标签

为了是网页更具有语义化，在网页中使用标题标签，HTML提供了6个等级的网页标题标签，即<h1> - <h6>；
标签语义：作为标题使用，并且依据重要性递减，其特点如下：
- 加了标题的文字会加粗，字号也会依次变大；
- 一个标题独占一行；
注意⚠️：书写标签时，从左往右依次写；

<!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>Document</title>
</head>

<body>
    <h1>标题标签</h1>
    <h2> 燕子1 </h2>
    <h3> 燕子2 </h3>
    <h4> 燕子3 </h4>
    <h5> 燕子4 </h5>
    <h6> 燕子5 </h6>
</body>

</html>

p标签 -- 段落标签

<p>标签用于定义段落，它可以将整个网页分为若干个段落；
标签语义：可以将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>Document</title>
</head>

<body>
    <p>是在http协议中非常重要的角色。http是无状态协议，也就是说http不会根据之前的访问情况来处理下次请求。在很多涉及账号的网页中，需要根据账号来显示相应的内容， 为了避免每次访问都需要登录，可以在第一次登录完成后将登录信息写入cookie，添加到之后的请求中，这样就解决了http不能记录状态的问题。从开发者层面来说，cookie本质是包含了一系列key-value的数组。</p>

    <p>NSHTTPCookie类封装了一个cookie。 该类还提供了将 HTTP cookie 标头转换为NSHTTPCookie实例，并将NSHTTPCookie实例转换为适用于NSURLRequest对象的标头的方法。除非请求指定不发送cookie，否则URL加载系统会自动发送适用于NSURLRequest对象的任何存储的cookie。同样，根据当前的Cookie接受策略接受在NSURLResponse对象中返回的Cookie。</p>
</body>

</html>

br标签 -- 换行标签

在HTML中,一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行，若希望某段文本强制换行显示，就可使用换行标签<br />；
标签语义：强制换行，其特点如下：
- <br /> 是一个单标签；
- <br />标签只是简单的开始新的一行，与段落标签不一样，段落之间会插入一些垂直的间隙；
<br />可以不加反斜杠，即<br>；
在VSCode编辑器中，文本太长，可设置多行显示View->Word Wrap；

<!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>Document</title>
</head>

<body>
    <p>是在http协议中非常重要的角色。<br /> http是无状态协议，也就是说http不会根据之前的访问情况来处理下次请求。在很多涉及账号的网页中，需要根据账号来显示相应的内容， 为了避免每次访问都需要登录，可以在第一次登录完成后将登录信息写入cookie，添加到之后的请求中，这样就解决了http不能记录状态的问题。从开发者层面来说，cookie本质是包含了一系列key-value的数组。</p>

    <p>NSHTTPCookie类封装了一个cookie。 该类还提供了将 HTTP cookie 标头转换为NSHTTPCookie实例，并将NSHTTPCookie实例转换为适用于NSURLRequest对象的标头的方法。除非请求指定不发送cookie，否则URL加载系统会自动发送适用于NSURLRequest对象的任何存储的cookie。同样，根据当前的Cookie接受策略接受在NSURLResponse对象中返回的Cookie。</p>
</body>

</html>

文本格式化标签

在网页中，有时需要为文字设置粗体，斜体或下划线效果，这时就需要用到HTML中的文本格式化标签；
标签语义：突出重要性，比普通文字更重要；

image.png

<!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>Document</title>
</head>

<body>
    我是<strong>加粗</strong>的文字
    <br /> 我是<b>加粗</b>的文字
    <br />我是<em>倾斜</em>的文字
    <br />我是<i>倾斜</i>的文字
    <br />我是<del>删除线</del>的文字
    <br />我是<s>删除线</s>的文字
    <br />我是<ins>下划线</ins>的文字
    <br />我是<u>下划线</u>的文字
</body>

</html>

div与span标签

div与span标签是没有语义的，就是一个盒子，用来装内容的；
标签特点如下：
- div标签用来布局，但是现在一行只能放一个div标签，大盒子；
- span标签用来布局，一行上可以放多个span标签，小盒子；

<!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>Document</title>
</head>

<body>
    <div>我是一个div标签我一个人单独占据一行</div>
    <div>我是一个div标签我一个人单独占据一行</div>
    <span>百度</span>
    <span>新浪</span>
    <span>搜狐</span>
</body>

</html>

浏览器显示效果：

image.png

img标签 -- 图像标签

在HTML标签中，img标签用于定义HTML页面中图像；
src是<img>标签的必须属性，它用于指定图像文件的路径和文件名，其属性如下所示：

image.png

<!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>Document</title>
</head>

<body>
    <h4>图像标签的使用:</h4>
    <img src="180.png" />

    <h4> alt 替换文本 图像显示不出来的时候用文字替换:</h4>
    <img src="1801.png" alt="我是你爹" />

    <h4> title 提示文本 鼠标放到图像上，提示文字:</h4>
    <img src="180.png" alt="我是你爹" title="我真是你爹" />

    <h4> width 给图像设置宽度:</h4>
    <img src="180.png" alt="我是你爹" title="我真是你爹" width="200" />

    <h4> width height 给图像设置宽高:</h4>
    <img src="180.png" alt="我是你爹" title="我真是你爹" width="200" height="100" />

    <h4> border 给图像设置边框:</h4>
    <img src="180.png" alt="我是你爹" title="我真是你爹" width="200" border="15" />
</body>

</html>

图片文件必须放在HTML文件所在的文件路径下，与HTML文件平级才会显示出来；
图像标签可以拥有多个属性，必须写在标签名的后面；
属性之间不分先后顺序，标签名与属性，属性与属性之间均以空格分开；
属性采用键值对的格式，即key=value；
图像标签的src属性是必须要书写的，属于单标签，后面的反斜杠可以省略；
在实际工作中，我们的文件是不能随便乱放的，否则使用起来会很难快速找到它们，因此我们需要一个文件夹来管理它们；
目录文件夹：就是普通文件夹，里面只不过存放了我们页面所需要的相关素材，比如html文件，图片等等；
根目录：打开目录文件夹的第一层就是根目录；
VSCode可以直接打开目录文件夹，如下所示：

image.png

也可以直接将目录文件夹拖进VSCode，然后自动打开；
如果HTML页面中图片非常多，通常我们会创建一个文件夹来专门存放这些图片文件，那么再来查找图片时，就需要采用路径的方式来指定图片文件的位置；
路径可分为以下两种：
- 相对路径：以引用文件所在位置为参考基础，而建立出的文件路径，简单来说，图片相对于HTML页面的文件路径；

image.png

<!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>Document</title>
</head>

<body>
    <img src="../180.png" /></body>
</html>

绝对路径：是指目录下的绝对位置，直接到达目标位置，通常从盘符开始的路径，例如/Users/liyanyan33/Desktop/前端/180.png；

<!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>Document</title>
</head>

<body>
    <img src="/Users/liyanyan33/Desktop/前端/180.png" />
</body>
</html>

a标签 -- 超链接标签

在HTML标签种，a标签用于定义超链接，作用是从一个页面链接到另一个页面，其有两个重要属性如下：

image.png

链接的分类：
- 外部链接：外部网站的链接；
- 内部链接：网站内部页面之间的相互链接，直接链接内部页面的名称即可；
- 空链接：如果没有确定链接目标时，可使用#表示空链接；
- 下载链接：如果href里面的地址是一个文件或者压缩包，会下载这个文件；
- 网页元素链接：在网页中的各种网页元素，如文本，图像，表格，音频，视频等都可以添加超链接的；
- 锚点链接：点击链接时，可以快速定位到页面中的目标标签；
- 针对锚点首先在链接文本的href属性中，设置属性值为#名字的形式；
- 然后找到目标标签，里面添加一个id属性 = 刚才设置的名字；

<!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>Document</title>
</head>

<body>
    <h4>1.外部链接</h4>
    <a href="https://www.qq.com" target="_self">腾讯</a>
    <a href="https://www.baidu.com" target="blank">百度</a>
    <h4>2.内部链接</h4>
    <a href="02_demo.html" target="blank">demo页面</a>
    <h4>3.空链接</h4>
    <a href="#">公司地址</a>
    <h4>4.下载链接</h4>
    <a href="images.zip">下载文件</a>
    <h4>5.网页元素链接</h4>
    <a href="https://www.baidu.com" target="blank"><img src="222.png" /></a>
</body>
</html>

target="_self"：在当前页面打开网页；
target="blank"：在新的页面打开网页；

注释标签

如果在HTML文档中，添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签；
快捷键为command + /；

<!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>Document</title>
</head>

<body>
    <!--注释： 我要学习前端 -->
</body>

</html>

特殊字符标签

在HTML页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来代替；

image.png

其中空格，大于，小于这三个字符使用频率最高；
注意以分号结尾；

<!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>Document</title>
</head>

<body>
    验&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;证 <br> &lt; p &gt;
</body>

</html>

table标签 -- 表格标签

表格是用来展示数据的；
语法格式：

<table>
        <tr>
            <td>单元格内的文字</td>
        </tr>
</table>

<table></table>：用于定义表格的标签；
<tr></tr>：定义表格中的行，必须嵌套在<table></table>标签中；
<td></td>：定义表格中的单元格，必须嵌套在<tr></tr>标签中；
<td>data</td>：data数据就是单元格中数据内容；
<th></th>：表头单元格，一般位于表格的第一行或第一列，单元格中文本内容加粗居中显示；
表格属性：本身属性不常用，主要是通过CSS来设置；

image.png

<!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>Document</title>
</head>

<body>

    <table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="250">
        <tr>
            <th>排名</th>
            <th>关键词</th>
            <th>趋势</th>
            <th>进入搜索</th>
            <th>最近七日</th>
            <th>相关链接</th>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td>往下</td>
            <td>456</td>
            <td>123</td>
            <td>
                <a href="# ">贴吧</a>
                <a href="# ">图片</a>
                <a href="# ">百度</a>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>西游记</td>
            <td>往下</td>
            <td>45346</td>
            <td>1223</td>
            <td>
                <a href="# ">贴吧</a>
                <a href="# ">图片</a>
                <a href="# ">百度</a>
            </td>
        </tr>
        <tr>
            <td>3</td>
            <td>东游记</td>
            <td>往下</td>
            <td>3456</td>
            <td>432</td>
            <td>
                <a href="# ">贴吧</a>
                <a href="# ">图片</a>
                <a href="# ">百度</a>
            </td>
        </tr>
        <tr>
            <td>4</td>
            <td>西游记后传</td>
            <td>往下</td>
            <td>45623</td>
            <td>113</td>
            <td>
                <a href="# ">贴吧</a>
                <a href="# ">图片</a>
                <a href="# ">百度</a>
            </td>
        </tr>
        <tr>
            <td>5</td>
            <td>连城诀</td>
            <td>往下</td>
            <td>5645</td>
            <td>768</td>
            <td>
                <a href="# ">贴吧</a>
                <a href="# ">图片</a>
                <a href="# ">百度</a>
            </td>
        </tr>
        <tr>
            <td>6</td>
            <td>仙剑奇侠传</td>
            <td>往下</td>
            <td>12</td>
            <td>567</td>
            <td>
                <a href="# ">贴吧</a>
                <a href="# ">图片</a>
                <a href="# ">百度</a>
            </td>
        </tr>
        <tr>
            <td>7</td>
            <td>神雕侠侣</td>
            <td>往下</td>
            <td>6576</td>
            <td>675</td>
            <td>
                <a href="# ">贴吧</a>
                <a href="# ">图片</a>
                <a href="# ">百度</a>
            </td>
        </tr>
    </table>
</body>

</html>

显示结果如下：

image.png

表格结构标签

由于表格很长，可将表格分割成表格头部和表格主体两大部分；
<thead></thead>：表格头部；
<tbody></tbody>：表格主体；
上述标签都是放于<table></table>标签中；

<!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>Document</title>
</head>

<body>

    <table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="250">
        <thead>
            <tr>
                <th>排名</th>
                <th>关键词</th>
                <th>趋势</th>
                <th>进入搜索</th>
                <th>最近七日</th>
                <th>相关链接</th>
            </tr>
        </thead>

        <tbody>
            <td>1</td>
            <td>鬼吹灯</td>
            <td>往下</td>
            <td>456</td>
            <td>123</td>
            <td>
                <a href="# ">贴吧</a>
                <a href="# ">图片</a>
                <a href="# ">百度</a>
            </td>
            </tr>
            <tr>
                <td>2</td>
                <td>西游记</td>
                <td>往下</td>
                <td>45346</td>
                <td>1223</td>
                <td>
                    <a href="# ">贴吧</a>
                    <a href="# ">图片</a>
                    <a href="# ">百度</a>
                </td>
            </tr>
            <tr>
                <td>3</td>
                <td>东游记</td>
                <td>往下</td>
                <td>3456</td>
                <td>432</td>
                <td>
                    <a href="# ">贴吧</a>
                    <a href="# ">图片</a>
                    <a href="# ">百度</a>
                </td>
            </tr>
            <tr>
                <td>4</td>
                <td>西游记后传</td>
                <td>往下</td>
                <td>45623</td>
                <td>113</td>
                <td>
                    <a href="# ">贴吧</a>
                    <a href="# ">图片</a>
                    <a href="# ">百度</a>
                </td>
            </tr>
            <tr>
                <td>5</td>
                <td>连城诀</td>
                <td>往下</td>
                <td>5645</td>
                <td>768</td>
                <td>
                    <a href="# ">贴吧</a>
                    <a href="# ">图片</a>
                    <a href="# ">百度</a>
                </td>
            </tr>
            <tr>
                <td>6</td>
                <td>仙剑奇侠传</td>
                <td>往下</td>
                <td>12</td>
                <td>567</td>
                <td>
                    <a href="# ">贴吧</a>
                    <a href="# ">图片</a>
                    <a href="# ">百度</a>
                </td>
            </tr>
            <tr>
                <td>7</td>
                <td>神雕侠侣</td>
                <td>往下</td>
                <td>6576</td>
                <td>675</td>
                <td>
                    <a href="# ">贴吧</a>
                    <a href="# ">图片</a>
                    <a href="# ">百度</a>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

合并单元格

将多个单元格合并为一个单元格，简称合并单元格；
目标单元格：写合并代码的单元格；
合并单元格的方式：
- 跨行合并：rowspan = "单元格个数" ，最上侧的单元格为目标单元格；
- 跨列合并：colspan = "单元格个数"，最左侧的单元格为目标单元格；
合并单元格的步骤：
- 首先确定是跨行还是跨列；
- 找到目标单元格，书写合并方式=合并数量；
- 删除多余的单元格；

image.png

ul，ol，dl标签 -- 列表标签

列表标签是用来布局的；
列表分为：无序列表，有序列表，自定义列表；
无序列表：无排列顺序的列表，通过<ul></ul>标签来显示；
- ul中只能嵌套li标签；
- li之间相当于一个容器，可以容纳所有元素；

<!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>Document</title>
</head>

<body>

    <h4>你喜欢的食物</h4>
    <ul>
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>鲫鱼</li>
    </ul>
</body>
</html>

显示如下：

image.png

有序列表：有排列顺序的列表，通过<ol></ol>标签来显示；
- ol中只能嵌套li标签；
- li之间相当于一个容器，可以容纳所有元素；

<!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>Document</title>
</head>

<body>

    <h4>你喜欢的食物</h4>
    <ol>
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>鲫鱼</li>
    </ol>
</body>

</html>

显示如下：

image.png

自定义列表：通过<dl></dl>标签来显示；
- 只会包含<dt></dt>与<dd></dd>标签；
- <dt></dt>表示头部名称，<dd></dd>表示内容；
- <dt></dt>与<dd></dd>可包含任何标签；

<!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>Document</title>
</head>

<body>

    <h4>你喜欢的食物</h4>
    <dl>
        <dt>关注我们</dt>
        <dd>新浪微博</dd>
        <dd>微信</dd>
        <dd>联系我们</dd>
    </dl>

</body>
</html>

form标签 -- 表单标签

使用表单，可收集用户信息；
表单的组成部分：
- 表单域：包含表单元素的区域，使用<form></form>标签表示，可将收集的信息提交到服务端；
- 表单控件：也叫表单元素；
- 提示信息；

<form action="url地址" method="提交方式" name="表单域名称">

</form>

image.png

表单控件 -- `input表单元素`

-input表单元素，有个type属性，其取值有如下类型：

属于单标签；

image.png

其他属性如下所示：

![image](https://img.haomeiwen.com/i25440976/2946d6a2f4a992d1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

当type值为radio时：属于单选按钮，name属性值必须一致，才能实现单选的效果；
当type值为checkbox时：属于多选按钮；
name域value属性值，主要是给后台开发人员使用的；

<!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>Document</title>
</head>

<body>

    <form action="login" method="post" name="name">
        用户名:
        <input type="text" name="name" value="请输入用户名" maxlength="6"> <br> 密码:
        <input type="password" name="password" value="请输入密码" maxlength="8"><br> 性别:男
        <input type="radio" name="sex" value="男" checked="checked"> 性别:女
        <input type="radio" name="sex" value="女"><br>爱好:吃饭
        <input type="checkbox" name="hobby" value="吃饭">睡觉
        <input type="checkbox" name="hobby" value="睡觉">打游戏
        <input type="checkbox" name="hobby" value="打游戏" checked="checked"> <br>
        <input type="submit" value="免费注册"><br>
        <input type="reset" value="重新设置"><br>
        <input type="button" value="获取验证码"><br> 上传头像:
        <input type="file">
    </form>

</body>

</html>

显示效果如下：

image.png

label标签

<label></label>用于绑定一个表单元素，当点击label标签内的文本时，浏览器就会自动将焦点转到或者选择对应的表单元素上，用来增加用户体验；

<!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>Document</title>
</head>

<body>

    <form action="login" method="post" name="name">
        <label for="text"> 用户名:</label> <input id="text" type="text" name="name" maxlength="6"> <br>
        <input type="radio" id="nan" name="sex"><label for="nan">男</label>
        <input type="radio" id="nv" name="sex"><label for="nv">女</label>
    </form>
</body>
</html>

label标签的for属性与相关元素的id属性相同；

表单控件之下拉表单`<select></select>`

若存在多个选项，且节约页面空间时，可以使用下拉表单<select></select>；
<select></select>中至少包含一个<option>标签；
可通过<option>标签的selected属性，设置默认选项；

<!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>Document</title>
</head>

<body>

    <form action="login" method="post" name="name">
        籍贯:
        <select>
            <option>山东</option>
            <option>山西</option>
            <option>安徽</option>
            <option>上海</option>
            <option>湖南</option>
            <option>湖北</option>
            <option>河南</option>
            <option>河北</option>
            <option>江苏</option>
            <option selected="selected">江西</option>
        </select>
    </form>
</body>
</html>

表单控件之文本域元素`textarea`

可输入多行文本；
属性cols：表示每行字符数；
属性rows：表示显示行数；

<!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>Document</title>
</head>

<body>

    <form action="login" method="post" name="name">
        今日反馈:
        <textarea cols="100" rows="5">干你妹</textarea>
    </form>
</body>
</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>Document</title>
</head>

<body>

    <h4>青春常在 青春美好</h4>
    <table width="600">
        <!-- 第一行-->
        <tr>
            <td>性别:</td>
            <td>
                <input type="radio" name="sex" id="nan"><label for="nan">男</label>
                <input type="radio" name="sex" id="nv"><label for="nv">女</label>
            </td>
        </tr>
        <!-- 第二行 -->
        <tr>
            <td>生日:</td>
            <td>
                <select>
                    <option>--请选择年份--</option>
                    <option>1990</option>
                    <option>1991</option>
                    <option>1993</option>
                    <option>1994</option>
                </select>
                <select>
                    <option>--请选择月份--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                </select>
                <select>
                    <option>--请选择日--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                </select>
            </td>
        </tr>
        <!-- 第三行 -->
        <tr>
            <td>所在地区</td>
            <td>
                <input type="text" value="江苏省南京市江宁区">
            </td>
        </tr>
        <!-- 第四行 -->
        <tr>
            <td>婚姻状况</td>
            <td>
                <input type="radio" name="marry" id="weihun" checked="checked"><label for="weihun">未婚</label>
                <input type="radio" name="marry" id="yihun"><label for="yihun">已婚</label>
                <input type="radio" name="marry" id="lihun"><label for="lihun">离婚</label>
            </td>
        </tr>
        <!-- 第五行 -->
        <tr>
            <td>学历</td>
            <td>
                <input type="text" value="硕士研究生">
            </td>
        </tr>
        <!-- 第六行 -->
        <tr>
            <td>喜欢的类型</td>
            <td>
                <input type="checkBox" name="love" id="wumei"><label for="wumei">妩媚的</label>
                <input type="checkBox" name="love" id="cute"><label for="cute">可爱的</label>
                <input type="checkBox" name="love" id="fm" checked="checked"><label for="fm">丰满的</label>
                <input type="checkBox" name="love" id="mt"><label for="mt">苗条的</label>
                <input type="checkBox" name="love" id="dh"><label for="dh">荡货的</label>
            </td>
        </tr>
        <!-- 第七行 -->
        <tr>
            <td>个人介绍</td>
            <td>
                <textarea>自我介绍</textarea>
            </td>
        </tr>
        <!-- 第八行 -->
        <tr>
            <td></td>
            <td>
                <input type="submit" value="免费注册">
            </td>
        </tr>
        <!-- 第九行 -->
        <tr>
            <td></td>
            <td>
                <input type="checkbox" checked="checked">我同意注册条款和会员加入标准
            </td>
        </tr>
        <!-- 第十行 -->
        <tr>
            <td></td>
            <td>
                <a href="#">我是会员，立即登录</a>
        </tr>
        <!-- 第十一行 -->
        <tr>
            <td></td>
            <td>
                <h5>我承诺</h5>
                <ul>
                    <li>年满18岁，单身</li>
                    <li>态度严肃</li>
                    <li>活力四射</li>
                </ul>
            </td>
        </tr>
    </table>
</body>

</html>

显示效果如下：

image.png

学会文档的查阅；
- W3school
- MDN

前端入门01 -- 前言，HTML，HTML标签

网页

HTML

浏览器

Web标准

HTML语法规范

HTML基本结构标签

开发工具

HTML标签

h标签 -- 标题标签

p标签 -- 段落标签

br标签 -- 换行标签

文本格式化标签

div与span标签

img标签 -- 图像标签

a标签 -- 超链接标签

注释标签

特殊字符标签

table标签 -- 表格标签

表格结构标签

合并单元格

ul，ol，dl标签 -- 列表标签

form标签 -- 表单标签

表单控件 -- `input表单元素`

label标签

表单控件之下拉表单`<select></select>`

表单控件之文本域元素`textarea`

案例实现

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

前端入门01 -- 前言，HTML，HTML标签

网页

HTML

浏览器

Web标准

HTML语法规范

HTML基本结构标签

开发工具

HTML标签

h标签 -- 标题标签

p标签 -- 段落标签

br标签 -- 换行标签

文本格式化标签

div与span标签

img标签 -- 图像标签

a标签 -- 超链接标签

注释标签

特殊字符标签

table标签 -- 表格标签

表格结构标签

合并单元格

ul，ol，dl标签 -- 列表标签

form标签 -- 表单标签

表单控件 -- input表单元素

label标签

表单控件之下拉表单<select></select>

表单控件之文本域元素textarea

案例实现

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

表单控件 -- `input表单元素`

表单控件之下拉表单`<select></select>`

表单控件之文本域元素`textarea`