HTML最全详细教学(附代码）
2024-07-02 14:15:54
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head><meta charset="UTF-8"><title>HTML笔记</title>
</head>
<body><!--音频标签 src=音频的路径 、controls=显示播放的控件、 autoplay=自动播放（部分浏览器不支持、loop=循环播放-->
<h2>1.音频标签-《爱了很久的朋友》</h2>
<audio autoplay controls src="爱了很久的朋友.mp3"></audio><!--视频标签 src=视频的路径 、controls=显示播放的控件、 autoplay=自动播放（部分浏览器不支持、loop=循环播放 -->
<!--muted 需要加上这个才能自动播放（静音）音频一样的-->
<h2>2.视频标签-《惊才风逸文工团》</h2>
<br> <video autoplay controls src="惊才风逸文工团.mp4" > </video><!--链接标签 当开发网站初期，我们还不知道跳转地址的时候，href的值书写 #（空链接） -->
<!--href： 作用是跳转地址-->
<!--target: 目标网页的打开形式 1. _self :默认值，在当前窗口中跳转（覆盖原网页）； 2. _blank :在新的窗口中跳转（保留原网页）-->
<h2>3.超链接案例</h2>
<br><a href="http://localhost:63342/Java%20Web%20Test/web_test/sina.html?_ijt=lau9lna46310mfa4ct2qfvs72h.htm" target="_blank">3.1小民的微博作业（跳转新网页）</a>
<br><a href="http://localhost:63342/Java%20Web%20Test/web_test/sina.html?_ijt=lau9lna46310mfa4ct2qfvs72h.htm">3.2小民的微博作业（覆盖原网页） </a>
<hr><!--招聘案例--><h1>4.招聘案例-“腾讯科技高级web前端开发岗位“</h1>
<hr><h2> 职位描述</h2>
<p>负责重点项目的前端技术方案和架构的研发和维护工作；</p><h2> 岗位要求</h2>
<p>5年以上前端开发经验，<strong>精通html5/css3/javascrip</strong>等web开发技术； </p>
<p>熟悉bootstrap，Vue，angularjs，reactjs等框架，熟悉掌握一种以上； </p>
<p> 代码风格严谨，能高保真还原设计稿，能兼容各种浏览器；</p>
<p> 对web前端的性能优化以及web常见漏洞有一定的理解和相关实践；</p>
<p>具备良好的分析解决问题能力，能独立承担任务，有开发进度把控能力； </p>
<p>责任心强，思路清晰，抗压能力好，具备良好的对外沟通和团队协作能力。 </p><h2>工作地址</h2>
<p> 上海市-徐汇区-腾云大厦</p>
<img alt="地图" src="地图.png" width="800px"><!--综合案例-跳转-->
<h1>5.综合案例-”今日热搜词“</h1>
<hr><h2>1、阿卡贝拉 </h2>
<p>阿卡贝拉（意大利：Acappella)即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例：<a href="#" target="_blank"> 阿卡贝拉《千与千寻》</a> </p><h2>2、翻唱</h2>
<p>"翻唱“是指将已发表并由他人演唱的歌曲根据自己的风格从新演唱，包括从新填词，编曲。现在已有不少明星，都在翻唱他人是歌曲，不断在翻唱中突破自己，给大家带来不一样的风格。视频示例：<a href="#" target="_blank">有一种悲伤（翻唱）-《A Kind of Sorrow》</a> </p><!--列表标签：特点：按照行的方式，整齐显示内容； 应用场景--新闻列表（无序列表）、排行榜（有序列表）、账单（自定义列表）-->
<!--无序列表：ui-表示无序列表的整体，用于包裹li标签； li-表示无序列表的每一项，用于包含每一行的内容； 显示特点：列表每一行前默认显示圆点标识；-->
<h2>6.列表标签</h2>
<h3>6.1无序列表</h3>
<ul><li>榴莲</li><li>相机</li>
</ul><!--有序列表：ol-表示有序列表的整体，用于包裹li标签； li-表示有序列表的每一项，用于包含每一行的内容； 显示特点：列表的每一行前默认现实序号列表-->
<h3>6.2有序列表</h3>
<ol><li>张三：100</li><li>李四：80</li>
</ol><!--自定义列表 ：dl-表示自定义列表的整体，用于包裹dt/dd标签； dt-表示自定义列表的主题； dd-表示自定义列表的针对主题的每一项内容 显示特点：dd前会默认显示缩进效果-->
<h3>6.3自定义列表</h3>
<dl><dt>帮助中心</dt><dd>账户管理</dd><dd>购物指南</dd>
</dl><!--表格标签：能够使用 表格相关标签和属性，实现网页中表格结构的搭建-->
<!-- border-边框宽度 （数字）； width：表格宽度（数字）； height：表格高度（数字）-->
<!--表格： table-表格整体，可用于包裹多个tr； tr-表格每行，可用于包裹td； td-表格单元格，可用于包裹内容-->
<!--表格标题和表头单元格标签：场景-在表格中表示整体大标题和一列小标题。 caption-表格大标题（写在table标签内部）； th-表头单元格；（书写在tr标签内部，用于替换td标签）-->
<!--表格结构标签 突出表格不同部分（头部、主图、底部，使词义更加清晰。 thead-表格头部、tbody-表格主体、tfoot-表格底部。 表格结构标签内部用于包裹tr标签，结构标签可以省略。-->
<!--合并单元格：跨行/跨列合并（将水平活垂直多个单元格合并成一个单元格）。 通过左上原则，确保谁删除谁（1.上下合并->只保留最上的，删除其他。2.左右合并->只保留最左的，删除其他）-->
<!--跨行合并：rowspan（将多行单元格垂直合并）；colspan（将多列单元格水平合并）；注意：只有同一个结构标签中的单元格才能合并，不能跨结构合并（不能跨：thead,tbody,tfoot）-->
<h2>7.表格标签</h2>
<table border="1" heigth ="400" width="600"><caption><strong>学生成绩单 </strong></caption><thead><tr><th>姓名</th><th>成绩</th><th>评语</th></tr></thead><tbody><tr><td>小哥哥</td><td rowspan="2">100分</td><td>小哥哥真帅气</td></tr><tr><td>小姐姐</td><td>小姐姐真漂亮</td></tr></tbody><tfoot><tr><td>总结</td><td colspan="2">郎才女貌</td></tr></tfoot>
</table>
<br> <hr>
<!--表单标签（可实现网页中表单类网页结构搭建-->
<!--1.1 input系列标签的基本介绍 在网页中显示收集用户信息的表单效果，如：登录页。注册页。 input标签可以通过type属性值的不同，展示不同效果。--><!--text 文本框，用于输入单行文本-->
<h2>8.表单标签</h2>
<h3>8.1text 文本框</h3>
<h4>8.1.1placeholder-占位符(提示用户输入内容的文本)</h4>
<!--placeholder-占位符，提示用户输入内容的文本-->
<h4>8.1.2-提交地址 ： form action="" </h4><form action=""> </form>文本框：<input type="text" placeholder="请输入文本">
<br>
<br>
<h3>8.2密码框</h3>密码框：<input type="password" placeholder="请输入密码">
<br>
<br>
<h3>8.3单选框</h3>
<h4>8.3.1 name-分组(有相同name属性值的单选框为一组，一组中同时只能有一个被选中)</h4>
<h4>8.3.2 checked-默认选中</h4>单选框：<input type="radio" name="gender"checked>男 <input type="radio" name="gender" >女
<br>
<br>
<h3>8.4多选框</h3>
<h4>8.4.1 checked-默认选中</h4>多选框：<input type="checkbox"checked>
<br>
<br>
<h3>8.5文件选择，用于之后上传文件</h3>
<h4>8.5.1 multiple-多文件选择</h4>文件选择：<input type="file" multiple>
<br>
<br>
<h3>8.6提交按钮（提交按钮（点击后提交数据给后端服务器）</h3>
<h4>8.6.1 value = "" (按钮上添加文字）</h4>
提交按钮：<input type="submit" value="免费注册">
<br>
<br>
<h3>8.7重置按钮</h3>
重置按钮：<input type="reset">
<br>
<br>
<h3>8.8普通按钮（默认无功能，配合js添加功能</h3>
普通按钮：<input type="button" value="普通按钮,无任何功能")>
<br>
<h4>8.8.1 button按钮标签页：submit：提交； reset：重置；button：普通按钮</h4>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<button type="button">普通按钮,无任何功能</button><!--select-下拉菜单标签-->
<h2>9.select：下拉菜单标签</h2>
<h3>9.1 option：下拉菜单的每一项 (selected:下拉菜单的默认选中）</h3><select><option>武汉大学</option><option>北京大学</option><option selected>西北工业大学</option><option>武汉大学</option></select>
<!--textarea 文本域标签-->
<h2>10.textarea 文本域标签</h2>
<h3>10.1cols:规定了文本域内可见宽度； rows：规定了文本域可见行数</h3><textarea cols="80" rows="8"> </textarea><!--labe标签 -->
<h2>lable标签 常用于绑定内容与表单标签的关系</h2>
<h3>使用方法一：</h3>
<h4> 1.使用label标签把内容（如：文本）包裹起来；2.在表单标签上添加id属性；3.在label标签的for属性中设置对应的id属性值。</h4>
<h3>使用方法二：</h3>
<h4> 1.使用label标签把内容（如：文本）和表单标签一起包裹起来；2.需要把label标签的for属性删除即可。</h4>性别1：<input type="radio" name="sex" id="nan1"> <label for="nan1">男</label><input type="radio" name="sex" >女
<br>性别2：<input type="radio" name="sex" id="nan"> <label for="nan">男</label><label><input type="radio" name="sex" >女</label><!--词义化标签 没有词义布局标签（div、span-->
<h2>11.词义化标签</h2>
<h3>11.1没有词义的布局标签-div(一行只显示一个[独占一行])和span(一行可以显示多个）</h3>
<!--div-->
<h4>一、div示例：</h4>普通文字普通文字<div>div文字</div><div>div文字</div>
<!--span-->
<h4>二、span示例：</h4>普通文字普通文字<span>span文字</span><span>span文字</span><h3>11.2有词义的布局标签（显示特点与div一致，在HTML5新版本中 ，推出了一些有语义的布局标签供开发者使用，<u>适用于手机端网页布局</u>。了解即可）</h3>
<h4>*这些标签包括：header：网页头部；nav：网页导航；footer：网页底部；aside:网页侧边框；section：网页区块；article：网页文章。</h4><img src="词义化标签布局.jpg" alt="词义化布局图">
<h4>11.2.1网页头部</h4><header> 网页头部</header>
<h4>11.2.2网页导航</h4><nav>网页导航 </nav>
<h4>11.2.3网页底部</h4><footer> 网页底部</footer>
<h4>11.2.4网页侧边框</h4><aside>网页侧边框 </aside>
<h4>11.2.5网页区块</h4><section>网页区块 </section>
<h4>11.2.6网页文章</h4><article>网页文章 </article>
<!--字符实体 空格- -->
<h2>12.字符实体（通过 <u>字符实体</u> 在网页中显示 <u>特殊符号</u>)</h2>
<h3>12.1空格-“ ”</h3><!--综合案例-学生信息表-->
<h2>13.综合案例-学生信息表</h2><table border="1" width="500" height="300"><caption><b>优秀学生信息表格</b></caption><tr><th>年级</th><th>姓名</th><th>学号</th><th>班级</th></tr><tr><td rowspan="2">高三</td><td>张三</td><td>110</td><td>一班</td></tr><tr><td>李四</td><td>100</td><td>二班</td></tr><tr><td>评语</td><td colspan="3">你们都很优秀</td></tr></table><!--综合案例-表单-->
<h2>13.综合案例-表单</h2>
<h1>青春不常在，抓紧谈恋爱</h1>
<hr><form action=""> </form>昵称：<input type="text" placeholder="请输入昵称">
<br>
<br>性别：<input type="radio" name="sex" checked>男 <input type="radio" name="sex">女
<br>
<br>所在城市：<select><option>北京大学</option><option>上海大学</option><option selected>武汉大学</option></select>
<br>
<br>结婚状况：<input type="radio" name="marry" checked>未婚 <input type="radio" name="marry">已婚 <input type="radio" name="marry">保密
<br>
<br>喜欢的类型:<input type="checkbox"checked>可爱 <input type="checkbox">性感 <input type="checkbox"> 御姐 <input type="checkbox"> 萝莉<input type="checkbox">小鲜肉<input type="checkbox">大叔
<br>
<br>
个人介绍：
<br>
<textarea cols="80" rows="8"> </textarea><h3>我承诺</h3>
<ul><li>年满18岁、单身</li><li>抱着严肃的态度</li><li>真诚寻找另一半</li>
</ul><input type="checkbox">我同意所有条款<input type="submit" value="免费注册"> <input type="reset" value="重置"></body>
</html>HTML最全详细教学(附代码）相关推荐
- php 运营商授权,PHP判断手机号运营商（详细介绍附代码）
道理很简单,知道手机号规则 进行正则判断就可以 移动:134.135.136.137.138.139.150.151.157(TD).158.159.187.188 联通:130.131.132.15 ...
- uniapp获取手机号（详细教程附代码）
uniapp获取手机号(详细教程附代码) 一.获取code 二.通过code获取获取openId 和 session_key 三.让用户授权(同意后需要对数据解密) 个人小程序不能使用这个功能,必须是 ...
- Java对象，Map，List，Set数组等相互转换大全（详细讲解,附代码，讲解案例）
Java对象,Map,List,Set数组等相互转换大全(详细讲解,附代码,讲解案例) Java对象 转 JSON字符串 JAVA对象转MAP Map转java对象 List转map List和Map ...
- ROS项目开发实战（三）——使用QT进行ROS的GUI界面设计（详细教程附代码！！！）
序 本篇博客主要介绍怎么使用qt对ros进行gui设计与调试,包括使用列表视图显示ROS话题发布与接收的消息,点击QT按钮按钮进行ros消息的发布. 在阅读本文之前没有安装QT与配置环境可以参考博文: ...
- Python基于机器学习的文本情感分析详细步骤[附代码和文字解释]
最近在研究情感分析,感谢CSDN上很多博主的文章,让我受益匪浅.因此在跑出准确率高达88%的分类结果后,写下自己的代码和总结,希望对大家有所帮助~ 目录 一.文本数据预处理 1.读取json并转化为列 ...
- Kaggle神器LightGBM最全解读（附代码说明）！
AI派干货 来源:Microstrong,编辑:AI有道 本文主要内容概览: 1. LightGBM简介 GBDT (Gradient Boosting Decision Tree) 是机器学习中一个 ...
- 解析目标检测全流程！附代码数据
↑↑↑关注后"星标"Datawhale 每日干货 & 每月组队学习,不错过 Datawhale干货 作者:王程伟,算法工程师,Datawhale成员 在计算机视觉中,红外弱 ...
- Python 进程、线程、协程傻傻分不清楚？详细总结(附代码)
目录 1 什么是并发编程? 2 进程与多进程 3 线程与多线程 4 协程与多协程 5 总结 1 什么是并发编程? 并发编程是实现多任务协同处理,改善系统性能的方式.Python中实现并发编程主要依靠 ...
- 详细介绍附代码：使用jquery，和php文件构建一个简单的在线聊天室，通过ip显示googlemap
最近学习了关于使用最为流行的jquery发送请求,在实践中以最为简单的聊天室作为测验的辅助工具,对相关网页开发有一个初步的认识,希望大家能够一起学习进步. 首先介绍一下相关文件信息和功能 ...
最新文章
- springMvc时间格式化
- 12-图像梯度-Scharr算子和laplacian算子
- Android安全笔记-Service基本概念
- JS逻辑运算符——短路逻辑
- 特斯拉陶琳：全新Model 3标准续航升级版新增前排双层玻璃、电尾等功能
- 网易云音乐刷听歌量_网易云音乐极速版悄然上线！听歌体验同之前没有差别
- 深度限流装置是什么_集团公司首例零损耗深度限流装置顺利投运
- Cortex-M开发板密码登陆界面
- php判断长度函数是,php判断字符串长度 strlen()与mb_strlen()函数
- Unsatisfied forward or external declaration 错误分析
- 用python8行代码做超简单代码雨
- 北京朝阳行政区划(朝阳区街道行政区划) 用于shp数据转为geojson格式作为ECharts地图
- RuntimeError: ‘lengths’ argument should be a 1D CPU int64 tensor, but got 1D cuda:0 Long tensor
- 看看这篇ARM体系结构你就都明白了
- 异地多活场景下的数据同步之道
- OpenAI完胜DOTA世界冠军，20行python代码带你领略其魅力
- 学习笔记1--自动驾驶系统架构
- 需求到系统上线经历了什么
- ElasticSearch增删改查之python sort、scroll、scan
- JDK7-HashMap源码解析
热门文章
- Pandas统计分析基础（1）：Pandas的安装与Pandas引入的新数据类型：Series与 DataFrame基本
- 焊锡条的全球与中国市场2022-2028年：技术、参与者、趋势、市场规模及占有率研究报告
- 频繁刷屏网安圈的微软安全，这次给我们什么启示？
- vb.net 获取系统图标_LOL绽灵节活动快速入门小技巧：提升英雄好感度获取奖励...
- mybatis 一对多映射返回的值为空的原因
- Power bi 超市经典案例之销售分析（一）
- API淘宝问答/评论接口
- 身为管理者的15个意义的文章
- 数据结构——整数算数表达式
- (Realx dijkstra1.1)POJ 1797 Heavy Transportation(使用dijkstra来解决最大生成树问题)