未分类 · 2023年3月24日 0

HTML5语义元素【】

HTML5 语义元素


语义= 意义

语义元素 = 有意义的元素


什么是语义元素?

一个语义元素能够清楚的描述其意义给浏览器和开发者。

无语义 元素实例:

- 无需考虑内容.
语义元素实例:

,

, and - 清楚的定义了它的内容.


浏览器支持

Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 支持语义元素。

注意: Internet Explorer 8 及更早版本不支持该元素。 但是文章底部提供了兼容的解决方法.


HTML5中新的语义元素

许多现有网站都包含以下HTML代码:

');
var statusdiv=$('#comment-status');

commentform.submit(function(e){
e.preventDefault();
var noteContent = editor.getValue();
// console.log(noteContent);
noteContent = noteContent.replace(/

/g,"
");
        noteContent = noteContent.replace(//g,"

");

// 系列化表单数据
var comment_parent = 0;
var is_user_logged_in = $("#is_user_logged_in").val();
var comment_post_ID = 379;
var _wp_unfiltered_html_comment = $("#_wp_unfiltered_html_comment").val();
var comment = noteContent;
var author = $("#author").val();
var url = $("#url").val();
var email = $("#email").val();
if(isBlank(author) && is_user_logged_in==0) {
statusdiv.html('

请输入昵称!

').show();
} else if(isBlank(email) && is_user_logged_in==0) {
statusdiv.html('

请输入邮箱!

').show();
} else {
// var formdata=commentform.serialize() + "&comment=" + noteContent ;
// 添加状态信息
statusdiv.html('

Processing...

').show();
// 获取表单提交地址
var formurl=commentform.attr('action');

// 异步提交
$.ajax({
type: 'post',
url: formurl,
dataType:'json',
data: {"comment_parent":comment_parent,"comment_post_ID":comment_post_ID, "_wp_unfiltered_html_comment":_wp_unfiltered_html_comment,"comment":comment,"url":url, "email":email,"author":author},
error: function(XMLHttpRequest, textStatus, errorThrown){
statusdiv.html('

数据不完整或表单提交太快了!

').show();
},
success: function(data, textStatus){
if(data.errorno=="0") {
$("#submit").prop('disabled', true);
statusdiv.html('

笔记已提交审核,感谢分享笔记!

').show();
alert('笔记已提交审核,感谢分享笔记!');
}else{
statusdiv.html('

'+data.msg+'

').show();
}
commentform.find('textarea[name=comment]').val('');
}
});
setTimeout(function(){
$("#submit").prop('disabled', false);
}, 10*1000);
}
return false;

});
$(".comt-author").click(function() {
href = $(this).children("a").attr("href");
if(href.indexOf("/note/")!=-1) {
var win = window.open(href, '_blank');
win.focus();
}
});
$(".comt-meta span").hover(function(){
$(this).children(".tooltip").css({ "opacity": 1, "pointer-events": "auto"});
},function(){
$(this).children(".tooltip").removeAttr("style");
});
/*
$(".wrapper i").hover(function(){
$(this).siblings(".tooltip").css({ "opacity": 1, "pointer-events": "auto"});
},function(){
$(this).siblings(".tooltip").css({ "opacity": 0, "pointer-events": "auto"});
});
*/
//Upvote.create('runoobvote-id', {callback: vote_callback});
var ajaxurl = 'https://www.runoob.com/wp-admin/admin-ajax.php';
var callback = function(data) {
//console.log($('#runoobvote-id').upvote('upvoted'));
//console.log($('#runoobvote-id').upvote('downvoted'));
//console.log(data);
_vote_action = data.action;
id_arr = data.id.split('-');
um_id= id_arr[2];
//console.log(um_id);

var re = /^[1-9]+/;
if (re.test(um_id)) {
var ajax_data = {
_vote_action: _vote_action,
action: "pinglun_zan",
um_id: um_id,
um_action: "ding"
};
//console.log(ajax_data);
$.post(ajaxurl,ajax_data,function(status){
//if(status.vote_num>999) {
// _voteHtml = ''+kFormatter(status.vote_num) +'';
// $("#runoobvote-id-" + um_id + " .count").hide().after(_voteHtml);
//}

});
}
};
if($('#comments').length && $('.upvotejs').length){
$('.upvotejs').upvote({id: 379, callback: callback});

$.post(ajaxurl,{"action":"pinglun_zan","postid":379},function(data){
$(data).each(function(key,value) {
$("#runoobvote-id-" + value.commid + " .upvote").addClass(value.upvotejs_class);
$("#runoobvote-id-" + value.commid + " .downvote").addClass(value.downvote_class);
$("#runoobvote-id-" + value.commid + " .count").text(value.upvote_count);
})
},'json');

}

});
function isBlank(str) {
return (!str || /^s*$/.test(str));
}
function kFormatter(num) {
// return num;
return Math.abs(num) > 999 ? Math.sign(num)*((Math.abs(num)/1000).toFixed(1)) + 'k' : Math.sign(num)*Math.abs(num)
}










打赏 赞(0) 分享'
分享到...
微信
支付宝
微信二维码图片

微信扫描二维码打赏

支付宝二维码图片

支付宝扫描二维码打赏

文章目录