小小林熬夜学编程

这个屌丝很懒，什么也没留下！

热门标签

前端基础-html_html首页前端

作者：小小林熬夜学编程 | 2024-05-27 04:40:10

踩

html首页前端

1.p标签

GB2312 、BIG5 、GBK 和 UTF-8，

简体中文，繁体中文，简体和繁体，万国码

为了使网页更具有语义化，我们经常会在页面中用到标题标签。HTML 提供了 6 个等级的网页标题，

即<h1> - <h6> 。

    <h1>一级标题</h1>
    <h4>四级标题</h4>
    <p>第一段<strong>加粗的文字</strong></p>
	<p>第二段 <p>
	<p>第三段<p>
    <p>作者: xxxx<br/>xxxx</p>
1
2
3
4
5
6

2.字体格式设置

在这里插入图片描述
快速复制一行，
鼠标放在你索要复制的行上，ctrl +c 然后 ctrl+v

	<p>文字<em>样式</em>ss</p>
    <p>文字<i>样式</i>ss</p>
    <p>文字<strong>样式</strong>得得</p>
    <p>文字<del><i><strong>样式</strong></i>得得</del></p>
1
2
3
4

3 div,span

1.<div> 标签用来布局，但是现在一行只能放一个<div>。大盒子

2. <span> 标签用来布局，一行上可以多个 <span>。小盒子

    <div>div独占一行</div>133
    <div>div独占一行</div>133
    <span>高数</span>
    <span>英语 </span>
    <span>语文</span>
  
1
2
3
4
5
6

4图像标签

前提条件，图片和网页文件要在同一个文件下

<body>
    图片标签的使用
    <img src="1.jpg" width="200" height="100"/>
  
</body>
1
2
3
4
5

想要换行显示

<body>
    图片标签的使用<br \>
    <img src="1.jpg" width="200" height="100"/>
</body>
1
2
3
4

<body>
    <h4>图片标签的使用</h4>
    <img src="1.jpg" width="200" height="100"/>
</body>
1
2
3
4

在这里插入图片描述

<body>
    <h4>图片标签的使用</h4>
    <img src="1.jpg" width="200" height="100"/>
    <h4>图片标签alt的使用</h4>
    <img src="D:\photo\1.jpg"  alt="图片加载失败"/>
    <h4>图片title的使用</h4>
    <img src="1.jpg" width="200" height="100" alt="加载失败" title="图片"/>    
</body>
1
2
3
4
5
6
7
8

宽度和高度一般只修改一个即可，不然可能会出现失帧

<body>
    
    <img src="1.jpg" width="200"  alt="加载失败" title="二次元图片"/>    
    <h4>图片title的使用</h4>
    <img src="1.jpg" width="200" height="200" alt="加载失败" title="二次元图片" />
    <h4>图片title的使用</h4>
    <img src="1.jpg" width="200" height="10" alt="加载失败" title="二次元图片" />
</body>
1
2
3
4
5
6
7
8

border一般会通过css指定

5.路径

**目录文件夹：**就是普通文件夹，里面只不过存放了我们做页面所需要的相关素材，比如 html 文件、图片等。

**根目录：**打开目录文件夹的第一层就是根目录

在这里插入图片描述

6.链接标签

单词 anchor 的缩写，意为：锚。

6.1外部链接

在这里插入图片描述
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>

<a href="https://www.baidu.com" target="_bank"><img src="1.jpg" \></a>
1

6.2内部链接

内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可，例如 < a href=“index.html”> 首页。

空链接: 如果当时没有确定链接目标时，< a href=“#”> 首页。

下载链接: 如果 href 里面地址是一个文件或者压缩包，会下载这个文件。

    <h4>外部链接</h4>
    <a href="https://www.baidu.com">百度</a>
    <h4>内部链接</h4>
    <a href="demo.html">demo页面</a>
    <h4>空链接</h4>
    <a href="#">待定</a>
    <h4>下载链接:链接地址是.exe文件，zip等压缩包</h4>
    <a href="test.zip">下载文件</a>
