header标签 nav标签 section标签 article标签 aside标签 widget标签 footer标签
能够便于开发者阅读和写出更优雅的代码，代码如诗 同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容 更好地搜索引擎优化 切记：HTML的职责是描述一块内容是什么（或其意义）而不是它长的什么样子，它的外观应该由CSS来决定。
La présentation de la liste de données datalist nécessite un support
<input type="text" list="input_list"> <datalist id="datalist"> <option value="选项框1"></option> <option value="选项框2"></option> </datalist> <input type="text" list="input_list"> <datalist id="datalist"> <option value="选项框1"></option> <option value="选项框2"></option> </datalist>
Pour changer son style, vous devez d'abord -webkit-apparence est défini sur aucun
<style>
.my_progress{
-webkit-appearance:none;
}
.my-progress::-webkit-progress-bar{
//样式
}
</style>
<progress class="my_progress" value="10" max="100"></progress>Peu de navigateurs prennent en charge l'affichage
<meter min="0" max="100" low="40" hign="90" optimun="100" value="91"></meter>
Les valeurs maximales et minimales : max, min
Les valeurs maximales et minimales que l'écran peut atteindre : haute, basse
La meilleure valeur de la plage de mesure de l'écran : optimale
La valeur actuelle affichée par l'affichage : valeur
Compatible Firefox
Cliquez sur un contenu pour agrandir le panneau, compatible avec Firefox et Google
Tableau de relations Common Link
alternate 文档的可选版本（例如打印页、翻译页或镜像） stylesheet 文档的外部样式表 start 集合中的第一个文档 next 集合中的下一个文档 prev 集合中的前一个文档 contents 文档目录 index 文档索引 glossary 文档中所用字词的术语表或解释 copyright 包含版权信息的文档 chapter 文档的章 section 文档的节 subsection 文档的子段 appendix 文档附录 help 帮助文档 bookmark 相关文档 nofollow 用于指定 Google 搜索引擎不要跟踪链接 licence 一般用于文献，表示许可证的含义 tag 标签集合 friend 友情链接 案例 <link rel="prev" href="#"> <link rel="next" href="#"> <a rel="prev" href="#">上一页</a> <a rel="next" href="#">下一页</a> <link rel="stylesheet" href="style.css"> <link rel="alternate" type="application/rss+xml" href="http://myblog.com/feed"> <link rel="shortcut icon" href="favicon.ico"> <link rel="pingback" href="http://myblog.com/xmlrpc.php"> <link rel="prefetch" href="http://myblog.com/main.php"> <a rel="archives" href="http://myblog.com/archives">old posts</a> <a rel="external" href="http://notmysite.com">tutorial</a> <a rel="license" href="http://www.apache.org/licenses/LICENSE-2.0">license</a> <a rel="nofollow" href="http://notmysite.com/sample">wannabe</a> <a rel="tag" href="http://myblog.com/category/games">games posts</a>
Trucs avancés, actuellement uniquement pris en charge par Google
vise à faciliter l'exploration des données sur les pages Web
<p itemscope itemtype="http://example.com/hello"> <p>我叫 <span itemprop="主人">汪磊</span>。 </p> <p>我养了一条叫 <span itemprop="狗名">旺财</span>的 <span itemprop="品种">金毛</span>犬。 </p> </p> 比如抓取出： 主人：汪磊 狗名：旺财 品种：金毛
####Accessible Rich Internet Application (无障碍富互联网应用程序) 主要针对于屏幕阅读设备(e.g. NVDA)，更快更好地理解网页 不仅仅是为了盲人用户，更多语义化 1.数据注解，类似lable，只不过label是针对表格 2.可以通过aria知道数据的强相关 aria由一套属性组成，属性分为role以及对应的states和properties， aria将html元素分为六种role，每种有对应的states和properties， 但有一些是共用的，比如 aria-atomic aria-busy(state) aria-describedby aria-disabled(state) aria-dropeffect aria-flowto aria-haspopup aria-hidden(state) aria-invalid(state) aria-label aria-labelledby aria-owns aria-relevant 举个伪元素例子， <p role="radio" aria-checked="true" aria-label="单选2" tabindex="0">单选tabindex="0"</p> 这个p模拟了radio的功能，在平时读屏软件是分辨不出来的， 但是加上role及aria-checked状态， 在读屏软件（NVDA）中读出来就是： 单选2 单选按钮 选中 第1页 共1项
Pour les attributs détaillés, voir : ARIA Tenpay Design Center.html
通过DOM存储与DOM对象强相关的数据 1.可以给html里的所有dom对象都可以添加一些data-xxx的属性 2.用来记录与当前DOM强相关的数据 <ul id="users"> <li data-id="1" data-age="18" data-gender="true">张三</li> <li data-id="2" data-age="18" data-gender="false">李四</li> <li data-id="3" data-age="18" data-gender="true">王二</li> </ul>
Cas 1 :
<script>
//键是ID 值是信息
var data = {
01:{
name:"伟哥哥"，
age:"18"
},
02:{
name:"伟哥哥"，
age:"19"
},
03:{
name:"伟哥哥"，
age:"20"
}
//jQuery操作一定要做变量本地化
var list = document.getElementById("list");
for(var id in data){
var item = data[id];
var liElement = document.createElement("li");
//liElement.innerHTML = item.name;
liElement.appendChild(document.createTextNode(item.name));
liElement.setAttribute("data-age",item.age);
liElement.setAttribute("data-id",item.id);
list.appendChild(liElement);//变量本地化
//此处才将元素加到界面上
liElement.addEventListener("click",function(){
//alert(this.name);
//this 是当前点击的元素
//alert(this.getAttribute("data-age"));
console.log(this.dataset["age"]);
})
}
};
</script>Cas deux :
<body> <ul id="users"> <li class="item" data-id="1" data-age="18" data-gender="true"> 张三 <pre class="brush:php;toolbar:false">
Cas trois :
<body>
<p class="tabs">
<ul>
<li data-target=".panel-new">新闻</li>
<li data-target=".panel-bagua">八卦</li>
<li data-target=".panel-sport">体育</li>
</ul>
<p class="panel-new"></p>
<p class="panel-bagua"></p>
<p class="panel-sport"></p>
</p>
<script>
$(function(){
//写这个是为了有一个单独作用于，避免污染
//api是应用程序编程接口
var $lis = $('.tabs>ul>li');
$lis.on("click",function(){
//获取目标对象的选择器
var targetSelector = $(this).data('target');
var $target = $(targetSelector);
});
});
</script>
</body> <form action="#">
//repuired表示必须的，表示填写框不能为空，会有提示但是提示不能更改
<label>text:<input type="text" required></label></br>
//只能判断中间是否有@
<label>email:<input type="email" value="ice@wedn.net"></label><br>
<label>date:<input type="date" min="2014-10-14" max="2020-10-14" value="2016-08-14"></label><br>
//拖动条，可以获得拉到的地方的数字
<label>range:<input type="range" min="0" max="50" value="10"></label> <br>
<label>search:<input type="search" results="10" placeholder="搜点啥？"></label><br>
<label>tel:<input type="tel" placeholder="(010) 888-888" pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$"></label><br>
<label>color:<input type="color" placeholder="e.g. #bbbbbb"></label><br>
<label>number:<input type="number" step="1" min="-5" max="10" value="0"></label><br>
<input type="submit" value="提交">
</form>手机键盘会根据不同的type类型弹出不同键盘类型 如打开数字键盘，密码键盘，邮件键盘 <input type="text" name="txt_text" id="txt_text"> <input type="number" name="txt_number" id="txt_number"> <input type="email" name="txt_email" id="txt_email"> <input type="tel" name="txt_tel" id="txt_tel"> <input type="url" name="txt_url" id="txt_url">
多媒体的dom对象有一些新的方法可以去做播放暂停
默认界面：
<audio src="music.mp3" controls="controls"></audio>
自定义一个：
<audio id="audio" src="music.mp3"></audio>
<button id="btn">播放</button>
<button id="btn_pause">暂停</button>
<script>
var btn = document.getElementById("btn");
var btn_pause = document.getElementById("btn_pause");
var audio = document.getElementById("audio");
btn.addEventListener("click",function(){
//播放音频
audio.play();
});
btn_pause.addEventListener("click",function(){
// 暂停音频
audio.pause();
});
</script><audio controls="controls"> <source src="img/music.mp3" type="audio/mpeg"/> </audio>
<video src="fun.mp4" controls="controls"></video>
<video controls="controls" poster="top.png" autoplay="autoplay"> 不同浏览器支持格式不一样,因为版权问题 <source src="fun.ogg" type="video/ogg"></source> <source src="fun.mp4" type="video/mp4"></source> 当浏览器不兼容video标签，就会将他以p方式解析 用第三方组件代替 <object type="application/x-shockwave-flash" data="http://static.youku.com/v1.0.0557/v/swf/loader.swf" width="100%" height="100%" id="movie_player"> <param name="allowFullScreen" value="true"> <param name="allowscriptaccess" value="always"> <param name="allowFullScreenInteractive" value="true"> <param name="flashvars" value="VideoIDS=XMTMwNDAzNzM4NA==&ShowId=0&category=85&Cp=0&ev=1&Light=on&THX=off&unCookie=0&frame=0&pvid=1439005764768c9QpaT&uepflag=1&Tid=0&isAutoPlay=true&Version=/v1.0.1080&show_ce=0&winType=interior&Type=Folder&Fid=25977506&Pt=0&Ob=1&plchid=z&openScanCode=1&scanCodeText="限时" 扫码免广告&embedid=AjMyNjAwOTM0NgJ3d3cueW91a3UuY29tAi8=&vext=bc%3D%26pid%3D1439005764768c9QpaT%26unCookie%3D0%26frame%3D0%26type%3D1%26fob%3D1%26fpo%3D0%26svt%3D0%26emb%3DAjMyNjAwOTM0NgJ3d3cueW91a3UuY29tAi8%3D%26dn%3D%E7%BD%91%E9%A1%B5%26hwc%3D1%26mtype%3Doth&pageStartTime=1439005764766"> <param name="movie" value="http://static.youku.com/v1.0.0557/v/swf/loader.swf"> <p class="player_html5"> <p class="picture" style="height:100%"> <p style="line-height:460px;"><span style="font-size:18px">您还没有安装flash播放器,请点击<a href="http://www.adobe.com/go/getflash" target="_blank">这里</a>安装</span></p> </p> </p> </object> </video>
属性 值 描述 autoplay autoplay 如果出现该属性，则视频在就绪后马上播放 controls controls 如果出现该属性，则向用户显示控件，比如播放按钮 height pixels 设置视频播放器的高度 loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放 muted muted 规定视频的音频输出应该被静音。【即：静音】 poster URL 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像 preload preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放 如果使用"autoplay"，则忽略该属性 src url 要播放的视频的URL width pixels 设置视频播放器的宽度
字幕案例：
<video id="clip" controls>
<source src="fun.mp4" type="video/mp4" />
<track label="English subtitles" kind="subtitles"
srclang="en" src="video-subtitles-en.vtt" default />
</video>
字幕文件内容示例：
WEBVIT FILE
1
00:00:00.000 --> 00:00:12.000 D:vertical A:start
2
00:00:12.000 --> 00:00:15.300
大家好，我是伟哥哥可以借助三个标签载入：
<iframe src="demo.svg" frameborder="0"></iframe> //推荐
<object data="demo.svg" type=""></object>
<embed src="demo.svg" type="">
学完ajax之后推荐方式：
学习完异步请求之后，我们可以遍历所有SVG节点，把src引入进来，本身他是一个document对象，可以把它直接append到文档中。
window.addEventListener('load',function(){
var svgs = document.getElementByTagName('svg');
for (var i = 0;i < svgs.length; i++){
//console.log(svg[i].dataset);
var src = $(svgs[i].data('src'));
//向服务器发送请求 得到svg
$.get(src,function(data){
var el = data.documentElement;
$(document.body).append($(el));
});
}
});
同时将svg文件里面的style删除，以便我们进行更改样式1. Installation du plug-in du serveur Sublime
Ne pas faire. arrêtez serber après l'installation, faites-le simplement lorsqu'il n'est pas utiliséQuittersublime, sinon sublime plantera
2. Développez les paramètres dans le coin supérieur droit des outils de développement de Google Chrome, sélectionnez afficher useragent shadow DOM et vous pouvez voir le DOM virtuel
3.Pseudo classeObject
équivaut à en insérer un après weigege, et son style peut être modifié
<style>
.content::after{
content: 'zuishuai';
color: #465;
}
</style>
<p class="content">weigege</p>4.h5 new tag
h5 new Parce que la balise est trop récente, elle peut ne pas être reconnue par les navigateurs de bas niveau. Le navigateur reconnaîtra automatiquement la balise non reconnue comme p et la chargera
. peut être généré des manières suivantes. Méthode 1 : Définissez-le vous-même
Méthode 2 : Introduisez le composant tiers html5shiv.js
qui crée toutes les nouvelles balises h5 via la méthode 1
5. Saisissez une fois le code suivant dans la console Google
1.
document .body (Enter)
document.body.contentEditable = true (Enter)
Ensuite, vous pouvez modifier le texte directement sur la page
2.
Saisissez
les données directement à la connexion : text/html, (Entrée)
Vous pouvez modifier le texte directement sur la page
6. bibliothèque du player : jwplayer
7. Zepto, un composant spécialement utilisé pour les terminaux mobiles ?
L'API implémentée est fondamentalement la même que jQuery
Le code compatible avec le traitement redondant a été supprimé
Il semble qu'il puisse remplacer jQuery
8.! important ne peut pas prendre en charge les styles en ligne dans les anciennes versions
9.Markdown
Les fichiers de description de projet open source sont tous écrits de cette manière
Lien de syntaxe : http://wowubuntu.com/markdown/
Syntaxe pour décrire du texte riche avec du texte normal
Extension md, markdown
Case
h tag
Écrivez le paragraphe directement sans rien ajouter devant
Liste non ordonnée
Il y a un espace devant
Liste ordonnée
Les chiffres devant sont tous des listes ordonnées, pensez à ajouter des espaces
<br/>
Spécifiqueéditeurpeut ajouter du javascript pour représenter une syntaxe spécifique pour l'écriture de code
10.iframe
équivaut à creuser une fosse pour charger d'autres pages
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Qu'est-ce qu'un concepteur d'interface utilisateur ?
Pourquoi ne puis-je pas accéder au navigateur Ethereum ?
Comment résoudre les problèmes lors de l'analyse des packages
Le rôle de la fonction de validation
Liste de prix du niveau Douyin 1-75
utilisation de la fonction createmutex
Raisons pour lesquelles le ping échoue
Qu'est-ce qu'un hôte
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
