HTML5

黎正贤 · 发表于 2023-3-30 11:07:49

什么是HTML

HTML
- Hyper Text Markup Language（超文本标记语言）

W3C标准

W3C
- World Wide Web Consortium(万维网联盟)
- 成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构
- http://www.w3.org/
- http://wwwchinaw3c.org/
W3C标准包括
- 结构化标准语言(HTML、XML)
- 表现标准语言(CSS)
- 行为标准(DOM、ECMAScript)

HTML基本结构

、等成对的标签，分别叫开放标签和闭合标签 单独呈现的标签(空元素)，如<hr/> ;意为用/来关闭空元素
网页基本标签

标题标签
1. <h1>一级标签</h1>
2. <h2>二级标签</h2>
3. <h3>三级标签</h3>
复制代码
段落标签：
1. <p>我不落泪忍住感觉</p>
2. <p>分手在起风这个季节</p>
复制代码
换行标签
1. 我落泪情绪零碎<br/>
2. 你的世界一幕幕纷飞<br/>
复制代码
水平线标签：<hr/>
字体样式标签
1. 粗体： <strong>W S N D</strong>
2. <p>斜体： <em>W S N D</em></p>
复制代码
注释和特殊符号：& ;

图像标签

< img src="图像地址" alt="图像的替代文字" title="鼠标悬停文字" width="图像宽度" height="图像高度" />

常见的图像格式
- JPG
- GIF
- PNG
- BMP
- ……

链接标签

< a href="链接路径" target="目标窗口位置">链接文本或图像 target常用值：_self、_blank

文本超链接
1. <a target="_blank" href="https://www.cnblogs.com/1.我的第一个网页.html">点击跳转页面</a>
2. <a target="_blank" target="_blank" href="https://www.baidu.com">点击跳转到百度</a>
复制代码
图像超链接
1. <a target="_blank" href="https://www.cnblogs.com/1.我的第一个网页.html">
2. <img src="https://www.cnblogs.com/../resource/image/1.jpg" alt="阿卡丽壁纸" title="悬停文字" width="600" height="400">
3. </a>
复制代码

超链接

页面间链接
- 从一个页面到另一个页面
1. <a target="_blank" href="https://www.cnblogs.com/1.我的第一个网页.html">点击跳转页面</a>
2. <a target="_blank" target="_blank" href="https://www.baidu.com">点击跳转到百度</a>
复制代码
锚链接

<a target="_blank" href="https://www.cnblogs.com/#top">回到顶部</a>
<a name="down">down</a>

复制代码

行内元素和块元素

块元素
- 无论内容多少，该元素独占一行
- (p、h1-h6...)
行内元素
- 内容撑开宽度，左右都是行内元素的可以在排在一行
- (a.strong.em…)

列表

什么是列表
- 列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息
列表的分类
- 无序列表
- 有序列表
- 自定义列表

表格标签

为什么使用表格
- 简单通用
- 结构稳定
基本结构
- 单元格
- 行
- 列
- 跨行
- 跨列

<a target="_blank" href="https://www.cnblogs.com/mailto:1186286729@qq.com">你好，加我获取小电影</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1186286729&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2:1186286729:52" alt="你好，加我获取小电影" title="你好，加我获取小电影"/>
</a>

复制代码

视频和音频

视频元素
- video
  1. <body>
  5. <table border="1px">
  6. <tr>
  8. <td colspan="4" align="center">1-1</td>
  10. </tr>
  11. <tr>
  12. <td rowspan="2">2-1</td>
  13. <td>2-2</td>
  14. <td>2-3</td>
  15. <td>2-4</td>
  16. </tr>
  17. <tr>
  18. <td>3-1</td>
  19. <td>3-2</td>
  20. <td>3-3</td>
  21. </tr>
  22. </table>
  23. </body>
  复制代码
音频元素
- audio
  1. <video src="../resource/video/周杰伦-搁浅.mp3" controls autoplay>搁浅</video>
  复制代码

页面结构分析

元素名描述header标题头部区域的内容(用于页面或页面中的一块区域)footer标记脚部区域的内容(用于整个页面或页面的一块区域)sectionWeb 页面中的一块独立区域article独立的文章内容aside相关内容或应用(常用于侧边栏)nav导航类辅助内容

<audio src="../resource/audio/1.mp4" controls autoplay>咕桑</audio>

复制代码

iframe内联框架

[/code][code]<iframe src="引用页面地址" name="框架标识名"></iframe>

复制代码

表单语法

名字:
密码:

表单元素格式

属性说明type指定元素的类型 text passwordcheckboxradio submit reset.file、hidden、image和 button，默认为textname指定表单元素的名称value元素的初始值。type为radio时必须指定一个值size指定表单元素的初始宽度。当tvpe为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位maxlengthtype为text或password时，输入的最大字符数checkedtype为radio或checkbox时，指定按钮是否是被选中表单的应用

隐藏域 hidden
只读 readonly
禁用 disabled

表单初级验证

思考？为什么要进行表单验证
常用方式
- placeholder
- required
- pattern

<body>
<iframe src="" name="hello" frameborder="0" width="1000px" height="800px"></iframe>
<a href="http://www.dayanzai.me/?s=vmware" target="hello">点击跳转</a>
</body>

复制代码

来源:https://www.cnblogs.com/Kodakku/p/16591775.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】我们会及时删除侵权内容，谢谢合作！

HTML5

本帖子中包含更多资源