1
2
3
4
5
6
7
8

6.3锚点链接

锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置.
需要以下两步操作

1 在链接文本的 href 属性中，设置属性值为 #名字的形式，如<a href="#two"> 第2集 </a>

2 找到目标位置标签，里面添加一个 id 属性 = 刚才的名字，如：<h3 id="two">第2集介绍</h3>

<!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 id="top">文字</h4>
    <h4>文字</h4>
    <h4>文字</h4>
    <a href="#img">
        <h4>图片</h4>
    </a>

    文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字<br \>

    文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字<br \>

    文字文字文字文字
    文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字。<br \>

    文字文字文字文字文字文字文字文字文字文字文字文字文字文字<br \>

    <h4>标题</h4>

    xxxxxxxxxxxxx<br \>

    xxxxxxxxxxxxxxxxx<br \>

    xxxxxxxxxxxxxxxxx。<br \>
    xxxxxxxxxxxxx<br \>
    xxxxxxxxxxxxx<br \>

    xxxxxxxxxxxxx<br \>

    xxxxxxxxxxxxx<br \>

    xxxxxxxxxxxxx<br \>

    xxxxxxxxxxxxx<br \>

    xxxxxxxxxxxxx<br \>

    xxxxxxxxxxxxx<br \>

    xxxxxxxxxxxxx<br \>

    <br \>

    　　xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx：<br \>

    　　xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx。<br \>

    　　xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    <br \>
    　　xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br \>

    　　xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br \>

    　xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    <br \>
    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    <br \>
    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    <br \>
    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    <br \>
    　　xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br \>
    <h4 id="img">超大杯影像旗舰图</h4>
    <img src="1.jpg" width="200">
    <a href="#top">
        <h6>返回顶部</h6>
    </a>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

注释

快捷键: ctrl + /

综合案例

<!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>
    
    1.圣诞是怎样由来的<br>
    2.<a href="#people">圣诞老人的由来</a><br>
    3.<a href="#tree">圣诞树的由来</a><br>
    <h2></h2>
    
    <p>圣诞节是基督教世界最大的节日。一般认为12月25日作为圣诞节可能开始于公元336年的罗马教会。4世纪初，1月6日是罗马帝国东部各教会纪念耶稣降生和受洗的双重节日，即上帝通过耶稣向世人显示自己。
    这一天又是罗马历书的冬至节，意味着万物复苏的开始。可能由于这个原因，罗马教会才选择这一天作为圣诞节。后来，因为各地教会使用的历书不同，具体日期不能统一，于是就把12月24日到第二年的1月6日定为圣诞节节期（Christmas
    Tide），各地教会可以根据当地具体情况在这段节期之内庆祝圣诞节。
    在欧美许多国家里，人们非常重视这个节日，把它和新年连在一起，而庆祝活动之热闹与隆重大大超过了新年，成为一个全民的节日。12月24日平安夜、12月25日圣诞节的主要纪念活动都与耶稣降生的传说有关 。</p>
    <img src="./images/t1.gif">
    
    
    <h2 id="people">圣诞老人的由来</h2>
    
    <p>圣诞节当然少不了<a href="oldman.html" target="_bank">圣诞老人，</a>根据圣经记载，书中并没有提起这一号人物。到底他是如何成为圣诞的主角之一呢？</p>
    
    
    
    
    <p>相传在一千六百多年前，荷兰巴里地方有一个老人，名叫尼古拉斯，他一生最爱帮助贫穷的人家。其中有一次他帮助三个贫穷的少女，送她们三袋金子以逃过被卖的不幸。
    
    </p>
    
    <p>到了一八二二年，由荷兰传教士把这位伟大慈善家的故事传到美国，装扮圣诞老人渐渐地流行于世界各国。根据调查，以上故事还有下文；当尼古拉斯偷偷把其中一袋金子送给其中一名女子时，他把金子从其中一个窗户扔进去，恰好掉进晾在壁炉上的一只长袜中。于是，将礼物放在圣诞袜子的送礼方法便传到至今。</p>
    
    
    
    
    
    在平安夜里，孩子总会把一双双色彩缤纷的袜子挂在床头，然后在袜子旁边放杯热牛奶让圣诞老人喝，以让劳苦功高的圣诞老人解渴，并送份大礼给自己。?
    
    
    <img src="./images/t2.jpg">
    <h2 id="tree">圣诞树的由来</h2>
    
    圣诞一直是庆祝圣诞节不可少的装饰物，如果家中没有圣诞树，就大大减少了过节气氛。关于圣诞树的来源有多种不同的传说。
    
    其中一个是说：大约在十六世纪，圣诞树最先出现在德国，德国人把长青的松柏枝拿到屋中去摆设，将之成为圣诞树。后来，由德国人马丁路德把蜡烛放在树林中的枞树枝，然后点燃蜡烛，使它看起来像是引导人们到伯利恒去。而近今日，人们已经改用粉色的小灯泡了。
    
    
    
    另一个传说记载。在很久以前，曾有一位农民，在圣诞节那天遇到一个穷苦小孩，他热情地接待了这个儿童。儿童临走时折下一根松枝插在地上，松枝立即变成一棵树，上面都挂满礼物，以答谢农民的好意。
    
    圣诞树真正出现在圣诞节时，首先见于德国，之后又传入欧洲和美国，并以其优美的姿态，成为圣诞节不可缺少的装饰。圣诞树的种类繁多，有天然松柏圣诞树、也有人造圣诞树及白色圣诞树。
    
    
    
    
    
    
    
    <p>每棵圣诞树上都挂满琳琅满目的装饰品，但每棵树的顶端必定有个特大的星星，象征三博士跟随该星而找到耶稣，而且也只有该家庭的一家之主可以把这棵希望之星挂上。</p>
    <img src="./images/t3.jpg">
    
    <p>更多内容可以<a href="https://www.baidu.com" target="_bank">百度一下</a></p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

