HTML--学习网教程

最新推荐文章于 2023-11-22 12:18:18 发布

瑶俏黛玛惹

最新推荐文章于 2023-11-22 12:18:18 发布

阅读量830

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/qq_55885932/article/details/121363591

版权

1.前端学习路线：HTML→CSS→JavaScript→jQuery→HTML5→CSS3→ES6→Vue.js→webpack→Node.js

一、基本标签

1.HTML结构：

（1）文档声明：<!DOCTYPE html>

（2）html标签对：<html></html>

（3）head标签对：<head></head> 用于定义页面标题、定时刷新、外部文件等。

（4）body标签对：<body></body> 对于一个网页来说，大部分代码都是在这个标签对内部编写的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="keywords" content="好看，恐怖，爱情">
    <title>奇怪的先生们</title>
</head>
<body>
    <p>扶华yyds</p>
</body>
</html>

2.head标签：

（1）title标签：唯一的作用就是定义网页的标题。

（2）meta标签：一般用于定义页面的特殊信息，例如页面关键字、页面描述等。这些信息不是提供给用户看的，而是提供给搜索引擎蜘蛛（如百度蜘蛛、谷歌蜘蛛）看的。在HTML中，meta标签有两个重要的属性：name和http-equiv。

①name属性：

常用属性取值：keywords，网页的关键字（可以是多个）；description，网页的描述。

②http-equiv属性：

定义网页所使用的编码：<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

定义网页自动刷新跳转：<meta http-equiv="refresh" content="6;url=http://www.baidu.com"/>

（3）script标签：用于定义页面的JavaScript代码，也可以引入外部JavaScript文件。

（4）style标签：用于定义元素的CSS样式。

（5）link标签：用于引入外部样式文件（CSS文件）。

（6）base标签：没用

3.body标签：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>body标签</title>
</head>
<body>
    <h3>静夜思</h3>                     <!--标题标签-->
    <p>床前明月光，疑是地上霜。</p>       <!--文本标签-->
    <p>举头望明月，低头思故乡。</p>       <!--文本标签-->
</body>
</html>

4.HTML注释：

二、文本

1.文本简介：

①页面组成元素：文本，图片，超链接，音频和视频

②静态页面和动态页面的区别在于：是否与服务器进行数据交互。下面列出的4种情况都不一定是动态页面：带有音频和视频，带有Flash动画，带有CSS动画，带有JavaScript特效。

③HTML文本：标题标签，段落标签，换行标签，文本标签，水平线标签，特殊符号。

2.标题标签：

题标签的级别越大，字体也越大。在一个HTML页面中，这6个标题标签不需要全部都用上。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>标题标签</title>
</head>
<body>
    <h1>这是一级标题</h1>
    <h2>这是二级标题</h2>
    <h3>这是三级标题</h3>
    <h4>这是四级标题</h4>
    <h5>这是五级标题</h5>
    <h6>这是六级标题</h6>
</body>
</html>

3.段落标签：

①段落标签：<p>段落内容</p>

<p>床前明月光，疑是地上霜。</p>

<p>举头望明月，低头思故乡。</p>

②换行标签：<br/>

<p>床前明月光，疑是地上霜。<br/>举头望明月，低头思故乡。</p>

4.文本标签：

使用“文本标签”来对文字进行修饰，例如粗体、斜体、上标、下标等。常用的有8种文本标签。

（1）粗体标签：strong、b

（2）斜体标签：i、em、cite

（3）上标标签：sup

<body>
    <p>(a+b)<sup>2</sup>=a<sup>2</sup>+b<sup>2</sup>+2ab</p>
</body>

（4）下标标签：sub

<body>
    <p>H<sub>2</sub>SO<sub>4</sub>指的是硫酸分子</p>
</body>

（5）中划线标签：s

<body>
    <p>新鲜的新西兰奇异果</p>
    <p><s>原价:￥6.50/kg</s></p>
    <p><strong>现在仅售：￥4.00/kg</strong></p>
