HTML杂记

来源：互联网发布：智能电视看美剧软件编辑：程序博客网时间：2024/05/22 12:11

html

1.HTML 中的head部分是不会显示在web浏览器中的。它包含诸如页面 <title>、<meta>，链接到 CSS等等的一些设置，它的作用是包含一些页面的元数据。<header>标签相当于网页的页眉和<footer>标签相当于网页的页脚。

2.一个以block形式展现的块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中

3.属性值可以用单引号或者双引号来包裹，一般双引号

4. <link> 元素经常位于文档的头部，它有2个属性， rel="stylesheet"，表明这是文档的样式表，而 href,包含了样式表文件的路径，<link> 标签定义了文档与外部资源之间的关系。<link>标签通常用于链接到样式表:

5.<script> 部分没必要非要放在文档头部;实际上，把它放在文档的尾部（在 </body>标签之前）是一个更好的选择，这样可以确保在加载脚本之前浏览器已经解析了HTML内容

6.为文档设定主语言：例如<html lang=“en-US”>

7.无序列表，ul<li>，有序列表，ol<li>

8.超链接中的title是对超链接的一种解释，鼠标放在title的位置时会显示帮助信息。

9."返回上一个目录级" 使用两个dot表示 — ..

10.要在页面内进行跳转操作，必须在标题位置设置id名称，然后在需要跳转的地方设置超链接。例如：<h2 id="Mailing_address">Mailing address</h2>

11.尽可能使用相对链接（相对地址），会提高服务器和浏览器的工作效率

下拉列表框

12.描述列表使用与其他列表类型不同的闭合标签— <dl>(description list);此外，每一项都用 <dt> 术语(description term) 元素闭合。每个描述都用描述<dd> (description description) 元素闭合。让我们来完成下面的标记例子:

<dl>

<dt>soliloquy</dt>

<dd>In drama, where a character speaks to themselves, representingtheir inner thoughts or feelings and in the process relaying them tothe audience (but not to other characters.)

</dd>

<dt>monologue</dt>

<dd>In drama, where a character speaks their thoughts out loud to sharethem with the audience and any other characters present.

</dd>

<dt>aside</dt>

<dd>In drama, where a character shares a comment only with theaudience for humorous or dramatic effect. This is usually a feeling,thought or piece of additional background information.

</dd>

</dl>

• <code>:用于标记计算机通用代码。

• <pre>:用于标记固定宽度的文本块，其中保留空格（通常是代码块）。

• <var>:用于标记具体变量名。

• <kbd>:用于标记输入电脑的键盘（或其他类型）输入。

• <samp>:用于标记计算机程序的输出。

13.<abbr>——它常被用来包裹一个缩略语或缩写，并且提供缩写的解释（包含在title属性中）

14.文件和网站结构

标题: .<header>

• 导航栏: <nav>.

• 主要内容: <main>, with various content subsections represented by <article>, <section>, and <div> elements.

• 侧栏: <aside>; often placed inside <main>.

• 页脚: <footer>.

关于section元素的使用禁忌总结如下：

（1）不要将section元素用作设置样式的页面容器，那是div元素的工作。

（2）如果article元素、aside元素或nav元素更符合使用条件，不要使用section元素。

（3）不要为没有标题的内容区块使用section元素。

15.图片显示及文字替换

H5中的figcaption标签，在图片下方对图片进行标注。

16.浏览器视频格式文件播放

<p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p>

</video>

controls：

用户必须能够控制视频和音频的回放功能。你可以使用浏览器提供的控制接口，同时你也可以在 JavaScript（JavaScript API）当中使用这些控制接口。至少，这些媒体应该包括开始和停止，以及调整音量的功能。

<video>内的<p>是后备的显示内容，当网页无法显示的时候，会显示段落内的内容。和图片的alt功能类似。

<video controls width="400" height="400"

autoplay loop muted

poster="poster.png">

<p>Your browser doesn't support HTML5 video. Here is a <ahref="rabbit320.mp4">link to the video</a> instead.

</p>

</video>

以上代码运用到了h5 关于video的一些特性，

其中width和height控制视频的尺寸，控制尺寸使需要注意视频的纵横比。

