HTML学习

最新推荐文章于 2024-09-30 15:42:36 发布

Guiyyyyy

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量198

点赞数

文章标签：前端 html java

本文链接：https://blog.csdn.net/Guiyyyyy/article/details/127995043

版权

HTML（超文本标记语言）学习

一、基础框架

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>我的测试页面</title>
  </head>
  <body>
    <p>点击查看基础框架</p>
  </body>
</html>

二：标签

1、文本基础

<meta>: 指定字符编码。 <p>:段落。 <h1><h2><h3><h4>:不同级别的内容。 <span>:无语义。
ul:无序列表(li列出项目) ol:有序列表(li列出项目)
<em>:斜体

<strong>:加粗

<i> 被用来传达传统上用斜体表达的意义：外国文字，分类名称，技术术语，一种思想……

<b>被用来传达传统上用粗体表达的意义：关键字，产品名称，引导句……

<u>被用来传达传统上用下划线表达的意义：专有名词，拼写错误……
<a herf>：超链接

dl: 描述列表描述列表使用与其他列表类型不同的闭合标签— dl; 此外，每一项都用 dt元素闭合。每个描述都用 dd元素闭合。

<dl>
  <dt>dl使用实例</dt>
    <dd>戏剧中，某个角色对自己的内心活动或感受进行念白表演，这些台词只面向观众，而其他角色不会听到。</dd>
  <dt>语言独白</dt>
    <dd>戏剧中，某个角色把自己的想法直接进行念白表演，观众和其他角色都可以听到。</dd>
  <dt>旁白</dt>
    <dd>戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众，内容一般都是角色的感受、想法、以及一些背景信息等。</dd>
</dl>

<sup>上标

<sub>下标
```
<p>
    C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>;
    3<sup>2</sup> 的值为 9
</p>
```
2、网站架构

为了实现语义化标记，HTML 提供了明确这些区段的专用标签，例如：
- header：页眉。
- nav：导航栏。
- main：主内容。主内容中还可以有各种子内容区段，可用article、section 和 div 等元素表示。
- aside：侧边栏，经常嵌套在main 中。
- footer：页脚。
- br：换行
- hr：分割线

三、多媒体与嵌入

1、图片<img>

<img>标签只需要一个 src （一般读作其全称 source）来使其生效。src 属性包含了指向我们想要引入的图片的路径，可以是相对路径或绝对 URL。

属性 alt ，它的值应该是对图片的文字描述，用于在图片无法显示或不能被看到的情况。

可以给图片增加title属性来提供需要更进一步的支持信息，类似于超链接。

<img src="images/dinosaur.jpg"
     alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
     title="A T-Rex on display in the Manchester University Museum">

2、视频和音频<video>和<audio>

src同 img src 属性.

controls用户必须能够控制视频和音频的回放功能。你可以使用 controls 来包含浏览器提供的控件界面，同时你也可以使用合适的 JavaScript API 创建自己的界面。界面中至少要包含开始、停止以及调整音量的功能。

每个 <source> 标签页含有一个 type 属性，这个属性是可选的

<video controls width="400" height="400"
       autoplay loop muted
       poster="poster.png">
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>

<audio controls>
  <source src="viper.mp3" type="audio/mp3">
  <source src="viper.ogg" type="audio/ogg">
  <p>你的浏览器不支持 HTML5 音频，可点击<a href="viper.mp3">此链接</a>收听。</p>
</audio>

3、其他嵌入技术<iframe>

iframe基本要素：

[allowfullscreen]

如果设置，<iframe>则可以通过[全屏 API]设置为全屏模式（稍微超出本文的范围）。
[frameborder]

如果设置为 1，则会告诉浏览器在此框架和其他框架之间绘制边框，这是默认行为。0 删除边框。不推荐这样设置，因为在 [CSS 中]可以更好地实现相同的效果。[border]: none;
[src]

该属性[img]一样包含指向要嵌入文档的 URL 路径。

<iframe 
    src="https://player.bilibili.com/player.html?aid=19390801&cid=31621681&page=1" 
    scrolling="no" 
    border="0" 
    frameborder="no"
    framespacing="0" 
    allowfullscreen="true" > 
</iframe>
 <p>改革春风吹满地</p>

4、矢量图<svg>

SVG 用于标记图形，而不是内容。有一些元素来创建简单图形，如[circle] 和[rect]。更高级的 SVG 功能包括 [feColorMatrix]（使用变换矩阵转换颜色）[animate]（矢量图形的动画部分）和 [mask]（在图像顶部应用模板）

<svg width="100%" height="100%">
    <rect width="100%" height="100%" fill="red" />
    <circle cx="100%" cy="100%" r="150" fill="blue" stroke="black" />
    <polygon points="120,0 240,225 0,225" fill="green"/>
    <text x="50" y="100" font-family="Verdana" font-size="55"
          fill="white" stroke="black" stroke-width="2">
            Hello!
    </text>
  </svg>

使用<img>嵌入svg

<img
    src="equilateral.svg"
    alt="triangle with all three sides equal"
    height="87px"
    width="100px" />

直接使用<svg>标签

<svg width="300" height="200">
    <rect width="100%" height="100%" fill="green" />
</svg>

使用<iframe>嵌入svg

<iframe src="triangle.svg" width="10" height="10" sandbox>
    <img src="triangle.png" alt="Triangle with three unequal sides" />
</iframe>

5、响应式图片

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

srcset定义了我们允许浏览器选择的图像集，以及每个图像的大小。

一个文件名 (elva-fairy-480w.jpg.)
一个空格
图像的固有宽度（以像素为单位）（480w）。注意，这里使用宽度描述符 w。这是图像的真实大小。

sizes定义了一组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，什么样的图片尺寸是最佳选择。

一个媒体条件（(max-width:480px)）——在这里“当可视窗口的宽度是 480 像素或更少”。
一个空格
当媒体条件为真时，图像将填充的槽的宽度（440px）

四、表格

1、<table>

<td> 表格内容

<tr> 表格行

<th> 列标题

<caption> 为表格增加一个标题

<thead>

<tfoot>

<tbody>

colspan：元素跨多列

rowspan：元素跨多行

scope: 在<th>中用于设置是行标题还是列标题。

<table>
  <caption>我不是一个好人</caption>
  <colgroup>
    <col style="background-color: pink">
    <col style="background-color: yellow">
  </colgroup>
  <thead>
    <th>Data 1</th>
    <th>Data 2</th>
  </thead>
  <tbody>
  <tr>
    <td>Calcutta</td>
    <td>Orange</td>
  </tr>
  <tr>
    <td>Libra</td>
    <td>Rose</td>
  </tr>
  </tbody>
    <tfoot>
        <tr>
            <th scope="row">Totals</th>
            <td>21,000</td>
        </tr>
    </tfoot>
</table>