HTML
<!--描述 HTML 文档的元数据:每三十秒刷新界面-->
<meta http-equiv="refresh" content="2" />
<!--网站图标-->
<link
rel="shortcut icon"
href="图片地址"
type="image/x-icon"
/>
<!--规定页面上所有链接的默认 URL 和默认目标 置于头部之内-->
<base href="..." target="_blank">
/*media属性:对两种不同媒介类型使用不同样式表*/
<style type="text/css" media="print">
<style type="text/css" media="screen and (max-height:700px)">
/*应用样式到元素的父元素及其子元素。*/
<style type="text/css" scoped>
img、
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>
属性 | 表述 | 属性 | 表述 |
---|---|---|---|
border | 显示框线 | bgcolor | 表格背景 |
cellspacing | 单元格之间的距离 | cellpadding | 单元格内容与其边框之间的空白 |
<!--type: a A i I 1 -->
<ol start="50" type="I" >
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
iframe
<iframe loading="lazy" src="demo_iframe.htm" width="200" height="200" frameborder="0" scrolling="auto">
</iframe>
HTML5
<!--画布 -->
<canvas id="myCanvas" width="200" height="100"></canvas>
表单属性
- required : 必填
- placeholder : 提示
- autofocus : 自动聚焦
- autocomplete : 自动填充 on/off
- formaction : 表单提交的URL地址.覆盖form的action属性 与type="submit"配合使用
- formenctype : 提交到服务器的数据编码 与type="submit"配合使用 “ multipart/form-data ”
全局属性
- hidden : 隐藏
- contenteditable : 元素是否可编辑
- accesskey : 配合Alt实现快捷访问超链接
CSS/CSS3
引入和@import引入差别
文本
对齐方式 : text-align
- center : 居中
- right : 居右
- justify : 两端对齐
文本修饰 : text-decoration: text-decoration-line text-decoration-color text-decoration-style
- overline : 上划线 red dotted/wavy
- line-through : 管穿线 red dotted/wavy
underline : 下划线 red dotted/wavy
文本转换 : text-transform
- uppercase : 大写
- lowercase : 小写
- capitalize : 首字母大写
段落中的文本换行 : white-space
- normal : 默认。空白会被浏览器忽略。
- nowrap : 文本不会换行,文本会在在同一行上继续,直到遇到 br 标签为止。
- inherit : 规定应该从父元素继承 white-space 属性的值。
- pre : 空白会被浏览器保留。其行为方式类似 HTML 中的
标签。
- pre-wrap : 保留空白符序列,但是正常地进行换行。
- pre-line : 合并空白符序列,但是保留换行符。
- 单词、汉字间隔 : word-spacing
- 字母、汉字 : letter-spacing
- 文本方向 : direction : rtl
- 设置元素的垂直对齐 : vertical-align
值 | 描述 |
---|---|
baseline | 默认。元素放置在父元素的基线上。 |
sub | 垂直对齐文本的下标。 |
super | 垂直对齐文本的上标 |
top | 把元素的顶端与行中最高元素的顶端对齐 |
text-top | 把元素的顶端与父元素字体的顶端对齐 |
middle | 把此元素放置在父元素的中部。 |
bottom | 使元素及其后代元素的底部与整行的底部对齐。 |
text-bottom | 把元素的底端与父元素字体的底端对齐。 |
length | 将元素升高或降低指定的高度,可以是负数。 |
% | 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。 |
inherit | 规定应该从父元素继承 vertical-align 属性的值。 |
- 边框合并 : border-collapse:collapse;
- 隐藏元素 : visibility:hidden
控制内容溢出元素框时显示的方式 : overflow
- visible : 默认值。内容不会被修剪,会呈现在元素框之外。
- hidden : 内容会被修剪,并且其余内容是不可见的。
- scroll : 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
- auto : 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
- inherit : 规定应该从父元素继承 overflow 属性的值。
文本溢出显示 : text-overflow
- ellipsis : 显示省略符号 ... 来代表被修剪的文本
- clip : 剪切文本
- string : 使用给定的字符串来代表被修剪的文本
- 允许长的内容可以自动换行 : word-wrap:break-word ;
- 元素的总高度和宽度包含内边距和边框 : box-sizing: border-box;
- box-shadow: h-shadow/水平阴影位置 v-shadow/垂直阴影位置 blur/模糊距离 spread/阴影大小 color/颜色 inset;
- mediatype : all/全部 ; print/打印机,screen/用于电脑屏幕,平板,智能手机等,speech/用于屏幕阅读器
- not: not是用来排除掉某些特定的设备的,比如 @media not print(非打印设备)。
- only: 用来定某种特别的媒体类型。
- all: 所有设备,这个应该经常看到。
- and :and 操作符用于将多个媒体查询规则组合成单条媒体查询,