HTML备忘

2020-10-14

Word count: 604 | Reading time≈ 2 min

HTML备忘录

标签相关

块级元素自动换行而内联元素不自动换行
disabled = value 无论value值为什么，标签都会处于disabled状态，想要改变需将value置空
特殊字符引用表

原义字符	等价字符引用
<”	&lt
>	&gt
“	&quot
‘	&apos
&	&amp

使用相对路径优于绝对路径(舍去了DNS查找等操作)
<script>放在 <body>末尾前更优，这样可以确保脚本加载前浏览器已经解析HTML内容
<a>标签的title属性作为悬停提示
href的mailto subject cc body等关键字，用于发送邮件
描述列表
块引用 <blockquote cite="url"></blockquote>
行内引用<q cite="url">
缩略语<abbr title=".."></abbr>
保留空格渲染<pre>content</pre>
标记键盘输入<kbd></kbd>
换行<br>
水平线<hr>
嵌入其他网页<iframe>

属性：

allowfullscreen：可设置全屏

frameborder：边框

（尽量用js设置src）
嵌入PDF,SVG,Flash—<embed><object>
视频标签:<video>

属性：

autoplay:自动播放

loop:循环

muted:静音播放

poster:封面图

preload:缓冲（”none”：不缓冲 “auto”：页面加载自动缓冲）
权限管理 sandbox属性

表格相关

<table>
<!-- colgroup 必须包含在table标签内-->
	<colgroup> 
		<col style="#" span="x">
    </colgroup>
<!-- col标签可以指定每一行的属性，span是需要设置属性的行数-->
        <!-- table row -->
    <tr> 
    <td> 
        <!-- table data -->
    </td>
    </tr>
</table>

响应式设计

`````的 srcset和sizes属性

举例:

<!--srcset是一个文件列表，后面以w为单位的数据是文件的像素大小-->
<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     <!-- sizes 括号内的是条件 括号外的是前面条件为真时采用的样式-->
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px" <!--无条件的是默认样式-->
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

<picture>的应用


	```<soucre>```包含media srcset sizes属性

```html
<source media="(maxwidth:799px)"srcset="exa.jpg">
<!--media属性设置一个条件，为真则显示此图片-->

aaa

Donate

Copyright： Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.