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

网页
  • 网站：是指在因特网上根据一定规则，使用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://upload-images.jianshu.io/upload_images/25440976-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
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,287评论 6赞 498
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,346评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 162,277评论 0赞 353
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,132评论 1赞 292
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,147评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,106评论 1赞 295
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,019评论 3赞 417
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,862评论 0赞 274
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,301评论 1赞 310
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,521评论 2赞 332
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,682评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,405评论 5赞 343
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,996评论 3赞 325
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,651评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,803评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,674评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,563评论 2赞 352

推荐阅读更多精彩内容