HTML用法介绍

程序员小十一2024-05-31 9:55

文章目录

一、HTML概念和模版

HTML的全称为超文本标记语言，它包括一系列标签组成，模版及各部分注释如下：

html 复制代码 
<!--声明文档类型-->
<!DOCTYPE html>

<!--HTML页面开始-->
<html lang="en">   

<!--1、HTML头部-->
<head>
    <meta charset="UTF-8">  <!--A、文档的编码：UTF-8-->
    <title>小十一</title>    <!--B、title：HTML标题-->
</head>

<!--2、HTML主体内容-->
<body>
    
</body>

</html>
<!--HTML页面结束-->

故而对HTML的学习，其实是学习各种标签的用法

二、常用标签及用法

HTML标签非常多，这里只介绍一些常用标签

1.p标签

p标签是段落标签，特点是独占一行显示，示例代码如下：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>P标签</title>
</head>
<body>

<!--p标签: paragraph  是霸道, 独占一行-->
<p>我是段落标签 -- 1</p>
<p>我是段落标签 -- 2</p>
<p>我是段落标签 -- 3</p>

</body>
</html>

运行结果如下：

2.span标签

span标签是文本标签，特点是连续显示在一行，示例代码如下：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>span标签</title>
</head>
<body>

<!--span: 文本标签 -- 连续的-->

<span>我是文本标签 -- 1</span>
<span>我是文本标签 -- 2</span>
<span>我是文本标签 -- 3</span>
<span>我是文本标签 -- 4</span>
<span>我是文本标签 -- 5</span>
<span>我是文本标签 -- 6</span>


</body>
</html>

运行结果如下：

3.h标签

h标签是标题标签，共6级，从h1-h6，，示例代码如下：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H标签</title>
</head>
<body>

<!-- 标题标签:  6级-->
<h1>我是1级标题</h1>
<h2>我是2级标题</h2>
<h3>我是3级标题</h3>
<h4>我是4级标题</h4>
<h5>我是5级标题</h5>
<h6>我是6级标题</h6>


</body>
</html>

运行结果如下：

4.hr标签

hr标签是分隔线标签，示例代码如下：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hr标签</title>
</head>
<body>

<!-- 标题标签:  6级-->
<h1>我是1级标题</h1>
<h2>我是2级标题</h2>
<h3>我是3级标题</h3>

<hr>

<p>我来比大小</p>

</body>
</html>

运行结果如下：

5.img标签

img标签是图片标签，里面有两个参数，src表示当前图片来源，也就是图片路径，alt表示报错提示，当图片加载失败的时候提示性话语，示例代码如下：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>img标签</title>
</head>
<body>
<!--img标签  image：图片标签  src：图片来源  alt：报错提示-->
<img src="小姐姐.jpg" alt="图片未加载">
</body>
</html>

运行结果如下：

6.a标签

a标签是超链接标签，里面有两个参数，href参数表示超链接网址，target参数表示链接的目标网页是否以当前窗口打开，target="_blank"表示新开窗口打开，target="_self"表示以当前窗口打开，示例代码如下：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>a标签</title>
</head>
<body>
<!--a标签：超链接标签   href：超链接网址-->
<a href="https://www.baidu.com" target="_blank">我是百度一下</a>
</body>
</html>

运行结果如下：

7.input标签

input标签用来获取用户的输入，代码示例如下：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input标签</title>
</head>
<body>
姓名: <input type="text">
密码: <input type="text">
</body>
</html>

运行结果如下：

我们发现，两个输入框位于同一行，因为input标签默认就是显示在一行，如果要实现换行，用到br标签，代码示例如下：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input标签</title>
</head>
<body>
姓名: <input type="text"><br>
密码: <input type="text">
</body>
</html>

运行结果如下：

在里面输入姓名和密码：

我们会发现这个很明显不合适，因为密码是明文显示，所以这里要将密码输入的input标签中，type参数值改为password，如下代码所示：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input标签</title>
</head>
<body>
姓名: <input type="text"><br>
密码: <input type="password">
</body>
</html>

运行之后再输入用户名和密码如下图：

我们可以打开豆瓣网站做个实验，输入用户名和密码，发现密码也是隐藏不显示，在源码中可以看到input标签的类型就是password

这时候我们把类型改为text看看，可以看到改掉之后，密码就是明文显示

综上，我们就知道，input标签中type类型值为text，代表当前输入的是用户名；type类型值为password，代表当前输入的是密码。

继续对上面的代码做升级，我们重新看下刚才的代码运行结果，会发现当光标点进去输入内容时候没有任何提示，一般都会有提示用户输入类型的话语

这里需要用到参数placeholder，参数值自己填入，示例代码如下：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input标签</title>
</head>
<body>
姓名: <input type="text" placeholder="请输入姓名"><br>
密码: <input type="password" placeholder="请输入密码">
</body>
</html>

运行结果如下：

继续升级代码，给用户添加性别，让用户可以选择自己性别，这里用到单选框，需要将type类型值改为radio，示例代码如下：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input标签</title>
</head>
<body>
姓名: <input type="text" placeholder="请输入姓名"><br>
密码: <input type="password" placeholder="请输入密码"><br>
性别: <input type="radio">男 <input type="radio">女
</body>
</html>

代码运行结果如下：

这时候我们点击性别会发现，两个都能同时选中，如下图：

这就没有实现我们想要的单选功能，怎么办呢？将两个性别输入框设为同一类型，需要用到name参数，值自己随便写，但是要求两个值要相同，代码如下所示：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input标签</title>
</head>
<body>
姓名: <input type="text" placeholder="请输入姓名"><br>
密码: <input type="password" placeholder="请输入密码"><br>
性别: <input type="radio" name="sex">男 <input type="radio" name="sex">女
</body>
</html>