</body>

（6）下划线标签：u

<p><u>如果有时间</u>你会来看一看我吗。</p>

（7）大字号标签：big

（8）小字号标签：small

5.水平线标签：

在HTML中，我们可以使用“hr标签”来实现一条水平线。

<body>
    <h3>静夜思</h3>                  
    <p>床前明月光，疑是地上霜。</p>
    <p>举头望明月，低头思故乡。</p>
    <hr/>
    <h3>春晓</h3>                  
    <p>春眠不觉晓，处处闻啼鸟。</p>
    <p>夜来风雨声，花落知多少。</p>
</body>

6.div标签：

在HTML中，我们可以使用“div标签”来划分HTML结构，从而配合CSS来整体控制某一块的样式。使用div标签来划分区域，使得代码更具有逻辑性。

<body>
    <!--这是第一首诗-->
    <div>
        <h3>静夜思</h3>                  
        <p>床前明月光，疑是地上霜。</p>
        <p>举头望明月，低头思故乡。</p>
    </div>
    <hr/>
    <!--这是第二首诗-->
    <div>
        <h3>春晓</h3>                  
        <p>春眠不觉晓，处处闻啼鸟。</p>
        <p>夜来风雨声，花落知多少。</p>
    </div>
</body>

7.自闭合标签：

（1）一般标签：由于有开始符号和结束符号，因此可以在内部插入其他标签或文字。

（2）自闭合标签：由于只有开始符号而没有结束符号，因此不可以在内部插入标签或文字。所谓的“自闭合”，指的是本来要用一个配对的结束符号来关闭，然而它却“自己”关闭了。

8.块元素和行内元素：

（1）块元素：在HTML中，块元素在浏览器显示状态下将占据整一行，并且排斥其他元素与其位于同一行。此外，一般情况下，块元素内部可以容纳其他块元素和行内元素。

（h1~h6，p，div，hr）

（2）行内元素：在HTML中，行内元素跟块元素恰恰相反，行内元素是可以与其他行内元素位于同一行的。此外，行内元素内部（标签内部）只可以容纳其他行内元素，不可以容纳块元素。

（strong，em，a，span）

9.特殊符号：

（1）空格：【 】，其中，1个汉字约等于3个 。因此如果想要往p标签内加入2个空格，那么我们需要往p标签内加入6个 。

（2）其他特殊符号：

10.章节练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="keywords" content="好看，恐怖，爱情">
    <title各科小常识</title>
</head>
<body>
    <div>
        <h3>语文</h3>
        <p>我们站着不说话</p>
        <p>就十分美好</p>
    </div>
    <hr/>
    <div>
        <h3>数学</h3>
        <p>勾股定理三角形：a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup>。</p>
    </div>
    <hr/>
    <div>
        <h3>英语</h3>
        <p>No pain,No gain.</p>
    </div>
    <hr/>
    <div>
        <h3>化学</h3>
        <p>H<sub>2</sub>SO<sub>4</sub>是一种重要的工业原料，可用于制作肥料等。</p>
    </div>
    <hr/>
    <div>
        <h3>英语</h3>
        <p>版权符号：&copy;</p>
        <p>版权符号：©</p>
    </div>
</body>
</html>

三、列表

1.列表简介：列表是网页中最常用的一种数据排列方式，共有3种：有序列表、无序列表和定义列表。

2.有序列表：

（1）简介：有序列表的列表项是有先后顺序的，一般采用数字或字母作为顺序，默认是采用数字顺序。

<ol>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ol>

ol，即ordered list（有序列表）；li，即list（列表项）。

（2）type属性：使用type属性来改变列表项符号。默认情况下，有序列表使用数字作为列表项符号。

<ol type="属性值">
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ol

3.无序列表：

（1）简介：无序列表的列表项是没有顺序的。默认情况下，无序列表的列表项符号是●，不过可以通过type属性来改变其样式。

