前提
W3C:World Wide Web Consortium（万维网联盟）
Web技术领域最权威和具有影响力的国际中立性技术标准机构
其中标准包括：机构化标准语言（HTML、XML）
表现标准语言（CSS）
行为标准（DOM、ECMAScript）
HTML：超文本标记语言
建立html文件
利用浏览器打开该文件
若出现错误提示：
- 打开文件设置：
- 选择Tools：
HTML基本结构
- DOCTYPE:告诉浏览器，我们要使用什么规范
- <html>:整个网页
- head：网页头部
- body：网页主体
- title：网页标题
- meta：描述性标签，用来描述网站的信息
Ctrl+/:html文件的注释快捷键
meta标签使用：
如网易云：
网页基本标签
- 标题标签<h1>
- 段落标签<p>
- 换行标签<br/>
- 水平线标签<hr/>
- 字体样式标签<strong>、<em>
- 注释和特殊符号 > < ©
块元素：无论内容多少，该元素独占一行（p、h1-h6）
行内元素：内容撑开宽度，左右都是行内元素的可以在排在一行（a、strong、em）
图像标签
常见图像格式JPG、GIF、PNG、BMP
利用img标签嵌入图像
<img src="图像地址" alt="图像的替换文字" title="鼠标悬停时提示文字" width="图像宽度" height="图像高度"/>
该处选择资源目录下的图片文件中的图片进行测试
src：图片地址
相对地址：../resources/image/apple.jpg
绝对地址：D:\学习资料\java\前端\resources\image\apple.jpg
图片不存在的情况：
链接标签
文本、图像超链接
<a href="链接路径" target="链接在哪个窗口打开"></a>
href:可以是html文件、URL地址
target：链接在哪个窗口打开
- _blank:在新标签中打开
- _self:默认值。在自己的网页中打开
锚标签
使用方法：
- 需要一个锚标记
- 跳转到标记#
页面跳转：
功能性链接
邮件链接：mailto：邮箱地址
列表标签
列表：信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者更快捷地获得相应的信息。
列表分类：
- 无序列表
<ol><li></li> </ol>
- 有序列表
<ul><li></li> </ul>
- 定义列表
<dl><dt>列表名称</dt><dd>列表内容</dd> </dl>
表格
表格简单通用，结构稳定。
基本结构有：单元格、行、列、跨行、跨列
如下：
- 表格标签：table
- 行row：tr
- 列：td
- 边框：border
- 跨行：colspan，参数是跨的列数
- 跨列：rowspan，参数使跨的行数
<table><tr><td>1.1</td><td>1.2</td><td>1.3</td></tr><tr><td>2.1</td><td>2.2</td><td>2.3</td></tr> </table>
媒体元素
视频元素标签：video
音频元素标签：audio
- 属性src：所要选中的文件位置
- 属性controls:控制播放
- 属性autoplay:自动播放
<video src="mp4文件" controls autoplay></video>
<audio src="mp3文件" controls autoplay></audio>
扩展：页面结构分析
| header | 标题头部区域内容（页面或页面中的一块区域） |
| footer | 标记脚部区域内容（整个页面或页面的一块区域） |
| section | Web页面中的一块独立区域 |
| article | 独立的文章内容 |
| aside | 相关内容或应用（侧边栏） |
| nav | 导航类辅助内容 |
iframe内联框架
<iframe src="页面地址" name="框架标识名" frameborder="0"></iframe>
使用方法：
width:宽度
height：高度
<iframe src="https://www.baidu.com" frameborder="0" width="1000px" height="700px"></iframe>该处跳转到百度
也可以通过a标签往iframe加东西
name：框架标识名
target：链接在哪个窗口打开
![[论文阅读] SeeSR: Towards Semantics-Aware Real-World Image Super-Resolution](https://i-blog.csdnimg.cn/direct/b58dc36f07b34d5fad3520c6a1224a76.png)