oldman.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>
    <h1>圣诞老人 （西方文化的传说人物）</h1>
    
    <p>圣诞老人（Santa Claus）别称Saint Nick、Kris Kringle、Father
    Christmas或Santa（爱尔兰英语的Santy），一位专门在圣诞节前夜时悄悄赠送礼物给小孩子的神秘人物，是节日主题的代表角色之一。他普遍被认为是基督教的圣人圣·尼古拉斯（Saint Nicholas）的衍生形象。
    传说每到12月24日晚上，有个神秘人会乘驾由9只驯鹿拉的雪橇在天上飞翔，挨家挨户地从烟囱进入屋里，然后偷偷把礼物放在好孩子床头的袜子里，或者堆在壁炉旁的圣诞树下。他在一年中的其他时间里，都是忙于制作礼物和监督孩子们的行为。
    虽然没有人真的见过神秘人的样子，但是人们会装扮成他的样子来给孩子送上礼物。他通常被描述为一位老人，头戴红色帽子，大大的白色胡子，一身红色棉衣，脚穿红色靴子的样子，拿着装有礼物的大袋子，因为总在圣诞节前夜出现派发礼物，所以习惯地称他为“圣诞老人”。</p>
    <img src="./images/oldman.jpg">
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

7.表格

在这里插入图片描述

1. <table> </table> 是用于定义表格的标签。

2. <tr> </tr> 标签用于定义表格中的行，必须嵌套在 <table> </table>标签中。

3. <td> </td> 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。

4. 字母 td 指表格数据（table data），即数据单元格的内容。
1
2
3
4
5
6
7

2.一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示.

<th>标签表示 HTML 表格的表头部分(table head 的缩写)

在这里插入图片描述

3.表格标签这部分属性我们实际开发我们不常用，后面通过 CSS 来设置.

目的有2个:

1. 记住这些英语单词,后面 CSS 会使用.

2. 直观感受表格的外观形态.
1
2
3

在这里插入图片描述

cellpadding=20

cellspaing=0

1.5 表格结构标签

使用场景:因为表格可能很长,为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分.