ul元素的子元素只能是li，不能是其他元素。

<ul>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ul>

ul，即unordered list（无序列表）。li，即list（列表项）。

（2）type属性：

跟有序列表一样，对于无序列表的列表项符号，等学了CSS之后，我们可以放弃type属性，而使用list-style-type属性。

4.定义列表：定义列表由两部分组成：名词和描述。

<dl>
    <dt>名词</dt>
    <dd>描述</dd>
    ……
</dl>

dl即definition list（定义列表）；dt即definition term（定义名词）；而dd即definition description（定义描述）。在该语法中，<dl>标记和</dl>标记分别定义了定义列表的开始和结束，dt标签用于添加要解释的名词，而dd标签用于添加该名词的具体解释。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="不正经的，问卷调查">
    <title>问卷调查</title>
</head>
<body>
    <div>
        <h1>问卷调查</h1>
    </div>
    <div>1.你觉得**好吗？</div>
    <ol type="A">
        <li>好</li>
        <li>很好</li>
        <li>非常好</li>
    </ol>
    <div>2.你觉得**好看吗？</div>
    <ol type="A">
        <li>好看</li>
        <li>很好看</li>
        <li>非常好看</li>
    </ol>
    <div>3.你觉得**怎么样？(多选)</div>
    <ul>
        <li>很帅，是个英雄</li>
        <li>沉鱼落雁，闭月羞花</li>
        <li>聪明盖世，不可一世</li>
    </ul>
</body>
</html>

四、表格

1.基本结构：

（1）表格：table标签

（2）行：tr标签。在表格中，有多少组“<tr></tr>”，就表示有多少行。

（3）单元格：td标签

<table>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
    <tr>
        <td>单元格3</td>
        <td>单元格4</td>
    </tr>
</table>

2.完整结构：

（1）表格标题：caption

一个表格只能有一个标题，也就是只能有一个caption标签。在默认情况下，标题都是位于整个表格内的第一行。

（2）表头单元格：th

在HTML中，单元格其实有两种：表头单元格，使用th标签；表行单元格，使用td标签。

3.表格语义化：

一个完整的表格包含：table、caption、tr、th、td。为了更深一地对表格进行语义化，HTML引入了thead、tbody和tfoot标签。thead、tbody和tfoot把表格划分为3部分：表头、表身、表脚。表脚（tfoot）往往用于统计数据的。

<body>
    <table>
        <caption>考试成绩表</caption>
        <thead>    
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>英语</th>
                <th>数学</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小明</td>
                <td>80</td>
                <td>80</td>
                <td>80</td>
            </tr>
            <tr>
                <td>小红</td>
                <td>90</td>
                <td>90</td>
                <td>90</td>
            </tr>
            <tr>
                <td>小杰</td>
                <td>100</td>
                <td>100</td>
                <td>100</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>平均</td>
                <td>90</td>
                <td>90</td>
                <td>90</td>
            </tr>
        </tfoot>
    </table>
</body>

4.合并行：将“横向的N个单元格”或者“纵向的N个单元格”合并成一个单元格（类似word的表格合并），可以使用rowspan属性来合并行。

<body>
    <table>
        <tr>
            <td>姓名:</td>
            <td>小明</td>
        </tr>
        <tr>
            <td rowspan="2">喜欢水果:</td>
            <td>苹果</td>
        </tr>
        <tr>
            <td>香蕉</td>
        </tr>
    </table>
</body>

5.合并列：我们可以使用colspan属性来合并列。所谓的合并列，指的是将“横向的N个单元格”合并。

<!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>学生成绩表</title>
</head>
<body>
    <table>
        <caption>学生成绩表</caption>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>成绩</th>
        </tr>
        <tr>
            <td>杨老三</td>
            <td>男</td>
            <td>250</td>
        </tr>
        <tr>
            <td>王彩玲</td>
            <td>女</td>
            <td>520</td>
        </tr>
        <tr>
            <td>平均分</td>
            <td colspan="2">385</td>
        </tr>
    </table>
