HTML5

要成为六边形战士 · 发表于 2020-3-10 16:32:00

HTML

1.HTML与xhtml区别

DOCTYPE文档及编码
元素大小写
属性布尔值
属性引号
图片的alt属性
单标签写法
双标签闭合

2.strong与b、em与i

表现形态都是文本加粗和文本斜体
区别：是否具备语义化（strong和em表示强调）

3.引用标签

blockquote:引用大段的段落解释
q:引用小段的短语解释
abbr:缩写或首字母缩略词
address:引用文档地址信息
cite:引用著作的标题

4.iframe标签

可以引入其他的html到当前html中显示
主要是利用iframe属性进行样式的调节

5.br与wbr

br就是换行，wbr就是软换行(比较长的单词)

6.pre与code

针对网页中的程序代码显示效果

<pre>
	<code>
	代码段,如 &lt;div&gt; 
	</code>
</pre>

7.map与area

给特殊图形添加链接，area能添加热区的形状：矩形、圆形、多边形

<img src="" alt="" usemap="#star">
<map name="">
	<area shape="rect" coords="205 83 386 173" href="" alt="">
    //矩形 左上角点坐标+右下角点坐标
	<area shape="circ" coords="300 130 50" href="" alt="">
    //圆形 圆心坐标+半径
	<area shape="poly" coords="305 99 233 156 256 250 172 197" href="" alt="">
    //多边形 连续点坐标 首尾相连   
</map>

8.embed与object

能嵌入一些多媒体，如Flash动画，插件等，基本没太多区别，主要为了兼容不同浏览器
object 元素需要配合param元素一起完成

9.audio与video

引入音频与视频的文件

<audio src=".mp3" controls loop autoplay></audio> 
//controls显示控件(默认不显示) loop循环播放 autoplay自动播放
<video src=".mp4" controls></video>
<video>
    <source src=".ogv"></source>
	<source src=".mp4"></source>
</video>
//备选操作(如果浏览器不支持可以备选)

10.文字注解

ruby、rt组合
```
<ruby>
    寒<rt>hán</rt>
</ruby>
```
bdo

<p>
    <bdo dir="ltr"></bdo>//rtl 反向
</p>

11.link扩展

添加网址标题栏前的小图标

<link rel="icon" type="/image/x-icon" href="http:''www.mobiletrain.org/favicon.ico">

12.meta扩展

meta添加辅助信息
name http-equiv

13.html5新语义化标签

header：页面
footer：页脚
main：主体
hgroup：标题组合
nav：导航
注：header、footer、main在一个网页中只能出现一次
article：独立的内容
aside：辅助信息的内容
section：区域
figure：描述图像或视频
figcaption：描述图像或视频的标题部分
datalist：选项列表
details/summary：文档细节/文档标题
progress/meter：定义进度条/定义度量范围
time：定义日期或时间
mark：带有记号的文本

<body>
    <header>
        <hgroup>
            <h1>主标题</h1>
            <h2>副标题</h2>
        </hgroup>
        <nav>
            <ul>
                <li>首页</li>
                <li>论坛</li>
                <li>关于</li>
            </ul>
        </nav>
    </header>
    <main>
        <article>
            <section>
                <ul>
                    <li>
                        <figure>
                            <img src="" alt="">
                            <figcaption></figcaption>
                        </figure>
                    </li>
                </ul>
            </section>
            <section>
                <input type="text" list="elems">
                <datalist id="elems">
                    <option value="a"></option>
                    <option value="b"></option>
                    <option value="c"></option>
                    <option value="d"></option>
                    <option value="e"></option>
                    <option value="f"></option>
                    <option value="g"></option>
                </datalist>
                <details>
                    <summary>HTML</summary> //添加open属性，可以默认展开
                    <p>超文本标记语言</p>
                </details>
                <progress //进度
                min="0" max="10" value="8">
                </progress>
                <meter //度量
                min="0" max="100" value="35" low="10" high="60">
                    //low 最小值 high 最大值
                </meter>
            </section>
            <section></section>
        </article>
        <aside>

        </aside>
    </main>
</body>

14.html表格

添加单线：border-collapse：collapse
隐藏空单元：empty：hide
斜线分类：border/rotate
列分组：colgroup及col标签定义列属性
单元格边距：cellpadding
单元格间距：cellspacing
表格标题：caption标签
thead、tbody、tfoot

15.表单扩展

美化表单控件 1. :checked 2. position + opacity
新的input控件
- email：电子邮件地址输入框
- url：网址输入框
- number：数值输入框
- range：滑动条
- date/month/week：日期控件
- search：搜索框
- color：颜色控件
- tel：电话号码输入框(在移动端默认调起数字键盘)
- time：时间控件
新的表单属性
- autocomplete：自动完成默认 on/off
- autofocus：获取焦点
- required：不能为空
- pattern：正则验证
- method：数据传输方式
- enctype：数据传输类型
- name/value：数据的键值对
扩展标签
- fieldset：表单内元素分组
- legend：为fieldset元素定义标题
- optgroup：定义选项组

BFC规范

触发BFC规范的容器，可以形成一个独立的容器，不受到外界的影响，从而解决一些布局问题
触发的样式
- float(除none以外的值)
- position(absolute,fixed)
- display(inline-block,table-cells,flex)
- overflow(除了visible以外的值，hidden、auto、scroll)

来源：https://www.cnblogs.com/oreic/p/12456527.html

HTML5

HTML

1.HTML与xhtml区别

2.strong与b、em与i

3.引用标签

4.iframe标签

5.br与wbr

6.pre与code

7.map与area

8.embed与object

9.audio与video

10.文字注解

11.link扩展

12.meta扩展

13.html5新语义化标签

14.html表格

15.表单扩展

BFC规范

浏览过的版块