石臼墙话板

h5小总结

2019-09-27  本文已影响0人  无念丶无为

之前看过了h5的视频,做了一些笔记,但是做起网页来还是比较困难,就是布局的一些东西没有太懂;又重新开始看,先记录一部分:

XHTML的元素语法标签所有浏览器都支持英文网页

元素必须正确嵌套

元素必须始终关闭

元素必须小写

文档必须有一个根元素

XHTML的属性语法规则

属性必须使用小写

属性值必须用引号包围

属性最小化也是禁止的(不能简写)

<html lang="zh">中文网页

&nbsp  空格

<br/>换行

<meta charset="UTF-8">设置的编码为UTF-8可以设置其他属性

style  规定元素的样式

title  规定元素的额外信息

meta name="description" content="这里是网页的描述,是给搜索引擎看的,搜索引擎根据这个描述进行收录排名,一般是网页内的关键字。"

注释<!--注释内容-->或<comment>...</comment>

块元素 :h1-h6,p,hr

行内元素 :img,a

区别  :        1.块元素独占一行,行内元素在同一行显示;        2.块元素可以嵌套,行内一般不嵌套        3.块元素宽度默认100%,行内元素由内容撑开

布局:

所谓H5布局,说简单点,就是用H5特有的新标签(语义化)来替代传统布局方式。几点注意如下:

1)css写法不变,比如你定义标签,那css里就要这样写header{}。另外,H5标签也是可以加class或id的,css写法没啥区别,比如,.样式名{}  #样式名{}

2)移动端网站H5标签(包括css3)是支持的,放心大胆去弄。如果是单纯PC网站,建议传统div方式布局比较合适;

3)响应式网站,技术强迫症,必须要用H5来做,那html5shiv.js或modernizr.js是不错的IE兼容解决方案。注意:ie8以下是没办法的,可以页面顶部弹出提醒升级你的IE,算友好体验的一部分吧。

4)bootstrap。

H5布局标签如何选择?

全局:

<header><header>:相当于<div class="header"></div>

<footer></footer>:相当于<div class="footer"></div>

<section></section>:相当于<div></div>,以前习惯的div改为section,当然你继续用div也一样

<aside></aside>:相当于<div class="sidebar"></div>,比如常见的侧边栏

导航或者分页:

<nav></nav>:<div class="nav"><ul></ul></div>

文章、帖子或者其它独立的页面:

<article></article>:相当于<div class="article"></div>

<time></time>:日期时间什么的放里面就好了,相当于<div class="time">2016-05-21 15:43:21</div>,支持pubdate属性,表示为发布日期

<summary></summary>:标签包含 details 元素的标题,”details” 元素用于描述有关文档或文档片段的详细信息。”summary” 元素应该是 “details” 元素的第一个子元素。<details><summary>HTML 5</summary>This document teaches you everything you have to learn about HTML 5.</details>

其它新标签:

<audio></audio>:标签定义声音,比如音乐或其他音频流。HTML5:<audio src="someaudio.wav">您的浏览器不支持 audio 标签。</audio>

<video></video>:标签定义视频,比如电影片段或其他视频流。<video src="movie.ogg" controls="controls">您的浏览器不支持 video 标签。</video>

<source>:标签为媒介元素(比如 <video> 和 <audio>)定义媒介资源。<audio controls><source src="horse.ogg" type="audio/ogg"><source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element.</audio>

<datalist></datalist>:标签定义可选数据的列表。与 input 元素配合使用,就可以制作出输入值的下拉列表。

<figure> 标签用于对元素进行组合。使用 <figcaption> 元素为元素组添加标题。<figure><figcaption>PRC</figcaption><p>The People's Republic of China was born in 1949...</p></figure>(是不是类似dl dt dd)

<mark></mark>:主要用来在视觉上向用户呈现那些需要突出的文字。<mark>标签的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。传统如<span></span>

<hgroup></hgroup>:标签用于对网页或区段(section)的标题进行组合。

上一篇 下一篇

猜你喜欢

热点阅读