</body>
</html>

五、图片

1.图片标签：

在HTML中，我们可以使用img标签来显示一张图片。对于img标签，只需要掌握它的3个属性：src、alt和title。

<img src="图片路径" alt="" title="" />

（1）src属性：src用于指定这个图片所在的路径，这个路径可以是相对路径，也可以是绝对路径。

（2）alt属性和title属性：alt和title都是用于指定图片的提示文字。一般情况下，alt和title的值是相同的。

alt：当我们把"图片路径"去掉（也就是图片无法显示）后，此时可以看到浏览器会显示alt的提示文字，如果没有加上alt属性值，图片不显示时，就不会有提示文字。

title：当我们把鼠标移到图片上时，就会显示title中的提示文字

在实际开发中，对于img标签，src和alt这两个是必选属性，一定要添加；而title是可选属性，可加可不加。

2.图片路径：在HTML中，路径分为两种：绝对路径和相对路径。

（1）绝对路径：指的是图片在你的电脑中的完整路径。

D:/website/img/haizei.png

（2）相对路径：指的是图片相对当前页面的位置（好好琢磨这句话）

① page1.html引用图片

此时page1.html与haizei.png位于同一级目录中

<img src="D:/website/img/haizei.png" />

②page2.html引用图片

此时，haizei.png位于page2.html的上一级目录中的img文件夹下。“../”表示上一级目录。

<img src="../haizei.png" />

3.图片格式：

在网页中，图片格式有两种：一种是“位图”；另外一种是“矢量图”。

（1）位图：又叫做“像素图”，它是由像素点组成的图片。对于位图来说，放大图片后，图片会失真；缩小图片后，图片同样也会失真。

最常见位图的图片格式有3种（可以从图片后缀名看出来）：jpg（或jpeg）、png、gif。

①jpg可以很好地处理大面积色调的图片，适合存储颜色丰富的复杂图片，如照片、高清图片等。此外，jpg体积较大，并且不支持透明。

②png是一种无损格式，可以无损压缩以保证页面打开速度。此外，png体积较小，并且支持透明，不过不适合存储颜色丰富的图片。

③gif图片效果最差，不过它适合制作动画。实际上，小伙伴们经常在QQ或微信上发的动图都是gif格式的。

这里来总结一下：如果想要展示色彩丰富而高品质图片，可以使用jpg格式；如果是一般图片，为了减少体积或者想要透明效果，可以使用png格式；如果是动画图片，可以使用gif格式

<body>
    <img src="img/1.jpg" alt=""/><br/>
    <img src="img/2.png" alt=""/><br/>
    <img src="img/3.gif" alt=""/>
</body>

（2）矢量图：又叫做“向量图”，它是用计算机图形学中点、直线或多边形等表示出来的几何图像。是以一种数学描述的方式来记录内容的图片格式。（们可以使用y=kx来绘制一条直线，当k取不同值时就会绘制不同角度的直线，这就是矢量图的构图原理。）

矢量图最大的优点是：图片无论放大、缩小或旋转等都不会失真。最大的缺点是：难以表现色彩丰富的图片效果（非常差）。

矢量图常见格式有：“.ai”、“.cdf”、“.fh”、“.swf”。其中“.swf”格式比较常见，它指的是Flash动画，其他几种格式的矢量图比较少见，可以忽略。

在网页中，很少用到矢量图，除非是一些字体图标（iconfont）。

（3）对于位图和矢量图的区别，我们总结有以下4点。

（1）位图适用于展示色彩丰富的图片，而矢量图不适用于展示色彩丰富的图片。
（2）位图组成单位是“像素”，而矢量图组成单位是“数学向量”。
（3）位图受分辨率影响，当图片放大时会失真；而矢量图不受分辨率影响，当图片放大时不会失真。
（4）网页中的图片绝大多数都是位图，而不是矢量图。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="图片">
    <title>图片</title>
