【HTML5】2.语法入门总结（第二部分）_

作者：寸_铁 | 2024-07-18 12:51:13

踩

0.思维导图

在这里插入图片描述

1.HTML5基本框架

HTML5 是HyperText Markup Language 5 的缩写，是一种标记语言。
第一个程序，基本框架。

<!DOCTYPE html>
<html lang="zh-CN">
<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>
   hello world
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12

在这里插入图片描述

2.语法举例（第二部分）

2.1.表格

<!DOCTYPE html>
<html lang="zh-CN">
<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>
    <!-- 表格属性写在表格标签里面，align对齐方式  cellpadding文字与边框距离，cellspacing边框之间的距离-->
    <table align="center"  border="1" cellpadding="2" cellspacing="0" width="200" height="100">
        <tr>
            <th>姓名</th>   <th>性别</th> <th>年龄</th>
        </tr>
        <tr><td>刘德华</td> <td>男</td>   <td>56</td></tr>
        <tr><td>张学友</td> <td>男</td>   <td>58</td></tr>
    </table>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

合并表格：

<!DOCTYPE html>
<html lang="zh-CN">
<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>
    <p>步骤</p>
    <p>1.确定行和列，跨列colspan、跨行rowsapn</p>
    <p>2.写代码</p>
    <p>3.删除多余单元格</p>
    <table width="500" height="249" border="1" cellspacing="0">
        <tr>
            <td></td>
            <td colspan="2"></td>
           
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
           
            <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
31
32
33

2.2.列表

无序列表

<!DOCTYPE html>
<html lang="zh-CN">
<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>
    <h4>你最喜欢吃的食物</h4>
    <!-- Unordered list -->
    <ul>
        <!-- List items -->
        <li>西瓜</li>
        <li>火锅</li>
        <li>菠萝</li>
    </ul>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

有序列表

<!DOCTYPE html>
<html lang="zh-CN">
<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>
    <h4>你最喜欢吃的食物</h4>
    <!-- ordered list -->
    <ol>
        <!-- List items -->
        <li>西瓜</li>
        <li>火锅</li>
        <li>菠萝</li>
    </ol>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

自定义列表

<!DOCTYPE html>
<html lang="zh-CN">
<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>
    <!-- 
    Define list
    define theme
    Define data 
    -->

    <dl>
        <dt>关注我们</dt>
        <dd>新浪微博</dd>
        <dd>微信邮箱</dd>
        <dd>联系电话</dd>
    </dl>
</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

2.3.表单域

<!DOCTYPE html>
<html lang="zh-CN">
<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 action="demo.php" method="post" name="name1"> 

    </from>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2.4.input表单元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>input 表单元素</title>
</head>
<body>
    <form action="xxx.php" method="get">
         <!-- text 文本框 用户可以里面输入任何文字 -->
        用户名: <input type="text" name="username" value="请输入用户名" maxlength="6">   <br> 
        <!-- password 密码框 用户看不见输入的密码 -->
        密码: <input type="password" name="pwd" >  <br> 
        <!-- radio 单选按钮  可以实现多选一 -->
        <!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1 -->
        <!-- 单选按钮和复选框可以设置checked 属性, 当页面打开的时候就可以默认选中这个按钮 -->
        性别: 男 <input type="radio" name="sex" value="男"> 女  <input type="radio" name="sex" value="女" checked="checked"> 外星人   <input type="radio" name="sex" value="人妖">   <br> 
        <!-- checkbox 复选框  可以实现多选 -->
        爱好: 吃饭 <input type="checkbox" name="hobby" value="吃饭"> 睡觉 <input type="checkbox" name="hobby">  打豆豆 <input type="checkbox" name="hobby" checked="checked"> 
        <br> 
        <!-- 点击了提交按钮,可以把 表单域 form 里面的表单元素 里面的值 提交给后台服务器 -->
        <input type="submit" value="免费注册">
        <!-- 重置按钮可以还原表单元素初始的默认状态 -->
        <input type="reset" value="重新填写">
        <!-- 普通按钮 button  后期结合js 搭配使用-->
        <input type="button" value="获取短信验证码"> <br>
        <!-- 文件域 使用场景 上传文件使用的 -->
        上传头像:  <input type="file" >
    </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

type属性值：
在这里插入图片描述
除type外的其他属性

2.5.label标签

<!DOCTYPE html>
<html lang="zh-CN">
<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>label</title>
</head>
<body>
    <!-- label 绑定标签，提升用户体验 -->
    <label for="username">用户名：</label> <input type="text" id="username"  /> <br />
    性别： <input type="radio" name="sex" id="male" value="male" /> <label for="male">男</label>
        <input type="radio" name="sex" id="female" value="female" /><label for="female">女</label> 
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2.6.下拉选择框

<!DOCTYPE html>
<html lang="zh-CN">
<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>12.select下拉选择标签</title>
</head>
<body>
    喜欢的城市：<select>
        <option value="重庆">重庆</option>
        <option selected="selected" value="湖南">湖南</option>
        <option value="深圳">深圳</option>
    </select>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

2.7.文本域

<!DOCTYPE html>
<html lang="zh-CN">
<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>13.textarea文本域标签</title>
</head>
<body>
    今日心得：<textarea name="xinde" id="xinde" cols="30" rows="10">2022年4月17日，天气阴。好好学习，天天向上。</textarea>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12

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