-
补充总结html所有内容，html学习完这篇基本就差不多了
网页的组成：图片 文本 视频 音频 超链接 等组成(用户角度)
标签
开发者：
html标签：网页的内容，结构 --> 内容层
css样式： 美化 装饰 装修网页 --> 表现层
javascript(js): 网页和用户的交互行为 动态效果 ，前后端数据交互 --> 行为层
可以放入图片 文本 视频 音频 超链接 等
网页文件：后缀名/拓展名 是html的文件
运行环境：浏览器
浏览器：360 qq 百度 uc 2345 浏览器， 谷歌浏览器，火狐，欧朋
1.渲染引擎(内核)：
解析并且渲染html，css部分代码。
2.js引擎
解析js部分。
html标签：超文本标记语言 --> 语义化双标签: <标签名>内容</标签名>
单标签: <标签名>
标签属性:<标签名 属性名=“属性值”></标签名>
<标签名 属性名=“属性值”>seo: 1.元信息: 关键字，关键信息，seo优化 ；
2. lang=“en” --> seo优化
–> 告诉浏览器是什么语言类型的网页基本结构：
<!doctype html> --> 文档类型声明
如果不写，浏览器按照自己的内核来解析 --> 怪异模式 ；
如果写了文档类型声明，不管什么内核的浏览器都会按照 w3c的标准解析兼容性: ie6 7 8浏览器 ，他对一些标签 或者是html5的一些新特性，不支持，我们要采取一些兼容性的写法
去写 老版本浏览器支持的代码。< html lang=“en”>
< head> --> 头部标签
< meta charset=“Utf-8”> --> 字符集 编辑器用什么编码方式保存，浏览器就用什么编码方式解析
< title>< /title> --> 网页的标题标签
< /head>
< body>< /body> --> 内容标签
</ html> --> 根标签标签嵌套：1.父子关系 包含关系
2.兄弟关系 并列关系常用标签：
网页的标题 标题标签：< hn>< /hn> n:1-6 他会对标签里面的文本加大加粗的显示，数字越大 字体越小
align=“” left center right 左 中 右
在编辑器里对内容格式进行操作，不会影响页面的格式段落标签: < p>< /p>
align=“” left center right 左 中 右
换行标签：< br> 要在哪换行就在那加
图片标签:< img src=“图片路径”> align=“” left right
a.网络图片路径：一定是带有网络协议的图片路径
b.本地图片路径:图片名.后缀名本地路径:a.绝对路径
b.相对路径
width=“数字”，设置图片的宽
height=“数字”，设置图片的高
如果只设置其中一个，那么另一个会等比例缩放
title=“文本” 图片的标题
alt=“文本” 图片加载失败时，显示的文本超链接:< a>内容< /a>
href=“要跳转的页面网址”
href=““会刷新自身一次
href=”#”
href=“javascript:;” 不会跳转页面也不会刷新
href=“文件名.html” 进行本地的页面之间的跳转
target=“_blank” 打开新窗口进行跳转
锚点链接 href=“#id名” 在页面内进行跳转，在页面内进行定位，在要跳转的标签加上id属性 id=“id名”
id名:数字字母下划线，但是不能以数字开头
水平分割线：< hr>表格标签: < table>< table>
< tr>< /tr> --> 行
< td>< /td> --> 单元格
在不设置宽的情况下，表格宽度由内容决定，内容会把表格撑大
路径：1.绝对路径
从这个文件所在的最大的盘符开始找，一层一层的往下找 直到找到
网页部署到服务器之后，服务器也是一台电脑，如果部署到服务器的盘符和绝对路径的盘符不一致，那么就
找不到图片。 一般很少使用
2.相对路径
指的就是 引用文件和被引用文件之间的相对位置关系
a.搞清楚引用关系 --> 哪个文件引用哪个 --> 网页文件引用其他文件
b. …/ 上一级 ， ./ 同一级 ， /根目录，下一级表格标签: < table>< /table>
width=“数字”， 设置表格整体的宽
height=“数字”， 设置表格的高度
align=“left center right”, 表格位置
background=“图片路径”, 设置表格背景图片
bgcolor=“表示颜色的单词，#0000, rgb(0-255,0-255,0-255)”
< tr>< /tr> --> 行标签
background=“图片路径”, 设置表格背景图片
bgcolor=“表示颜色的单词，#0000, rgb(0-255,0-255,0-255)”
align=“left center right”
< th>< /th> --> 表头标签 ，他会对里面的文本居中 字体加粗
< capiton> --> 表格的标题 对里面的文本居中展示 --> 相对于表格来说
< td>< /td>
background=“图片路径”, 设置表格背景图片
bgcolor=“表示颜色的单词，#0000, rgb(0-255,0-255,0-255)”
align=“left center right”单元格合并：
1.跨列合并：
a.找到起始单元格 --> 从左到右最左边的那个
b.colspan=“合并几个就写几”
c.合并完成之后删除多余单元格
2.跨行合并：
a.找到起始单元格 --> 从上到下最上边那个
b.rowspan=“合并几个写几个”
c.合并完成之后删除多余单元格文本格式化标签：< p>段落标签< /p>
< b>粗体标签< /b>
< em>em标签< /em>
< i>i标签< /i>
< small>small标签< /small>
< strong>strong标签< /strong>
< p>我是一个下标字< /sub>< /p>
< p>我是一个< sup>上标字< /sup>< /p>
< ins>ins标签< /ins>
< del>del标签< /del>特殊字符: & nbsp; 空格
& lt; 小于
& gt; 大于字体标签: < font>文本< /font> 注: font标签在html5 已经没有用了;工作尽量不使用
color=“颜色” --> 修改字体的颜色
face=“字体” --> 修改字体样式列表：1.无序列表< ul>< /ul> type=“square circle disc”
列表项： < li><标签>文本</标签>< /li>2.有序列表< ol></ ol> type=“1 a A i I” 数字 小写英文字母 大写英文字母 小写罗马字母 大写罗马字母
start=“” 有序列表列表项初始排序 序号
列表项： < li>< /li> value=“” 设置当前列表项的排序序号
表单： 1.表单域 表单域里放表单控件
< form action=“”>< /form>
表单域标签不能不写，不写就无法提交表单控件的信息2.表单控件
a.文本框< input type=“text” name=“” value=“”>
数字类型文本框< input type=“number” name=“” value=“”>
b.密码框< input type=“password” name=“” value=“”>
c.单选框< input type=“radio” name=“” value=“”>
一组单选框，需要有相同的name属性。
checked属性，是否默认选中
d.多选框< input type=“checkbox” name=“” value=“”>
一组多选框，需要有相同的name属性。
checked属性，是否默认选中3.提交按钮:< input type=“submit” value=“”>
点击提交按钮就会把表单域中的信息提交到指定的文件
提交按钮的value属性是显示在按钮中的文本，并不会把value的值提交4.下拉选择框< select name=“”>< /select>
< option value=“”>选项< option>5.文本域< textarea name=“”>值< /textarea>
文本域不需要value属6.重置按钮< input type=“reset” value=“”>
重置整个表单的value7.文件选择框
< ipnut type=“fiel” name=“”>
选择文件进行提交8.图片提交按钮
< input type=“image” src=“”>9.< label>
< ipnut type=“radio” name=“”>男
< /label>
< label for=“sex”>男< /label>
< input type=“radio” id=“sex” name=“sex”>< div></ div>和< span></ span>
语义化：对应的页面效果使用对应的标签
容器思维：< div></ div> < span></ span> 没有语义，
标签：我们代码里的一个标签对应页面上的一个元素；元素分为3类：
a.块级元素：独占一行，可以直接设置宽高；
b.行内块元素：同时具有两种元素的特点；不独占一行，可以直接设置宽高；
c.行内元素：不独占一行，不能直接设置宽高；
< div></ div>是块级元素，里面就可以放块级元素，行内元素，行内块元素；
< span>< /span>是行内元素，可以放行内元素，文档流:
1.标准流:块级元素从上到下，行内元素从左到右，
h5新特性: 1.新增语义化标签
< nav style=“width:500px;height:500px;background-color:red”>导航栏</ nav>
< div style=“width:500px;height:500px;background-color:red”>导航栏</ div>
< aside style=“width:500px;height:500px;background-color:red”>侧边栏</ aside>
网页独立内容块
< article style=“width:200px;height:200px;background-color:pink”>内容</ article>
</ section>
< footer style=“width:500px;height:500px;background-color:red”>网页底部内容< /footer>
好处:seo优化，优化网页结构使网页结构更加清晰
2.新增多媒体标签
a.视频标签
< video>< /video>
muted 是否静音播放
controls 播放控件
height=“200” width=“1000” 宽高
loop 播放完成之后是否循环播放
poster 视频封面
preload 页面加载完成之后是否预加载视频 auto预加载 metadate只加载元信息 none不预加载
b.音频标签
< audio></ audio>
muted 是否静音播放
controls 播放控件
height=“200” width=“1000” 宽高
loop 播放完成之后是否循环播放
poster 视频封面
preload 页面加载完成之后是否预加载视频 auto预加载 metadate只加载元信息 none不预加载
3.增强型表单控件
< input type=“email” name=“email” > 邮箱输入框
< input type=“number” name=“number” min=“” max=“”> 数字输入框 min最小值 max最大值
请选择日期< input type=“date” name=“date”>< br> 日期输入框
请选择月份< input type=“month” name=“month”>< br> 月份输入框
请选择颜色< input type=“color” name=“color”> 颜色输入框
请搜索< input type=“search” name=“search”> 搜索框
required 设置了required属性的表单为必填项 在提交表单时会进行表单验证 如果未填 会阻止表单提交。大家在做练习的时候首先看效果图写，以下的代码是为了方便大家，写完之后或者有不懂的地方以作参考。
练习小米商城布局：
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <title>小米商城</title> <style> body{ background-color:#f5f5f5; } div{ margin:5px; } </style> </head> <body> <div style="width:1300px;margin:30px"> <div style="float:left"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ac5cafc68c10ce4471869d378f594b52.png?thumb=1&w=234&h=614&f=webp&q=90" style="height:670px;background-color:white"> </div> <div style="width:230px;height:325px;text-align:center;float:left;background-color:white"> <img width="160" height="160" alt="Redmi Note 11T Pro+" img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/211bb83776a8e0c8358732c3f3aa2864.png?thumb=1&w=200&h=200&f=webp&q=90"> <h3 style="font-size:14px;font-weight:400;color:#444;">Redmi Note 11T Pro+</h3> <p style="font-size:12px;color:#b0b0b0;margin-top:0px;margin-right:10px;margin-bottom:10px;margin-left:10px;">天玑8100｜真旗舰芯</p> <p style="text-align:center;color:#ff6700;"><span>2099</span>元<span>起</span></p> </div> <div style="display:inline-block;width:230px;height:325px;text-align:center;background-color:white;float:left"> <img width="160" height="160" alt="Redmi Note 11T Pro+" img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5713971c4bb6512743dfd06023080268.png?thumb=1&w=200&h=200&f=webp&q=90"> <h3 style="font-size:14px;font-weight:400;color:#444;" >Redmi Note 11T Pro</h3> <p style="font-size:12px;color:#b0b0b0;margin-top:0px;margin-right:10px;margin-bottom:10px;margin-left:10px;">天玑8100｜真旗舰芯</p> <p style="text-align:center;color:#ff6700;"><span>1799</span>元<span>起</span></p> </div> <div style="width:230px;height:325px;text-align:center;float:left;background-color:white"> <img width="160" height="160" alt="Redmi Note 11T Pro+" img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7fccce9e65aff2d7c913e40f4bee1b0b.png?thumb=1&w=200&h=200&f=webp&q=90"> <h3 style="font-size:14px;font-weight:400;color:#444;">Redmi Note 11SE</h3> <p style="font-size:12px;color:#b0b0b0;margin-top:0px;margin-right:10px;margin-bottom:10px;margin-left:10px;">双卡双5G｜疾速登陆</p> <p style="text-align:center;color:#ff6700;"> <span>999</span>元<span>起</span> <del style="color:gray"><span>1099</span>元</del> </p> </div> <div style="display:inline-block;width:230px;height:325px;text-align:center;float:left;background-color:white"> <img width="160" height="160" alt="Redmi Note 11T Pro+" img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0bcd64f412dfb5e15695fa96d21ecb23.png?thumb=1&w=200&h=200&f=webp&q=90"> <h3 style="font-size:14px;font-weight:400;color:#444;" >Xiaomi Civi 1S</h3> <p style="font-size:12px;color:#b0b0b0;margin-top:0px;margin-right:10px;margin-bottom:10px;margin-left:10px;">原生美肌人像｜奇迹阳光动人新色｜骁龙778G Plus</p> <p style="text-align:center;color:#ff6700;"><span>2299</span>元<span>起</span></p> </div><div style="width:230px;height:325px;text-align:center;float:left;background-color:white"> <img width="160" height="160" alt="Redmi Note 11T Pro+" img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d764150a470174741d8b0b04515f7a78.jpg?thumb=1&w=200&h=200&f=webp&q=90"> <h3 style="font-size:14px;font-weight:400;color:#444;">Redmi 10A</h3> <p style="font-size:12px;color:#b0b0b0;margin-top:0px;margin-right:10px;margin-bottom:10px;margin-left:10px;">大电量、大音量、大屏幕</p> <p style="text-align:center;color:#ff6700;"><span>699</span>元<span>起</span></p> </div> <div style="display:inline-block;width:230px;height:325px;text-align:center;float:left;background-color:white"> <img width="160" height="160" alt="Redmi Note 11T Pro+" img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/18d2099cb0b05bbd23cb1915dfc9d0d6.jpg?thumb=1&w=200&h=200&f=webp&q=90"> <h3 style="font-size:14px;font-weight:400;color:#444;" >Redmi K50 Pro</h3> <p style="font-size:12px;color:#b0b0b0;margin-top:0px;margin-right:10px;margin-bottom:10px;margin-left:10px;">2K直屏的狠旗舰</p> <p style="text-align:center;color:#ff6700;"><span>2999</span>元<span>起</span></p> </div><div style="width:230px;height:325px;text-align:center;float:left;background-color:white"> <img width="160" height="160" alt="Redmi Note 11T Pro+" img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/28c14106b688ac7ae88e761564789b37.jpg?thumb=1&w=200&h=200&f=webp&q=90"> <h3 style="font-size:14px;font-weight:400;color:#444;">Redmi K50</h3> <p style="font-size:12px;color:#b0b0b0;margin-top:0px;margin-right:10px;margin-bottom:10px;margin-left:10px;">2K直屏的狠旗舰</p> <p style="text-align:center;color:#ff6700;"><span>2399</span>元<span>起</span></p> </div> <div style="display:inline-block;width:230px;height:325px;text-align:center;float:left;background-color:white"> <img width="160" height="160" alt="Redmi Note 11T Pro+" img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/28febc579eaea6b07c96c0ec48b89f7a.jpg?thumb=1&w=200&h=200&f=webp&q=90"> <h3 style="font-size:14px;font-weight:400;color:#444;" >Redmi K40S</h3> <p style="font-size:12px;color:#b0b0b0;margin-top:0px;margin-right:10px;margin-bottom:10px;margin-left:10px;">口碑真旗舰</p> <p style="text-align:center;color:#ff6700;"><span>1799</span>元<span>起</span></p> </div> </div> </div> </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
效果图：
HTML5练习：主要练习各代码实现的功能<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <title>模块和视频</title> </head> <body> <nav align="center" style="width:700px;height:40px;background-color:blue;color:red;font-size:20px;padding-top:10px;">导航栏</nav> <aside align="center" style="width:90px;height:500px;background-color:black;color:red;font-size:30px;float:left;">侧边栏</aside> <section align="center" style="width:700px;height:500px;background-color:yellow;color:red;font-size:30px;">内容块 <article align="center" style="width:400px;height:50px;background-color:green;color:red;font-size:30px;margin-left:195px">内容</article> <video src="https://vd4.bdstatic.com/mda-nfp2zx0061g168hk/cae_h264/1656281564714915281/mda-nfp2zx0061g168hk.mp4?v_from_s=hkapp-haokan-hna&auth_key=1656317610-0-0-9d6a44a818a21cd24dce5d5ad4036e65&bcevod_channel=searchbox_feed&pd=1&vt=1&cd=0&watermark=0&did=&logid=2609954857&vid=3905532674394014458&pt=0&appver=&model=&cr=0&abtest=100-101-102-peav_l52&sle=1&sl=155&split=321068" style="width:400px;" controls="controls" muted="muted" autoplay="autoplay"> </video> <audio src="https://webfs.ali.kugou.com/202206271523/6f52afa490240a114843676288638b8d/KGTX/CLTX001/8c2ed31c0e38ddff56df95a4a88b5396.mp3" controls="controls" muted="muted" autoplay="autopaly" style="width:400px;height:30px;"> </section> <footer align="center" style="width:700px;height:40px;background-color:gray;color:red;font-size:20px;">底部</footer> <form> 请输入数字：<input type="number" name="number"/> 请输入邮箱：<input type="email" name="email"/> 请选择日期：<input type="date" name="date"/> 请选择颜色：<input type="color" name="color"/> 输入搜索内容：<input type="search" name="search"/> </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
效果图：
搜索练习：<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <title>百度搜索</title> </head> <style> #q1{ width:560px; height:380px; } td{ font-size:12px; } </style> <body> <div id="q1"> <div> <a href="#"> <span style="color:red;font-size:18px">百度</span> <span style="font-size:18px">一下,你就知道</span> </a> <img src="./img/guanwang.png"> </div> <div> <small style="font-size:12px"> 全球最大的中文搜索引擎、致力于让网民更便捷地获取信息,找到所求。<span style="color:red">百度</span>超过千亿的中文网页数据库,可以瞬间找到相关的搜索结果。 </small> </div> <div> <small style="font-size:12px"> <a href="#">百度新闻</a> <span>-</span> <a href="#">百度贴吧</a> </small> </div> <div> <small style="color:gray" style="font-size:12px">www.<b>baidu</b>.com-</small> <img src="./img/qiye.png"> <small style="color:gray" style="font-size:12px">百度</small> </div> <div> <small style="color:gray;font-size:12px">360搜索为您推荐</small> <img src="./img/shezhi.png"> </div> <form action="http://www.baidu.com"> <div style="position:relative"> <span> <input type="text" name="sousuo" value="淘宝" style="width:450px;height:30px;font-size:12px;padding-left:35px"> <input type="submit" name="baiduyixia" value="立即搜索" style="width:100px;height:36px;margin-left:-50px;font-size:12px"> <img src="./img/sousuo.png" style="position:absolute;top:7px;left:6px"> </span> </div> </form> <div> <table width="560" height="150"> <tr> <td>腾讯</td> <td>小米</td> <td>菜鸟教程</td> <td>csdn</td> </tr> <tr style="background-color:#f8f8f8"> <td>优酷</td> <td>旗米拉旗米拉</td> <td>像素图</td> <td>布米米66</td> </tr> <tr> <td>罗米小小糍吖</td> <td>吾爱破解</td> <td>爱奇艺</td> <td>魅族</td> </tr> <tr style="background-color:#f8f8f8"> <td>wwwbaidu.con</td> <td>CSDN</td> <td>misumi米思米官网</td> <td>vivo</td> </tr> <tr> <td>雷神</td> <td>iqooneo</td> <td>华为官网</td> <td>oppo</td> </tr> </table> </div> </div> </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
效果图：
-
相关阅读:
不需要标注数据的语义分割！ETH&鲁汶大学提出MaskDistill，用Transformer来进行无监督语义分割，SOTA！...
开源 SD-Small 和 SD-Tiny 知识蒸馏代码与权重
Java的＜? super T＞和＜? extends R＞理解与应用
ES(elasticsearch) - kibana导出csv
ssm基于微信小程序的学习资料销售平台+ssm+uinapp+Mysql+计算机毕业设计
深入理解Linux内核内存池技术的原理与实现(含源代码)
栈的简单应用（利用Stack进行四则混合运算）（JAVA）
广州华锐互动：VR虚拟现实物理学习平台，开启数字化教学新格局
【图像处理笔记3】Gabor Filter的手动和调包实现
【Acwing166】数独（dfs+剪枝+位运算）超级详细题解！
- 原文地址：https://blog.csdn.net/weixin_52184815/article/details/125619467