</head>
<body>
    <img src="panzi.jpg" alt="日落"><br/>
    <img src="hu.png" alt="蝴蝶结"><br/>
    <img src="R-C.gif" alt="小黄人"><br/>
</body>
</html>

六、超链接

1.超链接简介：

（1）a标签：在HTML中，我们可以使用a标签来实现超链接。

<a href="链接地址">文本或图片</a>

href表示你想要跳转到那个页面的路径（也就是地址），可以是相对路径，也可以是绝对路径。对于路径，我们可以将文本设置为超链接，这个叫做“文本超链接”。也可以将图片设置为超链接，这个叫做“图片超链接”。

点击“学习网”这个文字就会跳转
<body>
    <a href="http://www.lvyestudy.com">学习网</a>
</body>
点击图片跳转
<body>
    <a href="http://www.lvyestudy.com"><img src="img/lvye.png" alt="学习网"/></a>
</body>

（2）target属性：在HTML中，我们可以使用target属性来定义超链接打开窗口的方式。

<a href="链接地址" target="打开方式"></a>

a标签的target属性取值有4种，如下表所示。一般情况下，我们只会用到_blank这一个值。

2.内部链接：在HTML中，超链接有两种：外部链接和内部链接。外部链接指向的是“外部网站的页面”，而内部链接指向的是“自身网站的页面”。

3. 锚点链接：在HTML中，锚点链接其实是内部链接的一种，它链接地址（也就是href）指向的是当前页面的某个部分。所谓的锚点链接，简单来说，就是点击某一个超链接，然后它就会跳到当前页面的某一部分。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div>
        <a href="#article">推荐文章</a><br />
        <a href="#music">推荐音乐</a><br />
        <a href="#movie">推荐电影</a><br />
    </div>
    ……<br />
    ……<br />
    <div id="article">
        <h3>推荐文章</h3>
        <ul>
            <li>朱自清-荷塘月色</li>
            <li>余光中-乡愁</li>
            <li>鲁迅-阿Q正传</li>
        </ul>
    </div>
    ……<br />
    ……<br />
    <div id="music">
        <h3>推荐音乐</h3>
        <ul>
            <li>林俊杰-被风吹过的夏天</li>
            <li>曲婉婷-在我的歌声里</li>
            <li>许嵩-灰色头像</li>
        </ul>
    </div>
    ……<br />
    ……<br />
    <div id="movie">
        <h3>推荐电影</h3>
        <ul>
            <li>蜘蛛侠系列</li>
            <li>钢铁侠系统</li>
            <li>复仇者联盟</li>
        </ul>
    </div>
</body>
</html>

想要实现锚点链接，需要定义id和a标签。

其中，id属性就是元素的名称，这个id名是随便起的（一般是英文）。不过在同一个页面中，id是唯一的，也就是说一个页面不允许出现相同的id。

a标签的href属性取值时，需要在id前面加上“#”（井号），以表示这是一个锚点链接。

七、表单

1.关于表单：文本框、按钮、下拉菜单等就是常见的表单元素。

简单来说，如果一个页面仅仅供用户浏览，那就是静态页面。如果这个页面还能实现与服务器进行数据交互（像注册登录、话费充值、评论交流），那就是动态页面。

表单标签：有5种：form、input、textarea、select和option。

从外观上来划分，表单可以分为以下8种：单行文本框，密码文本框，单选框，复选框，按钮，文件上传，多行文本框，下拉列表。

2.form标签：

（1）form标签简介：跟创建一个表格一样，我们也必须要把所有表单标签放在form标签内部。

<form>
    //各种表单标签
</form>

（2）form标签属性：

①name属性：在一个页面中，表单可能不止一个，每一个form标签就是一个表单。为了区分这些表单，我们可以使用name属性来给表单进行命名。

<form name="myForm"></form>

②：method属性：

在form标签中，method属性用于指定表单数据使用哪一种http提交方法。method属性取值有两个：一个是“get”，另外一个是“post”。

