はじめてのHTML5入門 (1)_html/css_WEB-ITnose

H5 は実際には H4 の拡張バージョンであり、H5 を使用して Web ページを構築すると、ラベルのセマンティクスがより簡潔かつ明確になります。まず第一に、HTML4 は HTML マークアップ + CSS2 + JavaScript の基本的な応用であることを理解する必要があります。一方、H5 は独自のベースでいくつかの新しい機能を提供するものにすぎません。

1. H5 セマンティック タグ

1): HTML の定義、そのドキュメント宣言の 1 つ 8b05045a5be5764f313ed5b9168a17e6

構文は html4 に似ており、w3c は html4 の構文を検出するために使用できる Web サイトを提供します。 html.

https://validator.w3.org/

2) html には、div および span に似た新しいセマンティック タグが多数あります。

 1 <nav> 表示导航 2 <header> 表示页眉 3 <footer> 表示页脚 4 <section> 表示区块 5 <article> 表示文章 如文章、评论、帖子、博客 6 <aside> 表示侧边栏 如文章的侧栏 7 <figure> 表示媒介内容分组 与 ul > li 做个比较 8 <!--以上是常用到的--> 9 <mark> 表示标记 (带用“UI”，不怎么用)10 <progress> 表示进度 (带用“UI”，不怎么用)11 <time> 表示日期12 <hgroup> 标题列表 (据说已废弃)13 <details>14 <bdi>15 <command>16 <summary>17 <rp>18 <rt>19 <ruby>20 <!--尽量避免全局使用header、footer、aside等语义标签。-->

３）互換処理

① HTML5の新タグをサポートしていないブラウザでは、これらの新タグはインライン要素（inline）に解析されて扱われ、ブロック要素（block）に変換されます。 ②IE9以下のバージョンでは、これらの新しいタグは正常に解析できませんが、document.creatElement('tagName')で作成したカスタムタグは認識できます

③実際の開発では、IEブラウザのバージョン検出を利用してサードパーティのタグを読み込んでいます互換性の問題を解決するための JS ライブラリ。

<!-- [if lte IE 8]>    <script src="./js/html5shiv.min.js"></script><![endif]-->

【注意】c37f8231a37e88427e62669260f0074d84122da5b51c58ef54d7045814144010 これは HTML5 のタグで、div と同等ですが、IE6 ではこの未知のフッター タグがインラインとして扱われます。要素は処理されるため、この時点で、js ライブラリをインポートする必要があります。

html5shiv.min.js

2. Form

——form はフォームの宣言に使用され、input はフォーム項目を表すために使用され、type はフォーム項目の型を制御するために使用されます。フォームの機能強化)

1) 入力タイプ (フォーム タイプ、フォーム要素、フォーム属性、フォーム イベント)

 1 <input type="text" /> 2 email 输入email格式 3 tel 手机号码 4 url 只能输入url格式 5 number 只能输入数字 6 search 搜索框 7 range    范围 8 color    拾色器 9 time    时间10 date    日期 不是绝对的11 datetime    时间日期12 month    月份13 week    星期

一部のタイプはモバイル デバイスに有効で、一定の互換性があり、実際のアプリケーションで選択的に使用できます

2) 新しいタグをいくつか追加しました

① データリスト: fc86e7b705049fc9d4fccc89a2e80ee3bbb84e3e75b36eb4260cf6b3db844ca1

② 安全なフォーム送信データ送信セキュリティに使用: aa983b9eb8086376f1f6481364a02e5a9548acd8622d5ff6c495840f6d77cc7d

③ 測定に使用: 49c6123c49c6be380cb91db06cd3bfa96fd20bd7b615c56cbd536dc339c52b20

④ フォームに出力する場合、効果はありません: cfc004ddbccf9133a55d74a5ee692e34cfc004ddbccf9133a55d74a5ee692e34

3) いくつかの新しい属性が追加されました:

1 placeholder 占位符2 autofocus 获取焦点3 multiple 文件上传多选或多个邮箱地址4 autocomplete 自动完成，用于表单元素，也可用于表单自身5 form 指定表单项属于哪个form，处理复杂表单时会需要6 novalidate 关闭验证，可用于<form>标签7 required 验证条件，必填项8 pattern 正则表达式 验证表单9 手机号:<input type="tel" name="tel" required="required"       pattern="^(\+86)?1[3,5,8](\d{9})$">