运行之后结果如下图，这下就可以了，只能选其一：

继续改进代码，为用户设置一些爱好，这里要用多选框，因为用户爱好有多个，多选框的type类型值是checkbox，代码如下：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input标签</title>
</head>
<body>
姓名: <input type="text" placeholder="请输入姓名"><br>
密码: <input type="password" placeholder="请输入密码"><br>
性别: <input type="radio" name="sex">男 <input type="radio" name="sex">女<br>
爱好: <input type="checkbox">篮球 <input type="checkbox">足球 <input type="checkbox">排球
</body>
</html>

运行之后结果如下：

用户所有信息填好之后需要进行提交，这里提交使用type类型值是submit，代码如下：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input标签</title>
</head>
<body>
姓名: <input type="text" placeholder="请输入姓名"><br>
密码: <input type="password" placeholder="请输入密码"><br>
性别: <input type="radio" name="sex">男 <input type="radio" name="sex">女<br>
爱好: <input type="checkbox">篮球 <input type="checkbox">足球 <input type="checkbox">排球<br>
<input type="submit">
</body>
</html>

运行结果如下：

这时候提交是整体作为一份表单提交到服务器的后台，后台数据库再和表单里面的数据逐一匹配，所以刚才所有的信息必须是在一个大的框架里面，也就是一份表单中，就需要用到form标签，具体代码如下：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input标签</title>
</head>
<body>
<form action="后台网址">
    姓名: <input type="text" placeholder="请输入姓名"><br>
    密码: <input type="password" placeholder="请输入密码"><br>
    性别: <input type="radio" name="sex">男 <input type="radio" name="sex">女<br>
    爱好: <input type="checkbox">篮球 <input type="checkbox">足球 <input type="checkbox">排球<br>
    <input type="submit">
</form>

</body>
</html>

还有一种情况，用户填写完信息之后，发现有的填错了，想重新全部填写，在提交之前是可以重置的，重置用到type类型值是reset，代码如下：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input标签</title>
</head>
<body>
<form action="后台网址">
    姓名: <input type="text" placeholder="请输入姓名"><br>
    密码: <input type="password" placeholder="请输入密码"><br>
    性别: <input type="radio" name="sex">男 <input type="radio" name="sex">女<br>
    爱好: <input type="checkbox">篮球 <input type="checkbox">足球 <input type="checkbox">排球<br>
    <input type="submit">
    <input type="reset">
</form>

</body>
</html>

运行后结果如下，填完所有信息后，可以点击重置全部清空：

8.table标签

table标签是表格标签，用来在网页上创建表格，表格有行有列，行用tr标签 ，几行就是几个tr；列区分是否是表头，如果是表头则用th标签，我们可以先写代码看看：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table标签</title>
</head>
<body>

<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
</table>

</body>
</html>

代码运行结果如下：

可以看到表头确实加粗显示，很醒目，但是没有边框，这里要用到table标签的border属性，代码如下：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table标签</title>
</head>
<body>

<table border="1px">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
</table>

</body>
</html>

运行结果如下：

接下来再写表格中的内容，也就是数据，数据不是表头，没必要特殊显示加粗，所以在内容中的列用td标签，代码如下：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table标签</title>
</head>
<body>

<table border="1px">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>18</td>
        <td>男</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>19</td>
        <td>女</td>
    </tr>
</table>

</body>
</html>

运行后结果如下：

这时候我们发现还没有表名，设置表名用caption标签，代码如下：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table标签</title>
</head>
<body>

<table border="1px">
    <caption>学生信息表</caption>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>18</td>
        <td>男</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>19</td>
        <td>女</td>
    </tr>
</table>

</body>
</html>

运行后结果如下：

最后用table标签完成一个案例：酒店菜谱，代码如下

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<table border="1px">
    <caption>十一酒店菜谱</caption>
    <tr>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
        <th>星期四</th>
        <th>星期五</th>
        <th>星期六</th>
        <th>星期天</th>
    </tr>
    <tr>
        <td>辣椒炒肉</td>
        <td>剁椒鱼头</td>
        <td>麻辣鸡丝</td>
        <td>爆炒牛肚</td>
        <td>红烧鱼块</td>
        <td>上海青</td>
        <td>红烧肥肠</td>
    </tr>
    <tr>
        <td>海带汤</td>
        <td>球白菜</td>
        <td>油豆腐炒肉</td>
        <td>爆炒猪耳</td>
        <td>清蒸鱼</td>
        <td>红烧排骨</td>
        <td>蚂蚁上树</td>
    </tr>
</table>


</body>
</html>

运行后结果如下：

相关推荐
彭世瑜5 分钟前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund4046 分钟前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish6 分钟前
Token刷新机制
前端·javascript·vue.js·typescript·vue
小五Five7 分钟前
TypeScript项目中Axios的封装
开发语言·前端·javascript
小曲程序7 分钟前
vue3 封装request请求
java·前端·typescript·vue
临枫5418 分钟前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript
前端每日三省9 分钟前
面试题-TS(八)：什么是装饰器（decorators）？如何在 TypeScript 中使用它们？
开发语言·前端·javascript
小刺猬_98510 分钟前
（超详细）数组方法 ——— splice( )
前端·javascript·typescript
渊兮兮11 分钟前
Vue3 + TypeScript +动画，实现动态登陆页面
前端·javascript·css·typescript·动画
鑫宝Code11 分钟前
【TS】TypeScript中的接口(Interface):对象类型的强大工具
前端·javascript·typescript
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO07【目标跟踪】相机运动补偿08Unity中PICO实现 隔空取物 和 接触抓取物体09RAG 实践- Ollama+RagFlow 部署本地知识库10怎样让音频速度变慢？请跟随以下方法进行操作