您的位置：首页 > 汽车 > 新车 > 成都网络推广公司排行榜_重庆seo技术交流_打开百度搜索网站_百度提交入口网址是指在哪里

成都网络推广公司排行榜_重庆seo技术交流_打开百度搜索网站_百度提交入口网址是指在哪里

2024/12/26 18:07:44 来源：https://blog.csdn.net/rch041126/article/details/142203727  浏览:  次   关键词：成都网络推广公司排行榜_重庆seo技术交流_打开百度搜索网站_百度提交入口网址是指在哪里
成都网络推广公司排行榜_重庆seo技术交流_打开百度搜索网站_百度提交入口网址是指在哪里

文章目录

  • 1 HTML基础认识
    • 1.1 HTML注释
    • 1.2 HTML标签的结构
  • 2 HTML标签
    • 2.1 排版标签
      • 2.1.1 标题标签
      • 2.1.2 段落标签
      • 2.1.3 换行标签
      • 2.1.4 水平线标签
    • 2.2 文本格式化标签
        • 2.2.1 文本格式化标签
    • 2.3 媒体标签
      • 2.3.1 图片标签
      • 2.3.2 路径
        • 2.3.2.1 绝对路径
        • 2.3.2.2 相对路径
          • 2.3.2.2.1 同级目录
          • 2.3.2.2.2上级目录
          • 2.3.2.2.3下级目录
      • 2.3.3 音频标签
      • 2.3.4 视频标签
    • 2.4 链接标签
  • 3 综合案例
    • 3.1 招聘
  • 4 列表标签
    • 4.1 无序列表
    • 4.2 有序列表
    • 4.3 自定义列表
  • 5 表格标签
    • 5.1 基本标签
    • 5.2 属性
    • 5.3 表格标题和表头单元格标签
    • 5.4 表格的结构标签
    • 5.5 合并单元格
  • 6 表单标签
    • 6.1 input系列标签
      • 6.1.1 input标签
      • 6.1.2 单选框标签
      • 6.1.3 上传多个文件
      • 6.1.4 按钮标签
    • 6.2 button标签
    • 6.3 select下拉菜单
    • 6.4 文本域标签
    • 6.5 label标签
  • 7 语义化标签
  • 8 字符实体
  • 9 案例
    • 9.1 学生信息表
    • 9.2 表单

1 HTML基础认识

1.1 HTML注释

在这里插入图片描述

1.2 HTML标签的结构

在这里插入图片描述
在这里插入图片描述

2 HTML标签

2.1 排版标签

2.1.1 标题标签

在这里插入图片描述

<!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><!-- CTRL + D --><h1>一级标题</h1><h2>二级标题</h2><h3>二级标题</h3><h4>二级标题</h4><h5>二级标题</h5><h6>二级标题</h6>
</body>
</html>

2.1.2 段落标签

在这里插入图片描述

<!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><p>前端开发入门教程，web前端零基础html5 +css3+前端项目视频教程</p><p>你好，再见</p>
</body>
</html>

2.1.3 换行标签

在这里插入图片描述

<!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><p>dddddddddd    <br> vvvvvvvvvvvvvvvvvv</p>
</body>
</html>

2.1.4 水平线标签

在这里插入图片描述

<!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><p>标题</p><hr><p>dddddddddd    <br> vvvvvvvvvvvvvvvvvv</p>
</body>
</html>

2.2 文本格式化标签

2.2.1 文本格式化标签

在这里插入图片描述
在这里插入图片描述

<!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>加粗<b>加粗</b><u>下划线</u><ins>下划线</ins><i>倾斜</i><em>倾斜</em><s>删除</s><del>删除</del>
</body>
</html>

2.3 媒体标签

2.3.1 图片标签

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述


<!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><!-- alt：替换文本，当图片不显示的时候显示文字 --><!-- width和height属性只需要给出一个值，另一个等比例缩放 -- 好处就是图片不变形 --><img src="c:\Users\RCH\Pictures\Screenshots\屏幕截图 2024-09-16 160538.png" alt="这是替换文本" title="这是图片" width="200" height="800 ">
</body>
</html>

2.3.2 路径

2.3.2.1 绝对路径

在这里插入图片描述

<!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><img src="c:\Users\RCH\Pictures\Screenshots\屏幕截图 2024-09-17 202555.png" alt="">
</body>
</html>
2.3.2.2 相对路径

