HTML
初识HTML
什么是HEML
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VXisGPX3-1643612836646)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210817100108840.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-M3i46y0S-1643612836648)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210817100214352.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TShpp3Ab-1643612836648)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210817100305360.png)]
HTML5 的优势
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wLrP39GD-1643612836648)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210817100353476.png)]
W3C
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fIf4b3MW-1643612836650)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210817100531136.png)]
浏览器设置
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6eP6BrVO-1643612836651)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210817101123558.png)]
HTML基本结构
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VVFGRg3V-1643612836651)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210817101306865.png)]
网页基本标签
标题标签
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-do4B0pQS-1643612836651)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210817103146682.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sYUwsFBn-1643612836652)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210817103159027.png)]
段落标签 快捷键 p + tab
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hn3Rvo2Y-1643612836653)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210817103511125.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FSawR2cm-1643612836654)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210817103527503.png)]
换行标签 < br >
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rGkxLRci-1643612836654)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210817103848845.png)]
上为段落 下为换行
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iGfDPczg-1643612836655)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210817103732386.png)]
水平线标签
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5cTV3q2B-1643612836655)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210817104034096.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZtauOSEM-1643612836657)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210817104047380.png)]
字体样式标签
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oFmnXtne-1643612836657)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210817104407982.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dwQArfOq-1643612836658)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210817104357920.png)]
注释和特殊符号
注释
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kCZOoZFf-1643612836659)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210817104452646.png)]
特殊符号 百度
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mJMt5d4w-1643612836660)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210817105007350.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3VtzF3r2-1643612836661)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210817104953937.png)]
图像、超链接、网页布局
图像标签
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1tIt14Fb-1643612836661)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210817105120258.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SkzzLvDy-1643612836662)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210817105758923.png)]
src与alt
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PhtieSIk-1643612836663)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210817110252117.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MCmwx7Tq-1643612836665)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210817110317693.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-edMj2VJS-1643612836666)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210817110339870.png)]
链接标签
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6wkLLffI-1643612836666)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210817114020689.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-onktvkJd-1643612836668)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210817114900712.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签学习</title>
</head>
<body>
<!--使用 name 作为标记-->
<a name="top">顶部 TOP</a>
<!-- a 标签
href： 必填，表示要跳转到哪个页面
target:表示窗口在哪里打开
_blank：在新标签页中打开
_self：在自己的网页中打开
-->
<a href="1.我的第一个网页.html" target="_self">点击我跳转到页面一</a>
<a href="https://www.baidu.com">点击我跳转到百度</a>
<br>
<a href="1.我的第一个网页.html">
<img src="../resources/image/1.JPG" alt="姐姐" title="悬停文字" width="300" height="300">
</a>
<!--锚链接
#
1.需要一个锚标记
2.跳转到标记
3.可以在页面间跳转，跳转到指定位置（例 3 跳转到 4）
-->
<a href="#top">回到顶部</a>
<a name="down">down</a>
<!--功能性链接
邮件链接：mailto:
发送邮件
QQ链接
-->
<a href="mailto:1394184248@qq.com">点击联系我</a>
</body>
</html>
行元素与块元素
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6L1UAJRg-1643612836668)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210817120720730.png)]
列表，表格，媒体元素
列表
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZzkP5gvb-1643612836669)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210817120849213.png)]
有序列表
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TCNAqYUA-1643612836670)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210817121730604.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q7Lq7pl2-1643612836672)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210817121656207.png)]
无序列表
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4W9rkU5p-1643612836673)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210817121745057.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qXpYWCE4-1643612836674)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210817121706406.png)]
自定义列表
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RdUY2fes-1643612836675)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210817121759633.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-El9erMsD-1643612836676)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210817121716758.png)]
表格
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9IxzO3GU-1643612836677)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210817140531540.png)]
边框
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mLm2gxMe-1643612836677)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210817140542495.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P4InMihz-1643612836678)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210817140617995.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Amfqoq3F-1643612836678)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210817140628285.png)]
跨行跨列
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FSJKNlCf-1643612836679)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210817140849174.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IBkMoWFj-1643612836680)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210817141038639.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TtGsz1j2-1643612836681)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210817140958779.png)]
视频和音频
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Qy7gt8U5-1643612836681)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210817141750665.png)]
页面结构分析
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T900E5mU-1643612836681)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210817141929668.png)]
内联框架
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LzoIGLf7-1643612836682)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210817143059379.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ysjQjujl-1643612836682)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210817144338535.png)]
表单及表单应用
表单语法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ly9Smm0E-1643612836683)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210817144458088.png)]
get方式提交 我们可以在URL中看到我们提交的信息，不安全，高效
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0Al5yfrv-1643612836683)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210817145548054.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T5M0uQBR-1643612836683)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210817145820784.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gU2vWgks-1643612836684)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210817150134055.png)]
表单应用
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-twu1m9g4-1643612836684)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210817164747130.png)]
只读 readonly
禁用 disabled
隐藏 hidden
表单初级验证
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tECkkdeE-1643612836685)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210817165440826.png)]
为什么验证
安全 减轻压力
placeholder=“请输入用户名” 提示信息 用在所有输入框中
required 非空判断 用在所有输入框中
pattern 正则表达式 百度
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sIOllQxi-1643612836685)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210817170138642.png)]