loop属性剋设置音频和视频文件的循环播放

autoplay属性设置视频和音频文件的自动播放

mute属性设置播放视频文件时，默认静音

postre属性只想一个图片的url，该图片会在视频播放前显示，通常用于粗略的预览或者广告

preload属性用来缓冲较大的文件，有三个属性值可供选择，其中none表示不缓冲；auto表示页面加载完成后缓冲；metadata表示近缓冲文件的元数据

17.音频格式文件的播放

<audio>标签于<video>标签的使用方式基本相同，不过<video>标签不支持width和height属性也不支持poster属性。

18.显示音轨文本

WebVTT格式的文件（以.vtt后缀名保存文件）相当于字幕文件其中内容格式如下：

WEBVTT

00:00:22.230 --> 00:00:24.606

This is the first subtitle.

00:00:30.739 --> 00:00:34.074

This is the second.

<track>标签用于连接.vtt文件，其中<track>标签放在<audio>或者<video>标签当中，放在source>标签之后，使用kind’属性指明是哪一种类型，例如，subtitles，captions，descriptions。最后使用srclang告诉浏览器你是用什么语言编写的subtitles。

例如

<video>

</source>src="example.mp4" type=“video/webm">

</video>

19.其他的网页嵌入

<iiframe>用于外部网页的嵌入；<embed>和<objects>用于潜入PDF、SVG或者Flash

HTTPS是HTTp的加密版本，

1.HTTPS减少了远程内容在传输过程中被篡改的机会，

2.HTTPS防止嵌入式内容访问您的父文档中的内容，反之亦然。

20.添加矢量图形

SVG是一种用于描述矢量图像的XML语言，svg的属性包括<rect>、<circle>、<animate>、<mask>、<fecolormatrix>等

下面代码创建了一个简单的矢量图：

<svg version="1.1"

baseProfile="full"

width="300" height="200"

xmlns="http://www.w3.org/2000/svg">

</svg>

通过<img>标签可以将SVG图像添加到网页当中，并且css无法控制SVG的内容，必须在SVG代码中包含内联的CSS样式。

对于浏览器版本较旧，可能不支持SVG图的问题，可以用下面的方法解决：

若浏览器支持则显示SVG图像，若不支持，则显示PNG图像

21.响应式图片，不同设备图片查看

理想的情况是当访问网站时依靠不同的设备来提供不同的分辨率图片和不同尺寸的图片。

不同分辨率屏幕显示不同的图片：

<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定义了浏览器允许访问的图像集

sizes定义了媒体条件当媒体条件为真时，显示后面对应的图像尺寸。

所以当有了这些属性时浏览器会首先查看设备宽度，然后根据设备选择不同的图像尺寸。

相同分辨率显示屏幕显示不同分辨率图片：

<img srcset="elva-fairy-320w.jpg,

elva-fairy-480w.jpg 1.5x,

elva-fairy-640w.jpg 2x"

src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy">

这种情况下，网页会根据css样式表的宽度来决定显示那一幅图片

例如css样式表规定如下：

img {

width: 320px;

}

则浏览器会根据css的样式显示elva-fairy-640w.jpg图片

根据分辨率大小显示突出图片重点的图片

用到picture标签

</picture>

22.浏览器启动页面

23.html表格

<table>标签<tr>标签标示一行，<td>标签标示一行中的一个单元格，<th>标签标示表格的标题，其中<colspan>和<rowspan>标签设定某行或者某列跨越几个单元格。

若要指定某一列的样式可以用下面类似的标签语言：

紧挨着<table>标签的下方设置

<col>

</colgroup>

上面的标签将第二列的背景色设置为黄色。

标签,caption>可以为表格设置标题，紧跟在标签<table>下方。

标签<thead>标题<tbody>主体<tfoot>表格页脚，三个标签可以快设置表格的单元格式

表格单元格内可以嵌套表格（不建议打原始定义的规则，不建议嵌套）

《scope》标签可以设置标题的范围时某一列还是某一行

<th scope=“row">Haircut</th>表示Haircut是这一行的标题。

阅读全文

0 0