在这里插入图片描述

2.3.2.2.1 同级目录

在这里插入图片描述

2.3.2.2.2上级目录

在这里插入图片描述

2.3.2.2.3下级目录

在这里插入图片描述

2.3.3 音频标签

在这里插入图片描述

<!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><audio src="" controls autoplay loop></audio>
</body>
</html>

2.3.4 视频标签

在这里插入图片描述

<!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><video src="" controls autoplay loop></video>
</body>
</html>

2.4 链接标签

在这里插入图片描述
在这里插入图片描述

<!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><a href="https://www.baidu.com" target="_blank">百度</a><br><a href="./01-标题标签.html">01标签</a><br><!-- 当开发网站初期，我们还不知道网站地址 的时候，href的值书写#（空连接）--><a href="#">空连接</a>
</body>
</html>

3 综合案例

3.1 招聘

<!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><h1>招聘岗位</h1><hr><h2>职位描述</h2><p>前景广阔</p><h2>岗位要求</h2><p>全日制<strong>全日制</strong></p><p>有工作经验</p><h2>工作地址</h2><img src="c:\Users\RCH\Pictures\Screenshots\屏幕截图 2024-09-18 215102.png" alt="无 ">
</body>
</html>

4 列表标签

4.1 无序列表

在这里插入图片描述

<!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><ul><li>榴莲</li><li>苹果</li><li>香蕉</li></ul>
</body>
</html>

4.2 有序列表

在这里插入图片描述

<!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><ol><li>张三:100</li><li>李四:66</li><li>小米:199</li></ol>
</body>
</html>

4.3 自定义列表

在这里插入图片描述

<!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><dl><dt>帮助中心</dt><dd>账户管理</dd><dd>购物指南</dd></dl>
</body>
</html>

5 表格标签

5.1 基本标签

在这里插入图片描述

<!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 包含 tr，tr包含td --><table><tr><td>姓名</td><td>成绩</td><td>评语</td></tr><tr><td>小明</td><td>100分</td><td>好好学习，天天向上</td></tr><tr><td>小白</td><td>99分</td><td>好好学习，天天向上</td></tr><tr><td>小红</td><td>90分</td><td>好好学习，天天向上</td></tr></table>
</body>
</html>

5.2 属性

在这里插入图片描述

<!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 包含 tr，tr包含td --><table border="1" width="500" height="300"><tr><td>姓名</td><td>成绩</td><td>评语</td></tr><tr><td>小明</td><td>100分</td><td>好好学习，天天向上</td></tr><tr><td>小白</td><td>99分</td><td>好好学习，天天向上</td></tr><tr><td>小红</td><td>90分</td><td>好好学习，天天向上</td></tr></table>
</body>
</html>

5.3 表格标题和表头单元格标签

在这里插入图片描述

<!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 border="1"><caption><strong>成绩单</strong></caption><tr><th>姓名</th><th>成绩</th><th>评语</th></tr><tr><td>张三</td><td>500分</td><td>善</td></tr><tr><td>李四</td><td>100分</td><td>善</td></tr><tr><td>王五</td><td>50分</td><td>善</td></tr></table>
</body>
</html>

5.4 表格的结构标签

在这里插入图片描述

<!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 border="1"><caption><strong>成绩单</strong></caption><thead><tr><th>姓名</th><th>成绩</th><th>评语</th></tr></thead><tbody><tr><td>张三</td><td>500分</td><td>善</td></tr><tr><td>李四</td><td>100分</td><td>善</td></tr><tr><td>王五</td><td>50分</td><td>善</td></tr></tbody><tfoot><td>总结</td><td>很好</td><td>再接再励</td></tfoot></table>
</body>
</html>

5.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 border="1"><caption><strong>成绩单</strong></caption><thead><tr><th>姓名</th><th>成绩</th><th>评语</th></tr></thead><tbody><tr><td>张三</td><td rowspan="2">500分</td><td>善</td></tr><tr><td>李四</td><td>善</td></tr><tr><td>王五</td><td>50分</td><td>善</td></tr></tbody><tfoot><td>总结</td><td colspan="2">很好</td></tfoot></table>
</body>
</html>

6 表单标签

6.1 input系列标签

6.1.1 input标签

在这里插入图片描述
在这里插入图片描述

