h5小总结

作者: 无念丶无为 | 来源:发表于2019-09-27 17:22 被阅读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)的标题进行组合。

相关文章

  • taro多端开发应用

    在线预览地址: 目前实现h5,微信小程序端 H5 地址 egg后台 问题总结:egg跨域: 今日头条接口 首页顶部...

  • h5小总结

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

  • 关于iOS中原生和h5交互的知识总结(二)WKWebView

    前言 目录 关于iOS中原生和h5交互的知识总结(一)UIWebView关于iOS中原生和h5交互的知识总结(二)...

  • <h1>H5学习记录~H5总结文档</h1&g

    H5学习记录~H5总结文档 ------第一部分Html标签

  • 小知识点总结

    小知识点总结 标签(空格分隔): 随笔 1.H5&C3新知识点 H5新标签 H5中新增了很多具有“语义化”的新标签...

  • 小程序和h5页面之间的互相跳转

    小程序跳转到 H5 页面 H5 页面跳回小程序 在 h5 页面的任何点击事件中: 在H5页面引入 https://...

  • TODO

    H5 直播总结视频 总结关于 React 门店项目的一些思考

  • H5+CSS总结

    H5和CSS知识点总结脑图

  • 小程序内嵌H5初探

    因为有一个活动页,要同时在app和小程序里面做推广,所以决定使用web的H5页面。第一次做小程序内嵌H5,总结几点...

  • 小程序跳转h5

    小程序官方没有提供外部H5网页直接跳转到小程序的api,所以目前只支持小程序内嵌H5,并且只有内嵌的H5才能跳回小...

网友评论

    本文标题:h5小总结

    本文链接:https://www.haomeiwen.com/subject/dmcmuctx.html