在表格标签中，分别用：<thead>标签表格的头部区域、<tbody>标签表格的主体区域. 这样可以更好的分清表

格结构。

```

：用于定义表格的头部。内部必须拥有标签。一般是位于第一行。
：用于定义表格的主体，主要用于放数据本体。
以上标签都是放在

标签中。

```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>
    <table align="center" height="230" width="500" cellspacing="0" border="1">
    <thead>
        <tr>
            <th>排名</th>
            <th>关键字</th>
            <th>趋势</th>
            <th>今日搜索</th>
            <th>最近七天</th>
            <th>相关链接</th>

        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="down.jpg" alt="xx"></td>
            <td>345</td>
            <td>123</td>
            <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>

        </tr>
        
            <td>2</td>
            <td>鬼吹灯</td>
            <td><img src="down.jpg" alt="xx"></td>
            <td>345</td>
            <td>123</td>
            <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
                
        </tr>
        <tr>
            <td>3</td>
            <td>鬼吹灯</td>
            <td><img src="up.jpg" alt="xx"></td>
            <td>345</td>
            <td>123</td>
            <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
    
        </tr>
        <tr>
            <td>4</td>
            <td>鬼吹灯</td>
            <td><img src="down.jpg" alt="xx"></td>
            <td>345</td>
            <td>123</td>
            <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        
        </tr>
        <tr>
            <td>5</td>
            <td>鬼吹灯</td>
            <td><img src="down.jpg" alt="xx"></td>
            <td>345</td>
            <td>123</td>
            <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        
        </tr>
        <tr>
            <td>6</td>
            <td>鬼吹灯</td>
            <td><img src="down.jpg" alt="xx"></td>
            <td>345</td>
            <td>123</td>
            <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        
        </tr>
    </tbody>
    </table>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

1.6 合并单元格

特殊情况下,可以把多个单元格合并为一个单元格, 这里同学们会最简单的合并单元格即可.

1. 先确定是跨行还是跨列合并。

2. 找到目标单元格. 写上合并方式 = 合并的单元格数量。比如：<td colspan="2"></td>。

3. 删除多余的单元格。
1
2
3
4
5

原始表格

代码如下

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <table align="center" height="300" width="500" cellspacing="0" border="1">
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

以第一行第二列为目标单元格跨列合并单元格

合并后

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <table align="center" height="300" width="500" cellspacing="0" border="1">
    <tr>
      <td></td>
      <td colspan="2"></td> <!--2.找到目标单元格 写上合并方式 = 合并的单元格数量。 -->
      <!-- 3.删除多余单元格 -->
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

8列表标签

1无序列表

表格是用来显示数据的，那么列表就是用来布局的。

列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。

根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表。

在这里插入图片描述

1. 无序列表的各个列表项之间没有顺序级别之分，是并列的。

2. <ul></ul> 中只能嵌套 <li></li>，**直接在 <ul></ul> 标签中输入其他标签或者文字的做法是不被允许的。**

3. <li> 与 </li> 之间相当于一个容器，可以容纳所有元素。

4. 无序列表会带有自己的样式属性，但在实际使用时，我们会使用 CSS 来设置。
1
2
3
4
5
6
7

2有序列表

在这里插入图片描述

3.自定义列表

在这里插入图片描述


1. <dl></dl> 里面只能包含 <dt> 和 <dd>。

2. <dt> 和 <dd>个数没有限制，经常是一个<dt> 对应多个<dd>。
1
2
3
4

    <dl>
        <dt>联系我们</dt>
        <dd>QQ</dd>
        <dd>微信</dd>
        <dd>电话</dd>

    </dl>
1
2
3
4
5
6
7

在这里插入图片描述

9.表单标签

使用表单目的是为了收集用户信息。

在我们网页中，

我们也需要跟用户进行交互，收集用户资料，此时就需要表单。

在 HTML 中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分构成。

在这里插入图片描述

表单域是一个包含表单元素的区域。

在 HTML 标签中，

<form> 标签用于定义表单域，以实现用户信息的收集和传递。

<form> 会把它范围内的表单元素信息提交给服务器.