get的安全性较差，而post的安全性较好。所以在实际开发中，使用post比较多。

<form method="post"></form>

③action属性：在form标签中，action属性用于指定表单数据提交到哪一个地址进行处理。

<form action="index.php"></form>

④target属性：form标签的target属性跟a标签的target属性是一样的，都是用来指定窗口的打开方式。一般情况下，我们只会用到“_blank”这一个属性值。

<form target="_blank"></form>

⑤enctype属性：在form标签中，enctype属性用于指定表单数据提交的编码方式。一般情况下，我们不需要设置，除非你用到上传文件功能。

3.input标签：

<input type="表单类型" />

4. 单行文本框：

（1）简介：在HTML中，单行文本框是使用input标签来实现的，其中type属性取值为“text”。单行文本框常见于注册登录中

<input type="text" />

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form method="post">
        姓名：<input type="text" />
    </form>
</body>
</html>

（2）单行文本框属性：

对于元素属性的定义，是没有先后顺序的。

5.密码文本框：

（1）简介：在单行文本框中输入的字符是可见的，而在密码文本框中输入的字符不可见。

<input type="password" />

（2）属性：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form method="post">
        账号：<input type="text" size="15" maxlength="10" /><br />
        密码：<input type="password" size="15" maxlength="10" />
    </form>
</body>
</html>

6.单选框：

（1）简介：在HTML中，单选框也是使用input标签来实现的，其中type属性取值为“radio”。

<input type="radio" name="组名" value="取值" />

name属性表示单选按钮所在的组名，而value表示单选按钮的取值，这两个属性必须要设置

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form method="post">
        性别:
        <input type="radio" name="gender" value="男" checked />男
        <input type="radio" name="gender" value="女" />女
    </form>
</body>
</html>

checked属性：如果想要在默认情况下，让一个单选框选中。

7.复选框：在HTML中，复选框也是使用input标签来实现的，其中type属性取值为“checkbox”。单选框只能选择一项，而复选框可以选择多项。

<input type="checkbox" name="组名" value="取值" />

name属性表示复选框所在的组名，而value表示复选框的取值。

8.按钮：在HTML中，常见的按钮有3种：普通按钮（button）；提交按钮（submit）；重置按钮（reset）。

（1）普通按钮button：在HTML中，普通按钮一般情况下都是配合JavaScript来进行各种操作的。

<input type="button" value="取值" />

value的取值就是按钮上的文字。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oBtn = document.getElementsByTagName("input");
            oBtn[0].onclick = function () 
            {
                alert("I ❤ HTML！");
            };
        }
    </script>
</head>
<body>
    <form method="post">
        <input type="button" value="表白"/>
    </form>
</body>
</html>

（2）提交按钮submit：在HTML中，提交按钮一般都是用来给服务器提交数据的。

<input type="submit" value="取值" />

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form method="post">
        <input type="button" value="普通按钮"/>
        <input type="submit" value="提交按钮"/>
    </form>
</body>
</html>

（3）重置按钮reset：在HTML中，重置按钮一般用来清除用户在表单中输入的内容。

<input type="reset" value="取值" />

重置按钮只能清空它“所在form标签”内表单中的内容，对于当前所在form标签之外的表单清除是无效的。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form method="post">
        账号：<input type="text" /><br />
        密码：<input type="password" /><br />
        <input type="reset" value="重置" /><br />
    </form>
    昵称：<input type="text" />
</body>
</html>

（4）小结：

①普通按钮一般情况下都是配合JavaScript来进行各种操作的。

②提交按钮一般都是用来给服务器提交数据的。

③重置按钮一般用来清除用户在表单中输入的内容。

（5）button标签：从上面我们知道，普通按钮、提交按钮以及重置按钮这3种按钮都是使用input标签来实现的。其实还有一种按钮是使用button标签来实现的。

<button></button>

