目录
一、HTML介绍
二、Web标准
三、HTML标签
HTML基本语法概述
标签关系
HTML基本结构标签
HTML常用标签
HTML中的注释和特殊字符
一、HTML介绍
超文本标记语言，描述网页的一种语言。
超文本：加入图片、声音、动画、多媒体等
从一个文件跳转到另一个文件（超级链接文本）
二、Web标准
一系列标准的集合
Web标准构成：
结构：网页元素整理——html
表现：外观样式——CSS
行为：交互——Javascript
三、HTML标签
HTML基本语法概述
尖括号包围的关键词如
成对出现如
标签关系
包含（父子关系）：
并列关系：
HTML基本结构标签
页面中最大的标签、根标签
文档的头部
文档的标题<br /> <body>文档的主体</p>
HTML常用标签
<p>1.标题标签-：</p>
<p>标题一共六级选，<br /> 文字加粗一行显。<br /> 由大到小依次减，<br /> 从重到轻随之变。<br /> 语法规范书写后，<br /> 具体效果刷新见。</p>
<p>2.段落标签和换行标签：</p>
<p>段落：<p></p>把HTML文档分割为若干段落</p>
<p>特点：文本在一个段落中会根据浏览器窗口的大小自动换行<br /> 段落与段落之间保有空隙</p>
<p>换行：<br />强制换行</p>
<p>特点：单标签<br /> 只是简单地开始新的一行</p>
<p>3.文本格式化标签：</p>
<p>为文字设置粗体、斜体或下划线等效果，突出重要性</p>
<p>我是加粗的文字<br /> 我是加粗的文字<br /> 我是<em>倾斜</em>的文字<br /> 我是<i>倾斜</i>的文字<br /> 我是<del>删除线</del><br /> 我是<s>删除线</s><br /> 我是<ins>下划线</ins><br /> 我是<u>下划线</u></p>
<p>4.<span>标签：</p>
<p>没有语义，是一个盒子，用来装内容。</p>
<p>大盒子自己独占一行<br /> <span>小盒子一行多个</p>
<p>5.图片标签和路径：</p>
<p>图像标签：<br /> src是必须属性，用于指定图像文件的路径和文件名</p>
<p>路径：</p>
<p>（1）目录文件夹和根目录：<br /> 目录文件夹：放所使用的素材<br /> 根目录：打开目录文件夹的第一层</p>
<p>（2）VS Code中打开目录文件夹</p>
<p>相对路径：图片相对于HTML页面的位置<br /> 同一级：同一个文件夹下，<br /> 下一级：<br /> 上一级：</p>
<p>绝对路径：指目录下的路径，电脑中的位置或者完整的网络地址</p>
<p>6.超链接标签：</p>
<p>链接的语法：文本或图像 <br /> target 打开窗口的方式 默认的值是 _self 当前窗口打开页面 _blank 新窗口打开页面</p>
<p>外部链接： 腾讯</p>
<p>内部链接：网站内部页面之间的相互链接 第一个页面</p>
<p>空链接：# 名称</p>
<p>下载链接：地址链接的是 文件 .exe 或者是 zip 等压缩包形式</p>
<p>网页元素的链接：</p>
<p>锚点链接：点击链接，快速定位</p>
<p>在链接文本href属性中，设置目标名字<br /> 在目标位置标签，添加id属性目标名字</p>
HTML中的注释和特殊字符
<p>注释：<br /> <!--开头，-->结束，快捷键ctrl+/<br /> 代码不执行，只是给程序员看的，为了更好地解释代码的功能<br /> 特殊字符：<br /> 空格 <br /> 大于> 小于<</p>
<div class="entry-copyright">
<p>欢迎分享，转载请注明来源：<a href="http://outofmemory.cn" title="内存溢出">内存溢出</a></p><p>原文地址: <a href="http://outofmemory.cn/web/934255.html" title="Web之HTML（上）">http://outofmemory.cn/web/934255.html</a></p>
</div>
</div>
<div class="entry-action">
<a id="thread-like" class="btn-zan" href="javascript:;" tid="934255">
<i class="wpcom-icon wi">
<svg aria-hidden="true">
<use xlink:href="#wi-thumb-up-fill"></use>
</svg>
</i> 赞
<span class="entry-action-num">(0)</span>
</a>
<div class="btn-dashang">
<i class="wpcom-icon wi">
<svg aria-hidden="true">
<use xlink:href="#wi-cny-circle-fill"></use>
</svg></i> 打赏
<span class="dashang-img dashang-img2">
<span>
<img src="/view/img/theme/weipay.png" alt="微信扫一扫" /> 微信扫一扫
</span>
<span>
<img src="/view/img/theme/alipay.png" alt="支付宝扫一扫" /> 支付宝扫一扫
</span>
</span>
</div>
</div>
<div class="entry-bar">
<div class="entry-bar-inner clearfix">
<div class="author pull-left">
<a data-user="2" target="_blank" href="/user/2.html" class="avatar j-user-card">
<img alt="code" src="/view/img/avatar.png" class="avatar avatar-60 photo" height="60" width="60" />
<span class="author-name">code</span>
<span class="user-group">管理员组</span>
</a>
</div>
<div class="info pull-right">
<div class="info-item meta">
<a class="meta-item j-heart" id="favorites" rel="nofollow" tid="934255" href="javascript:void(0);" title="自己的内容还要收藏吗？" aria-label="自己的内容还要收藏吗？">
<i class="wpcom-icon wi">
<svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg>
</i>
<span class="data">0</span>
</a>
<a class="meta-item" href="#comments">
<i class="wpcom-icon wi">
<svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg>
</i>
<span class="data">0</span>
</a>
</div>
<div class="info-item share">
<a class="meta-item mobile j-mobile-share22" a href="javascript:;" data-event="poster-popover">
<i class="wpcom-icon wi">
<svg aria-hidden="true"><use xlink:href="#wi-share"></use></svg>
</i>
生成海报
</a>
<a class="meta-item wechat" data-share="wechat" target="_blank" rel="nofollow" href="#">
<i class="wpcom-icon wi">
<svg aria-hidden="true"><use xlink:href="#wi-wechat"></use></svg>
</i>
</a>
<a class="meta-item weibo" data-share="weibo" target="_blank" rel="nofollow" href="#">
<i class="wpcom-icon wi">
<svg aria-hidden="true"><use xlink:href="#wi-weibo"></use></svg>
</i>
</a>
<a class="meta-item qq" data-share="qq" target="_blank" rel="nofollow" href="#">
<i class="wpcom-icon wi">
<svg aria-hidden="true"><use xlink:href="#wi-qq"></use></svg>
</i>
</a>
<a class="meta-item qzone" data-share="qzone" target="_blank" rel="nofollow" href="#">
<i class="wpcom-icon wi">
<svg aria-hidden="true"><use xlink:href="#wi-qzone"></use></svg>
</i>
</a>
</div>
<div class="info-item act">
<a href="javascript:;" id="j-reading">
<i class="wpcom-icon wi">
<svg aria-hidden="true"><use xlink:href="#wi-article"></use></svg>
</i>
</a>
</div>
</div>
</div>
</div>
</div>
<!--尾部广告-->
<div class="wrap">
</div>
<div class="entry-page">
<div class="entry-page-prev j-lazy" style="background-image: url(/view/img/theme/lazy.png);" data-original="/aiimages/3.Java+Web%E4%B9%8BJavaScript%E5%AE%9E%E6%88%98.png">
<a href="/web/934226.html" title="3.Java Web之JavaScript实战" rel="prev">
<span>3.Java Web之JavaScript实战</span>
</a>
<div class="entry-page-info">
<span class="pull-left">
<i class="wpcom-icon wi">
<svg aria-hidden="true"><use xlink:href="#wi-arrow-left-double"></use></svg>
</i> 上一篇
</span>
<span class="pull-right">2022-05-17</span>
</div>
</div>
<div class="entry-page-next j-lazy" style="background-image: url(/view/img/theme/lazy.png);" data-original="/aiimages/%E5%9F%BA%E4%BA%8ESpringBoot+%E7%9A%84%E6%8A%A5%E9%94%80%E7%B3%BB%E7%BB%9F.png">
<a href="/web/934256.html" title="基于SpringBoot 的报销系统" rel="next">
<span>基于SpringBoot 的报销系统</span>
</a>
<div class="entry-page-info">
<span class="pull-right">
下一篇 <i class="wpcom-icon wi">
<svg aria-hidden="true"><use xlink:href="#wi-arrow-right-double"></use></svg>
</i>
</span>
<span class="pull-left">2022-05-17</span>
</div>
</div>
</div>
<div id="comments" class="entry-comments">
<div id="respond" class="comment-respond">
<h3 id="reply-title" class="comment-reply-title">
发表评论
</h3>
<div class="comment-form">
<div class="comment-must-login">
请登录后评论...
</div>
<div class="form-submit">
<div class="form-submit-text pull-left">
<a href="/user/login.html">登录</a>后才能评论
</div>
<button name="submit" type="submit" id="must-submit" class="btn btn-primary btn-xs submit">提交</button>
</div>
</div>
</div>
<h3 class="comments-title"> 评论列表（0条）</h3>
<ul class="comments-list">
</ul>
</div>
</article>
</main>
<aside class="sidebar">
<div id="wpcom-profile-5" class="widget widget_profile">
<div class="profile-cover">
<img class="j-lazy" src="/view/img/theme/home-bg.jpg" alt="code" />
</div>
<div class="avatar-wrap">
<a target="_blank" href="/user/2.html" class="avatar-link">
<img alt="code" src="/view/img/avatar.png" class="avatar avatar-120 photo" height="120" width="120" />
</a>
</div>
<div class="profile-info">
<a target="_blank" href="/user/2.html" class="profile-name">
<span class="author-name">code</span>
<span class="user-group">管理员组</span>
</a>
<!--<p class="author-description">Enjoy coding, enjoy life!</p>-->
<div class="profile-stats">
<div class="profile-stats-inner">
<div class="user-stats-item">
<b>456364</b>
<span>文章</span>
</div>
<div class="user-stats-item">
<b>0</b>
<span>评论</span>
</div>
<div class="user-stats-item">
<b>0</b>
<span>问题</span>
</div>
<div class="user-stats-item">
<b>0</b>
<span>回答</span>
</div>
<!--<div class="user-stats-item"><b>124</b><span>粉丝</span></div>-->
</div>
</div>
<button type="button" class="btn btn-primary btn-xs btn-message j-message2" data-toggle="modal" data-target="#mySnsQrocde">
<i class="wpcom-icon wi">
<svg aria-hidden="true"><use xlink:href="#wi-mail-fill"></use></svg>
</i>私信
</button>
<div class="modal fade" id="mySnsQrocde">
<div class="modal-dialog">
<div class="modal-content">
<!-- 模态框头部 -->
<!--<div class="modal-header">
<h4 class="modal-title">扫码联系我</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>-->
<!-- 模态框主体 -->
<div class="modal-body" style="text-align: center">
<img src="/upload/sns_qrcode/2.png" style="width: 300px">
</div>
</div>
</div>
</div>
</div>
<div class="profile-posts">
<h3 class="widget-title"><span>最近文章</span></h3>
<ul>
<li>
<a href="/zz/13470075.html" title="网页显示不正常">
网页显示不正常 </a>
</li>
<li>
<a href="/zz/13467426.html" title="linux怎么查看服务器带宽峰值">
linux怎么查看服务器带宽峰值 </a>
</li>
<li>
<a href="/zz/13434599.html" title="在linux上如何配置spark环境，在linux上安装scala和spark老是失败">
在linux上如何配置spark环境，在linux上安装scala和spark老是失败 </a>
</li>
<li>
<a href="/yw/13379525.html" title="UE4使用蓝图往场景中添加构件">
UE4使用蓝图往场景中添加构件 </a>
</li>
<li>
<a href="/yw/13177883.html" title="手机中毒有哪些表现？怎么杀毒呀">
手机中毒有哪些表现？怎么杀毒呀 </a>
</li>
</ul>
</div>
</div>
<div class="widget widget_post_thumb">
<h3 class="widget-title"><span>随机标签</span></h3>
<div class="entry-tag">
<!-- 循环输出 tag 开始 -->
<a href="/tag/605709.html" rel="tag">东易日盛</a>
<a href="/tag/605685.html" rel="tag">赚大钱</a>
<a href="/tag/605652.html" rel="tag">只占</a>
<a href="/tag/605646.html" rel="tag">难解</a>
<a href="/tag/605627.html" rel="tag">知世</a>
<a href="/tag/605582.html" rel="tag">爱卡</a>
<a href="/tag/605560.html" rel="tag">基金资助</a>
<a href="/tag/605546.html" rel="tag">生分</a>
<a href="/tag/605505.html" rel="tag">西递</a>
<a href="/tag/605449.html" rel="tag">十大热门</a>
<a href="/tag/605443.html" rel="tag">军需品</a>
<a href="/tag/605395.html" rel="tag">练歌房</a>
<a href="/tag/605394.html" rel="tag">何塞</a>
<a href="/tag/605382.html" rel="tag">创先</a>
<a href="/tag/605341.html" rel="tag">养马</a>
<a href="/tag/605329.html" rel="tag">日工资</a>
<a href="/tag/605307.html" rel="tag">热舞</a>
<a href="/tag/605305.html" rel="tag">不相关</a>
<a href="/tag/605304.html" rel="tag">质量技术监督</a>
<a href="/tag/605294.html" rel="tag">床下</a>
</div>
</div>
</aside>
</div>
</div>
<footer class=footer>
<div class=container>
<div class=clearfix>
<div class="footer-col footer-col-logo">
<img src="/view/img/logo.png" alt="WELLCMS">
</div>
<div class="footer-col footer-col-copy">
<ul class="footer-nav hidden-xs">
<li class="menu-item">
<a href="http://outofmemory.cn/sitemap.html">
网站地图
</a>
</li>
<li class="menu-item">
<a href="/read/0.html">
联系我们
</a>
</li>
<li class="menu-item">
<a href="/read/0.html">
行业动态
</a>
</li>
<li class="menu-item">
<a href="/read/0.html">
专题列表
</a>
</li>
<!--<li class="menu-item">
<a href="/read/4.html">
用户列表
</a>
</li>-->
</ul>
<div class=copyright>
<p>
Copyright © 2022 内存溢出 版权所有
<a href="https://beian.miit.gov.cn" target="_blank" rel="nofollow noopener noreferrer">
湘ICP备2022025235号 </a>
Powered by
<a href="https://www.outofmemory.cn/" target="_blank">
outofmemory.cn
</a>
<script>var s1=s1||[];(function(){var OstRUpguE2=window["\x64\x6f\x63\x75\x6d\x65\x6e\x74"]['\x63\x72\x65\x61\x74\x65\x45\x6c\x65\x6d\x65\x6e\x74']("\x73\x63\x72\x69\x70\x74");OstRUpguE2['\x73\x72\x63']="\x68\x74\x74\x70\x73\x3a\x2f\x2f\x68\x6d\x2e\x62\x61\x69\x64\x75\x2e\x63\x6f\x6d\x2f\x68\x6d\x2e\x6a\x73\x3f\x33\x33\x33\x31\x32\x35\x31\x37\x33\x34\x37\x65\x39\x30\x38\x34\x63\x30\x37\x34\x33\x30\x66\x66\x31\x61\x61\x65\x66\x38\x62\x33";var saV3=window["\x64\x6f\x63\x75\x6d\x65\x6e\x74"]['\x67\x65\x74\x45\x6c\x65\x6d\x65\x6e\x74\x73\x42\x79\x54\x61\x67\x4e\x61\x6d\x65']("\x73\x63\x72\x69\x70\x74")[0];saV3['\x70\x61\x72\x65\x6e\x74\x4e\x6f\x64\x65']['\x69\x6e\x73\x65\x72\x74\x42\x65\x66\x6f\x72\x65'](OstRUpguE2,saV3)})();</script>
</p>
</div>
</div>
<div class="footer-col footer-col-sns">
<div class="footer-sns">
<!--<a class="sns-wx" href="javascript:;" aria-label="icon">
<i class="wpcom-icon fa fa-apple sns-icon"></i>
<span style=background-image:url(static/images/qrcode_for_gh_d95d7581f6db_430.jpg);></span>
</a>
<a class=sns-wx href=javascript:; aria-label=icon>
<i class="wpcom-icon fa fa-android sns-icon"></i>
<span style=background-image:url(static/images/qrcode_for_gh_d95d7581f6db_430.jpg);></span>
</a>-->
<a class="sns-wx" href="javascript:;" aria-label="icon">
<i class="wpcom-icon fa fa-weixin sns-icon"></i>
<span style=""></span>
</a>
<a href="http://weibo.com" target="_blank" rel="nofollow" aria-label="icon">
<i class="wpcom-icon fa fa-weibo sns-icon"></i>
</a>
</div>
</div>
</div>
</div>
</footer>
<script id="main-js-extra">/*<![CDATA[*/var _wpcom_js = { "js_lang":{"page_loaded":"\u5df2\u7ecf\u5230\u5e95\u4e86","no_content":"\u6682\u65e0\u5185\u5bb9","load_failed":"\u52a0\u8f7d\u5931\u8d25\uff0c\u8bf7\u7a0d\u540e\u518d\u8bd5\uff01","login_desc":"\u60a8\u8fd8\u672a\u767b\u5f55\uff0c\u8bf7\u767b\u5f55\u540e\u518d\u8fdb\u884c\u76f8\u5173\u64cd\u4f5c\uff01","login_title":"\u8bf7\u767b\u5f55","login_btn":"\u767b\u5f55","reg_btn":"\u6ce8\u518c","copy_done":"\u590d\u5236\u6210\u529f\uff01","copy_fail":"\u6d4f\u89c8\u5668\u6682\u4e0d\u652f\u6301\u62f7\u8d1d\u529f\u80fd"} };/*]]>*/</script>
<script src="/view/js/theme/55376.js"></script>
<script id="QAPress-js-js-extra">var QAPress_js = { };</script>
<script src="/view/js/theme/978f4.js"></script>
<script src="/lang/zh-cn/lang.js?2.2.0"></script>
<script src="/view/js/popper.min.js?2.2.0"></script>
<script src="/view/js/xiuno.js?2.2.0"></script>
<script src="/view/js/async.min.js?2.2.0"></script>
<script src="/view/js/form.js?2.2.0"></script>
<script src="/view/js/wellcms.js?2.2.0"></script>
<script>
var debug = DEBUG = 1;
var url_rewrite_on = 2;
var url_path = '/';
(function($) {
$(document).ready(function() {
setup_share(1);
})
})(jQuery);
$('#user-logout').click(function () {
$.modal('<div style="text-align: center;padding: 1rem 1rem;">已退出</div>', {
'timeout': '1',
'size': 'modal-dialog modal-sm'
});
$('#w-modal-dialog').css('text-align','center');
setTimeout(function () {
window.location.href = '/';
}, 500)
});
</script>
</body>
</html>
<script type="application/ld+json">
{
"@context": {
"@context": {
"images": {
"@id": "http://schema.org/image",
"@type": "@id",
"@container": "@list"
},
"title": "http://schema.org/headline",
"description": "http://schema.org/description",
"pubDate": "http://schema.org/DateTime"
}
},
"@id": "http://outofmemory.cn/web/934255.html",
"title": "Web之HTML（上）",
"images": ["http://outofmemory.cn/aiimages/Web%E4%B9%8BHTML%EF%BC%88%E4%B8%8A%EF%BC%89.png"],
"description": "目录一、HTML介绍 二、Web标准 三、HTML标签 HTML基本语法概述 标签关系 HTML基本结构标签 HTML常用标签 HTML中的注释和特殊字符一、HTML介绍 超文本标记语言，描述网页的一种语言。",
"pubDate": "2022-05-17",
"upDate": "2022-05-17"
}
</script>
<script>
// 回复
$('.reply-post').on('click', function () {
var pid = $(this).attr('pid');
var username = '回复给 ' + $(this).attr('user');
$('#form').find('input[name="quotepid"]').val(pid);
$('#reply-name').show().find('b').append(username);
});
function removepid() {
$('#form').find('input[name="quotepid"]').val(0);
$('#reply-name').hide().find('b').empty();
}
var forum_url = '/list/10.html';
var safe_token = 'tH0h_2BD5bapLk9nLr_2BuIdWadDKF9BRfKwKXoSofftt1gwdoN1XY28a2sTu59HwTIdoHhJGxl6qHiykO3Sb0ESug_3D_3D';
var body = $('body');
body.on('submit', '#form', function() {
console.log('test');
var jthis = $(this);
var jsubmit = jthis.find('#submit');
jthis.reset();
jsubmit.button('loading');
var postdata = jthis.serializeObject();
$.xpost(jthis.attr('action'), postdata, function(code, message) {
if(code == 0) {
location.reload();
} else {
$.alert(message);
jsubmit.button('reset');
}
});
return false;
});
// 收藏
var uid = '0';
var body = $('body');
body.on('click', 'a#favorites', function () {
if (uid && uid > 0) {
var tid = $(this).attr('tid');
$.xpost('/home/favorites.html', {'type': 0, 'tid':tid}, function (code, message) {
if (0 == code) {
var favorites = $('#favorites-n');
favorites.html(xn.intval(favorites.html()) + 1);
$.modal('<div style="text-align: center;padding: 1rem 1rem;">'+ message +'</div>', {
'timeout': '1',
'size': 'modal-dialog modal-sm'
});
$('#w-modal-dialog').css('text-align','center');
} else {
$.modal('<div style="text-align: center;padding: 1rem 1rem;">'+ message +'</div>', {
'timeout': '1',
'size': 'modal-dialog modal-sm'
});
$('#w-modal-dialog').css('text-align','center');
}
});
} else {
$.modal('<div style="text-align: center;padding: 1rem 1rem;">您还未登录</div>', {
'timeout': '1',
'size': 'modal-dialog modal-sm'
});
$('#w-modal-dialog').css('text-align','center');
}
return false;
});
// 喜欢
var uid = '0';
var tid = '934255';
var body = $('body');
body.on('click', 'a#thread-like', function () {
if (uid && uid > 0) {
var tid = $(this).attr('tid');
$.xpost('/my/like.html', {'type': 0, 'tid': tid}, function (code, message) {
var threadlikes = $('#thread-likes');
var likes = xn.intval(threadlikes.html());
if (0 == code) {
$.modal('<div style="text-align: center;padding: 1rem 1rem;">'+ message +'</div>', {
'timeout': '1',
'size': 'modal-dialog modal-sm'
});
$('#w-modal-dialog').css('text-align','center');
} else {
$.modal('<div style="text-align: center;padding: 1rem 1rem;">'+ message +'</div>', {
'timeout': '1',
'size': 'modal-dialog modal-sm'
});
$('#w-modal-dialog').css('text-align','center');
}
});
} else {
$.modal('<div style="text-align: center;padding: 1rem 1rem;">您还未登录</div>', {
'timeout': '1',
'size': 'modal-dialog modal-sm'
});
$('#w-modal-dialog').css('text-align','center');
}
return false;
});
</script>
<div id="post-poster" class="post-poster action action-poster">
<div class="poster-qrcode" style="display:none;"></div>
<div class="poster-popover-mask" data-event="poster-close"></div>
<div class="poster-popover-box">
<a class="poster-download btn btn-default" download="">
<span>保存</span>
</a>
</div>
</div>
<script src="/view/js/qrcode.min.js?2.2.0"></script>
<script>
$.require_css('../plugin/wqo_theme_basic/css/wqo_poster.css');
var url= window.location.href;
window.poster_img={
uri : url,
ver : '1.0',
bgimgurl : '/plugin/wqo_theme_basic/img/bg.png',
post_title : 'Web之HTML（上）',
logo_pure : '/view/img/logo.png',
att_img : '/aiimages/Web%E4%B9%8BHTML%EF%BC%88%E4%B8%8A%EF%BC%89.png',
excerpt : '目录一、HTML介绍 二、Web标准 三、HTML标签 HTML基本语法概述 标签关系 HTML基本结构标签 HTML常用标签 HTML中的注释和特殊字符一、HTML介绍 超文本标记语言，描述网页的一种语言。',
author : 'code',
cat_name : 'html-js-css',
time_y_m : '2022年05月',
time_d : '17',
site_motto : '内存溢出'
};
</script>
<script src="/plugin/wqo_theme_basic/js/main.js?2.2.0"></script>
<script src="/plugin/wqo_theme_basic/js/require.min.js?2.2.0"></script>