在这里插入图片描述

3.4.1 表单元素

在英文单词中，input 是输入的意思，而在表单元素中标签用于收集用户信息。

在 <input>标签中，包含一个 type 属性，根据不同的 type 属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）。

<input type="属性值" /> 
<input /> 标签为单标签
type 属性设置不同的属性值用来指定不同的控件类型
type 属性的属性值及其描述如下：
1
2
3
4

在这里插入图片描述

<body>
    <form action="demo.php" method="get" name="name1">
        用户名<input type="text"><br>
        密码<input type="password">
    </form>

</body>
1
2
3
4
5
6
7

除 type 属性外，<input>标签还有其他很多属性，其常用属性如下：

单选框必须要有相同的name

1. name 和value 是每个表单元素都有的属性值,主要给后台人员使用.

2. name 表单元素的名字, 要求 单选按钮和复选框要有相同的name值.

3. checked属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素.

4. maxlength 是用户可以在表单元素输入的最大字符数, 一般较少使用.
1
2
3
4
5
6
7

<body>
    <form action="demo.php" method="get" name="name1">
        用户名<input type="text" name="username" value="请输入用户名"><br>
        密码<input type="password" name="pwd" ><br>
        性别 男<input type="radio" name="sex" value="男">女<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="打豆豆">
    </form>

</body>
1
2
3
4
5
6
7
8
9

checked=“checked”

默认勾选。

input中加上

value="请输入用户名" maxlength="6"
1

name 表单元素的名字, 要求单选按钮和复选框要有相同的name值.
checked属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素.
maxlength 是用户可以在表单元素输入的最大字符数, 一般较少使用.

1 有些表单元素想刚打开页面就默认显示几个文字怎么做?

可以给这些表单元素设置 value 属性=“值”

2 页面中的表单元素很多，如何区别不同的表单元素?

name 属性：当前 input 表单的名字，后台可以通过这个 name 属性找到这个表单。页面中的表单很多，

name 的主要作用就是用于区别不同的表单。

submit

<input type="submit" value="免费注册">
1

        <input type="submit" value="免费注册">
        <input type="reset" value="重新填写">
1
2

在这里插入图片描述

        <!-- button 结合js使用 -->
        <input type="button" value="发送验证码"><br>
        <!-- file上传文件 -->
        <input type="file">
1
2
3
4

在这里插入图片描述

标签为 input 元素定义标注（标签）。

标签用于绑定一个表单元素, 当点击标签内的文本时，浏览器就会自动将焦点(光标)转到或者

选择对应的表单元素上,用来增加用户体验.
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
</head>
<body>

<form action="{{ url_for('register') }}" method="POST" name="name1">
    <table>
        <tr>
            <td>用户名</td>
            <td><input type="text" name="username" value="请输入用户名"></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="password" name="pwd"><br></td>
        </tr>
        <tr>
            <td>
                <label for="male">男</label>
                <input type="radio" name="sex" value="男" id="male">
            <td>
                <label for="female">女</label>
                <input type="radio" name="sex" value="女" id="female"><br>
            </td>
        </tr>
        <tr>
            <td>
                爱好:
            </td>
            <td>
                <label for="chi">吃饭</label>
                <input type="checkbox" name="hobby" value="吃饭" id="chi">
                <label for="shui">睡觉</label>
                <input type="checkbox" name="hobby" value="吃饭" id="shui">
                <label for="da">打豆豆</label>
                <input type="checkbox" name="hobby" value="打豆豆" id="da">
            </td>
        </tr>

    </table>
</form>


</body>
</html>  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

3.4 表单控件(表单元素)

在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。

接下来我们讲解:

input输入表单元素
select下拉表单元素
textarea 文本域元素

在这里插入图片描述

1. <select> 中至少包含一对<option> 。

2. 在<option> 中定义 selected =“ selected " 时，当前项即为默认选中项。
1
2
3

<body>
    籍贯:
    <select name="" id="">
        <option>河北</option>
        <option>山东</option>
        <option selected="selected">火星</option>
        <option>水星</option>
        <option>金星</option>

    </select>