<!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>文本框：<input type="text" placeholder="输入用户名"><br>密码框：<input type="password" placeholder="密码"><br>单选框：<input type="radio"><br>多选框：<input type="checkbox" name="" id=""><br>上传文件：<input type="file">
</body>
</html>

6.1.2 单选框标签

在这里插入图片描述

<!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>性别：<input type="radio" name="sex">男    <input type="radio" name="sex">女<input type="checkbox" checked>
</body>
</html>

6.1.3 上传多个文件

在这里插入图片描述

<!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><input type="file" multiple>
</body>
</html>

6.1.4 按钮标签

在这里插入图片描述

6.2 button标签

在这里插入图片描述

<!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><button>我是按钮</button><button type="submit">提交按钮</button><button type="reset">重置按钮</button><button type="button">普通按钮</button>
</body>
</html>

6.3 select下拉菜单

在这里插入图片描述

<!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><select><option>北京</option><option>上海 </option><option selected>哈尔滨</option></select>
</body>
</html>

6.4 文本域标签

在这里插入图片描述

<!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><textarea cols="60" rows="30"></textarea>
</body>
</html>

6.5 label标签

在这里插入图片描述

<!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>性别：<input type="radio" name="sex" id="zzz"> <label for="zzz">男</label><label><input type="radio"> 女</label>
</body>
</html>

7 语义化标签

在这里插入图片描述

<!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><div>换行</div><div>换行</div><div>换行</div><div>换行</div><span>标签</span><span>标签</span><span>标签</span><span>标签</span>
</body>
</html>

在这里插入图片描述

8 字符实体

在这里插入图片描述

9 案例

9.1 学生信息表

在这里插入图片描述

<!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 border="1" width="500" height="300"><caption><h3>学生信息表格</h3></caption><tr><th>年级</th><th>姓名</th><th>学号</th><th>班级</th></tr><tr><td rowspan="2">高三</td><td>张三</td><td>22</td><td>222班</td></tr><tr><td>张三</td><td>22</td><td>222班</td></tr><tr><td>评语</td><td>张三</td><td>22</td><td>222班</td></tr><tr><td>评语</td><td colspan="3">你们很优秀</td></tr></table>
</body>
</html>

9.2 表单

<!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><h1>恋爱官网</h1><hr><form action="">昵称: <input type="text" placeholder="请输入名称"><br>性别:<label><input type="radio" name="sex" checked> 男</label><label><input type="radio" name="sex"> 女</label><br>所在城市:<select><option>北京</option><option>上海</option><option selected>南京</option><option>河北</option></select><br>婚姻状况:<label><input type="radio" name="yyy" checked> 未婚</label><label><input type="radio" name="yyy"> 已婚</label><label><input type="radio" name="yyy"> 保密</label><br>喜欢的类型: <label><input type="checkbox" checked> 可爱</label><label><input type="checkbox"> 性感</label><label><input type="checkbox"> 病娇</label><label><input type="checkbox"> 三无</label><br>个人介绍:<br><textarea name="" id="" cols="60" rows="10"></textarea><br><h3>我承诺</h3><ul><li>单身</li><li>单身</li><li>单身</li></ul><label><input type="checkbox"> 我同意所有条款</label><br><input type="submit" value="免费注册"><button type="reset">重置</button></form>
</body>
</html>

版权声明:

本网仅为发布的内容提供存储空间，不对发表、转载的内容提供任何形式的保证。凡本网注明“来源：XXX网络”的作品，均转载自其它媒体，著作权归作者所有，商业转载请联系作者获得授权，非商业转载请注明出处。

我们尊重并感谢每一位作者，均已注明文章来源和作者。如因作品内容、版权或其它问题，请及时与我们联系，联系邮箱：809451989@qq.com，投稿邮箱：809451989@qq.com

最新新闻

热搜词

计算机工程系的文化是什么,计算机工程系科技文化节.doc k8s网络，跨主机容器通信机制（没看懂） CentOS7的udev的绑定规则 Python数据分析实战项目-北京二手房数据分析 Vue使用Tinymce 编辑器 【详解】低功耗低成本的Open开发方案

声明：本站所有新闻及新闻图片来源于其他网站，如有侵权，请及时联系我们！

客户服务 | 关于我们 | 版权声明

版权所有：

Copyright 2024 尧图网 All Rights Reserved.QQ:809451989