【追記】以前は js を使用して実現しなければならなかった効果を実現するために、これらの新しく追加された属性を使用します

4) フォーム内のイベント

① テキスト ボックスへのデータの入力を監視します: oninput イベント

②検証が失敗した場合にトリガーされます: oninvalid

③進行状況マークには、progress

を使用します 3. マルチメディア

1) 先ほど、Web プレーヤーを作成しました

①Windows に付属のプレーヤーを呼び出すために js を使用します。オペレーティングシステムにバンドルされています

②Adobe の Flash は基本的にすべてのユーザーのコンピュータにインストールされます

③後期には、各コンピュータにクイック ブロードキャストをインストールできるようになり、js がクイック ブロードキャストを呼び出すようになりました。

[JavaScript のコンテンツ] ] javaScriptは3つの部分に分割されます：

'' s- ‐ ‐ ‐ ‐--から

（一部のオブジェクトはブラウザの関数を呼び出すことができます。） , この HTML ファイルをブラウザで開きます。ブラウザはこの HTML ファイルを分析し、それをドキュメント オブジェクトに置きます。将来、HTML 内のコンテンツを操作したい場合は、ドキュメントを直接操作できます。

1       //(操作dom 就是熟练dom   的api)2         //    (操作dom 的前期，要操作dom 必须先得到dom)3              document.getElementById("");4              document.getElementsByTagName("");

2) HTML5 では、再生を完了するためのいくつかのタグを提供できます。

        我们做这种音频文件，以及视频文件，最麻烦地方就是解码【音频文件，以及视频文件，都有格式，各种各样的格式】

        1:假设你网站的视频资源是自己产生的

        2:假设网站的资源是用户上传上去的，我们需要在用户上传的时候对这个资源进行转码.

【H5中】这个h5 在这个的基础上面进行了扩展，提供了一些更加强大的方法.

//根据class 的值去获取             document.getElementByClassName("")// 这个里面支持css 里面的选择器//这里返回的是第一个元素..             document.querySelector(".username")//获取的所有的,返回的是一个集合.             document.querySelectorAll(".username>li");

【表单的总结】我现在有一个表单，定义属性，什么时候id ，什么是时候使用name，什么时候使用class

   ① 我为一个元素加id 的目的，为了js 方便去获取这个元素

   ②name ：如果我要跟服务器进行交互，服务器到时候要获取客户端表单提交的数据.它是根据name 的值去获取   

<input type="text" name="username" value="zhangsan">// username=zhangsan

　③class 一般，如果我要通过样式去批量控制元素，我就为元素添加class 属性.

    我们以后做案例：第一步，我要把页面的基本布局画好（html,css）

                                  第二步：分析功能，根据功能找到对应的事件

                                  第三步：事件出来了，方法就出来了

【ps】我看要完成什么功能，一般情况下我们都是操作dom； 获取dom，操作dom （api 操作.）；即使调试,一个案例，都是调出来的

【小结】  html5 概念：就是在html4 上面的一个增强版本。在 标签，css，js 上面的一个增强。

 标签：出现了一些新的比较具有颠覆性的标记.

       1:html5 的声明

       2:语义标签(大家当做div ，或者span 来理解就可以.)

       3:兼容性处理，需要导入一个js 库.

       4:表单，我们传统的表单，难以完成比较复杂的页面应用

            4.1：新增了一些类型 type=""

            4.2: 新增了一些标签  datalist

            4.3: 新增了属性  (文档)

            4.4：事件  oninput

          小案例：*，案例.

多媒体处理:

        audio  针对mp3 音频

        video   针对视频的

 解码；做客户端不用处理.

dom 的处理

        新增了一些api ，来让我们去获取页面上面的内容.

        document.getElementByTagName

        document.querySelector();

        document.querySelectorAll();

        新增了属性操作:

         document.getElementById("").classList.add();

         document.getElementById("").classList.remove();

         document.getElementById("").classList.toggle();

         document.getElementById("").classList.contains();

        自定义属性：

          我可以为元素自定义属性 我们是在元素上面加  data-itcast-name="";

          遵守驼峰命名法则

          tabs 选项卡切换.(就是属性api )

 

4、CSS3 与 JS 的区别

1）css:出现了css3，支持3d 效果.

 　　js:定位（直接在网站里面可以嵌入地图.），重力感应

2）css3 肯定可以使页面的显示更加的丰富效果

　　javascript 新增了一些api，定位（百度地图），重力感应  js 的一些对象