</body>
1
2
3
4
5
6
7
8
9
10
11

3.4.4 表单元素

使用场景: 当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用标签。

在表单元素中，标签是用于定义多行文本输入的控件。

使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。

在这里插入图片描述

1. 通过 <textarea> 标签可以轻松地创建多行文本输入框。

2. cols=“每行中的字符数” ，rows=“显示的行数”，我们在实际开发中不会使用，都是用 CSS 来改变大小。
1
2
3

<body>
    <form>
        今日反馈
        <textarea cols="50" rows="5">pink老师yyds
        </textarea>
    </form>
</body>
1
2
3
4
5
6
7

3.5 表单元素几个总结点

\1. 表单元素我们学习了三大组 input 输入表单元素 select 下拉表单元素 textarea 文本域表单元素.

\2. 这三组表单元素都应该包含在form表单域里面,并且有 name 属性.

在这里插入图片描述

\3. 有三个名字非常相似的标签:

(1) 表单域 form 使用场景: 提交区域内表单元素给后台服务器

(2) 文件域 file 是input type 属性值使用场景: 上传文件

(3) 文本域 textarea 使用场景: 可以输入多行文字, 比如留言板网站介绍等…

\4. 我们当前阶段不需要提交表单元素,所以我们只负责表单元素的外观形态即可.

综合案例

<!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>
    <h3>青春不常在，抓紧谈恋爱</h3>
    <form>
    <table width="500" >
        <thead>
            <td></td>
            <td></td>
        </thead>
        <tbody>
            <tr>
                <td>性别</td>
                <td>
                    <input type="radio" name="sex" id="nan"><label for="nan"><img src="images/man.jpg">男</label>
                    
                    <input type="radio" name="sex" id="nv"><label for="nv"><img src="images/women.jpg">女</label>
                
                </td>
            </tr>
            <tr>
                <td>生日</td>
                <td>
                    <select>
                        <option selected="selected">--请选择年份--</option>
                        <option>2000</option>
                        <option>2001</option>
                        <option>2002</option>

                    </select>
                    <select>
                        <option selected="selected">--请选择月份--</option>
                        <option>7</option>
                        <option>8</option>
                        <option>9</option>
                    
                    </select>
                    <select>
                        <option selected="selected">--请选择日--</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>所在地区</td>
                <td><input type="text" value="北京思密达"></td>
            </tr>
            <tr>
                <td>婚姻状态</td>
                <td><input type="radio" name="hunyin" id="no-marry" checked="checked"><label for="no-marry" >未婚</label>
                    <input type="radio" name="hunyin" id="yes-marry"><label for="yes-marry">已婚</label >
                    <input type="radio" name="hunyin" id="but"><label for="but">离婚</label>
                </td>
            </tr>
            <tr>
                <td>学历</td>
                <td><input type="text" value="博士后"></td>
            </tr>
            <tr>
                <td>喜欢的类型</td>
                <td>
                    <input type="checkbox" name="leixing" id="1"><label for="1">妩媚的</label>
                    <input type="checkbox" name="leixing" id="2"><label for="2">可爱的</label>
                    <input type="checkbox" name="leixing" id="3"><label for="3">小鲜肉</label>
                    <input type="checkbox" name="leixing" id="4"> <label for="4">老腊肉</label>
                    <input type="checkbox" name="leixing" id="5" checked="checked"> <label for="5">都喜欢</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">我同意注册条款和会员加入标准</td>
            </tr>
            <tr>
                <td></td>
                <td><a href="#">我是会员，立即dengl</a></td>
            </tr>
            <tr>
                <td></td>
                <td>
                    我承诺
                    <ul>
                        <li>年满18岁、单身</li>
                        <li>抱着严肃的态度</li>
                        <li>真诚寻找另一半</li>

                    </ul>
                </td>
            </tr>
        </tbody>
    </table>
    </form>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111

在这里插入图片描述

10查阅文档

MDN

W3C

前端学习推荐pink老师

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/629912