9.文件上传：在HTML中，文件上传也是使用input标签来实现的，其中type属性取值为file。

<body>
    <form method="post">
        <input type="file"/>
    </form>
</body>

10.多行文本框：单行文本框只能输入一行文本，而多行文本框却可以输入多行文本。在HTML中，多行文本框使用的是textarea标签，而不是input标签。

<textarea rows="行数" cols="列数" value="取值">默认内容</textarea>

多行文本框的默认显示文本是在标签对内部设置，而不是在value属性中设置的。一般情况下，不需要设置默认显示文本。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form method="post">
        个人简介：<br/>
        <textarea rows="5" cols="20">请介绍一下你自己</textarea>
    </form>
</body>
</html>

对于文本框，现在我们可以总结出以下2点。

（1）HTML有3种文本框：单行文本框、密码文本框、多行文本框。
（2）单行文本框和密码文本框使用的都是input标签，多行文本框使用的是textarea标签。

11.下拉列表：

（1）简介：在HTML中，下拉列表由select和option这两个标签配合使用来表示的。这一点跟无序列表很像，其中无序列表是由ul和li这两个标签配合使用来表示。为了更好地理解，我们可以把下拉列表看成是一种“特殊的无序列表”。

<select>
    <option>选项内容</option>
    ……
    <option>选项内容</option>
</select>

（2）select标签属性：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form method="post">
        <select size="5">
            <option value="HTML">HTML</option>
            <option value="CSS">CSS</option>
            <option value="jQuery">jQuery</option>
            <option value="JavaScript">JavaScript</option>
            <option value="vue.js">Vue.js</option>
            <option value="HTML5">HTML5</option>
            <option value="CSS3">CSS3</option>
        </select>
    </form>
</body>
</html>

Chrome浏览器最低是4个选项，我们只能选取4及以上数字。

表单元素是否一定要放在form标签内呢？

表单元素不一定都要放在form标签内。对于要与服务器进行交互的表单元素就必须放在form标签内才有效。如果表单元素不需要跟服务器进行交互，那就没必要放在form标签内。

<!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>表单页面</title>
</head>
<body>
    <from method="post">
        昵称：<input type="text"/><br/>
        密码：<input type="password"/><br/>
        邮箱：<input type="text"/>
        <select>
            <option>qq.com</option>
            <option>163.com</option>
            <option>sina.com</option>
            <option>126.com</option>
        </select><br/>
        性别：
        <input type="radio" name="gender" value="男"/>男
        <input type="radio" name="gender" value="女"/>女<br/>
        爱好：
        <input type="checkbox" name="hobby" value="旅游"/>旅游
        <input type="checkbox" name="hobby" value="摄影"/>摄影
        <input type="checkbox" name="hobby" value="运动"/>运动<br/>
        个人简介：<br/>
        <textarea rows="30" cols="50">请介绍一下你自己</textarea><br/>
        上传个人照片：
        <input type="file"/>
        <hr/>
        <input type="button" value="立即注册"/>
    </from>
</body>
</html>

八、框架

1.iframe标签：在HTML中，我们可以使用iframe标签来实现一个内嵌框架。内嵌框架，说白了，就是在当前页面再嵌入另外一个网页。

<iframe src="链接地址" width="数值" height="数值"></iframe>

src是必选的，用于定义链接页面的地址。width和height这两个属性是可选的，分别用于定义框架的宽度和高度。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <iframe src="http://www.lvyestudy.com" width="200" height="150"></iframe>
</body>
</html>

瑶俏黛玛惹

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML--学习网教程

1.前端学习路线：HTML→CSS→JavaScript→jQuery→HTML5→CSS3→ES6→Vue.js→webpack→Node.js一、基本标签1.HTML结构：（1）文档声明：<!DOCTYPE html>（2）html标签对：<html></html>（3）head标签对：<head></head> 用于定义页面标题、定时刷新、外部文件等。（4）body标签对：<body></body..
复制链接

扫一扫