HTML
查看在线实例
- 定义了HTML文档的标题</a><br>
使用 <title> 标签定义HTML文档的标题</p>
<p><a target="_blank" href="/try/try.php?filename=tryhtml_base" rel="noopener noreferrer"><base> - 定义了所有链接的URL</a><br>
使用 <base> 定义页面中所有链接默认的链接目标地址。</p>
<p><a target="_blank" href="/try/try.php?filename=tryhtml_meta" rel="noopener noreferrer"><meta> -
提供了HTML文档的meta标记</a><br>
使用 <meta> 元素来描述HTML文档的描述，关键词，作者，字符集等。</p>
<hr><h2>HTML <head> 元素</h2>
<p><head> 元素包含了所有的头部标签元素。在
<head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。</p>
<p>可以添加在头部区域的元素标签为: <title>, <style>,
<meta>, <link>,
<script>, <noscript> 和 <base>。</p>
<hr><h2> HTML <title> 元素</h2>
<p> <title> 标签定义了不同文档的标题。</p>
<p> <title> 在 HTML/XHTML 文档中是必需的。</p>
<p> <title> 元素:</p>
<ul>
<li>定义了浏览器工具栏的标题</li>
<li>当网页添加到收藏夹时，显示在收藏夹中的标题</li>
<li>显示在搜索引擎结果页面的标题</li>
</ul>
<p>一个简单的 HTML 文档:</p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-brackets"><</span><span class="hl-code">!</span><span class="hl-var">DOCTYPE</span><span class="hl-code"> </span><span class="hl-var">html</span><span class="hl-brackets">></span><span class="hl-code">
</span><span class="hl-brackets"><</span><span class="hl-reserved">html</span><span class="hl-brackets">></span><span class="hl-code">
</span><span class="hl-brackets"><</span><span class="hl-reserved">head</span><span class="hl-brackets">></span><span class="hl-code">
</span><span class="hl-brackets"><</span><span class="hl-reserved">meta</span><span class="hl-code"> </span><span class="hl-var">charset</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">utf-8</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">
</span><span class="hl-brackets"><</span><span class="hl-reserved">title</span><span class="hl-brackets">></span><span class="hl-code">文档标题</span><span class="hl-brackets"></</span><span class="hl-reserved">title</span><span class="hl-brackets">></span><span class="hl-code">
</span><span class="hl-brackets"></</span><span class="hl-reserved">head</span><span class="hl-brackets">></span><span class="hl-code">
</span><span class="hl-brackets"><</span><span class="hl-reserved">body</span><span class="hl-brackets">></span><span class="hl-code">
文档内容......
</span><span class="hl-brackets"></</span><span class="hl-reserved">body</span><span class="hl-brackets">></span><span class="hl-code">
</span><span class="hl-brackets"></</span><span class="hl-reserved">html</span><span class="hl-brackets">></span></div>
</div>
</div>
<br>
<hr><h2>HTML <base> 元素</h2>
<p><base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:</p>
<div class="example"><h2 class="example">实例</h2> <div class="example_code"><div class="hl-main"><span class="hl-brackets"><</span><span class="hl-reserved">head</span><span class="hl-brackets">></span><span class="hl-code">
</span><span class="hl-brackets"><</span><span class="hl-reserved">base</span><span class="hl-code"> </span><span class="hl-var">href</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">http://www.runoob.com/images/</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">target</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">_blank</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">
</span><span class="hl-brackets"></</span><span class="hl-reserved">head</span><span class="hl-brackets">></span></div></div></div>
<hr><h2> HTML <link> 元素</h2>
<p> <link> 标签定义了文档与外部资源之间的关系。</p>
<p> <link> 标签通常用于链接到样式表:</p>
<div class="example"><h2 class="example">实例</h2> <div class="example_code"><div class="hl-main"><span class="hl-brackets"><</span><span class="hl-reserved">head</span><span class="hl-brackets">></span><span class="hl-code">
</span><span class="hl-brackets"><</span><span class="hl-reserved">link</span><span class="hl-code"> </span><span class="hl-var">rel</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">stylesheet</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">type</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">text/css</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">href</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">mystyle.css</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">
</span><span class="hl-brackets"></</span><span class="hl-reserved">head</span><span class="hl-brackets">></span></div></div></div>
<br>
<hr><h2>HTML <style> 元素</h2>
<p><style> 标签定义了HTML文档的样式文件引用地址.</p>
<p>在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:</p>
<div class="example"><h2 class="example">实例</h2> <div class="example_code"><div class="hl-main"><span class="hl-brackets"><</span><span class="hl-reserved">head</span><span class="hl-brackets">></span><span class="hl-code">
</span><span class="hl-brackets"><</span><span class="hl-reserved">style</span><span class="hl-code"> </span><span class="hl-var">type</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">text/css</span><span class="hl-quotes">"</span><span class="hl-brackets">></span><span class="hl-code">
body {
background-color:yellow;
}
p {
color:blue
}
</span><span class="hl-brackets"></</span><span class="hl-reserved">style</span><span class="hl-brackets">></span><span class="hl-code">
</span><span class="hl-brackets"></</span><span class="hl-reserved">head</span><span class="hl-brackets">></span></div></div></div>
<br>
<hr><h2>HTML <meta> 元素</h2>
<p>meta标签描述了一些基本的元数据。</p>
<p><meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。</p>
<p>META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。</p>
<p>元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。</p>
<p><meta> 一般放置于 <head> 区域</p>
<h2><meta> 标签- 使用实例</h2>
<p>为搜索引擎定义关键词:</p>
<pre>
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
</pre>
<p>为网页定义描述内容:</p>
<pre>
<meta name="description" content="免费 Web & 编程 教程">
</pre>
<p>定义网页作者:</p>
<pre>
<meta name="author" content="Runoob">
</pre>
<p>每30秒钟刷新当前页面:</p>
<pre><meta http-equiv="refresh" content="30">
</pre>
<br>
<hr><h2>HTML <script> 元素</h2>
<p><script>标签用于加载脚本文件，如： JavaScript。</p>
<p><script> 元素在以后的章节中会详细描述。</p>
<hr><h2>HTML head 元素</h2>
<table class="reference">
<tbody><tr>
<th width="20%" align="left">标签</th>
<th width="80%" align="left">描述</th>
</tr>
<tr>
<td><a target="_blank" href="/tags/tag-head.html" rel="noopener noreferrer"><head></a></td>
<td>定义了文档的信息</td>
</tr>
<tr>
<td><a target="_blank" href="/tags/tag-title.html" rel="noopener noreferrer"><title></a></td>
<td>定义了文档的标题</td>
</tr>
<tr>
<td><a target="_blank" href="/tags/tag-base.html" rel="noopener noreferrer"><base></a></td>
<td>定义了页面链接标签的默认链接地址</td>
</tr>
<tr>
<td><a target="_blank" href="/tags/tag-link.html" rel="noopener noreferrer"><link></a></td>
<td>定义了一个文档和外部资源之间的关系</td>
</tr>
<tr>
<td><a target="_blank" href="/tags/tag-meta.html" rel="noopener noreferrer"><meta></a></td>
<td>定义了HTML文档中的元数据</td>
</tr>
<tr>
<td><a target="_blank" href="/tags/tag-script.html" rel="noopener noreferrer"><script></a></td>
<td>定义了客户端的脚本文件</td>
</tr>
<tr>
<td><a target="_blank" href="/tags/tag-style.html" rel="noopener noreferrer"><style></a></td>
<td>定义了HTML文档的样式文件</td>
</tr>
</tbody></table> <!-- 其他扩展 -->
</div>
</div>
</div>
<div class="cate_right">
<script src="https://www.520ads.com/Public/js/getGoods.js?site_id=9&size=300*300&sign=6f4922f45568161a8cdf4ad2299f6d23"></script>
</div>
</div>
</div>
<div class="clear"></div>
<input type="hidden" id="uid" value="">
<div class="links w">
<h2 class="h_title"><span><a href="/" target="_blank">[ 申请 ]</a></span>友情链接：</h2>
<div class="links_text">
<a href="https://jjj-com.com" target="_blank">传奇私服</a>
<a href="https://www.xn--6kr41swoa.tw" target="_blank">南島屋</a>
<a href="https://www.my103.com/ml/" target="_blank">My命理学</a>
<a href="https://www.kuailian-app.com.cn" target="_blank">快连vpn</a>
<a href="https://www.kuailian-go.com.cn" target="_blank">快连vpn</a>
<a href="https://didi.seowhy.com" target="_blank">搜外友链</a>
<a href="https://www.biquge.mobi" target="_blank">笔趣阁</a>
<a href="https://aisi-zhushou.com" target="_blank">爱思助手</a>
<a href="https://clashx.cc" target="_blank">ClashX教程</a>
<a href="https://www.huihuabaobao.com" target="_blank">绘画宝宝</a>
<a href="https://www.peiyinbaobao.com" target="_blank">配音宝宝</a>
</div>
</div>
<footer>
<div class="box">
<ul class="footer_nav">
<li><a href="" target="_blank">关于我们</a></li>
<li><a href="" target="_blank">服务条款</a></li>
<li><a href="" target="_blank">广告服务</a></li>
<li><a href="" target="_blank">联系我们</a></li>
<li><a href="" target="_blank">网站地图</a></li>
<li><a href="" target="_blank">免责声明</a></li>
<li><a href="" target="_blank">WAP</a></li>
</ul>
<p class="copyright">技术支持：
<a href="/">武汉快勤科技有限公司</a>
<a href="/">XML网站地图</a>
备案号：<a href="http://www.beian.miit.gov.cn/" target="_blank">鄂ICP备18027844号-9</a>
<script type="text/javascript" src="//js.users.51.la/21769969.js"></script>
</p>
</div>
</footer>
<div class="modal"></div>
<div class="login_box">
<div class="login_title">
立即登录/注册
<img src="/Public/images/close.png" class="login_close"/>
</div>
<div class="login_content" id="login_scan">
<img src="/Public/images/ewm.png" class="ewm" id="ewm">
<p>微信扫码登录</p>
</div>
</div>
<input type="hidden" id="wx_code" value="">
<div class="gotop"></div>
<div class="ajax" id="ajax"></div>
</body>
</html>
<script>
function tips(text,reload=0){
$("#ajax").text(text).fadeIn();
setTimeout(function(){
$("#ajax").fadeOut();
if(reload){
location.reload();
}
},2000);
}
function get_ewm(){
$.ajax({
url: '/home/login/get_wx_code.html',
type: 'post',
dataType:'json',
success: function (res) {
if(res.ret==1){
$("#wx_code").val(res.wx_code);
ewm_login();
$.ajax({
url: 'https://www.qingketang.net/mobile/login_ewm.html',
type: 'post',
data:"code="+$("#wx_code").val(),
dataType:'json',
success: function (data) {
$("#ewm").attr('src',data.ewm);
}
});
}else{
window.reload();
}
}
});
}
function ewm_login(){
$(".modal").fadeIn();
$(".login_box").fadeIn();
$("#login_scan").show();
$("#loign_form").hide();
$("#reg_from").hide();
}
function form_login(){
$(".modal").fadeIn();
$(".login_box").fadeIn();
$("#login_scan").hide();
$("#loign_form").show();
$("#reg_from").hide();
}
function form_reg(){
$(".modal").fadeIn();
$(".login_box").fadeIn();
$("#login_scan").hide();
$("#loign_form").hide();
$("#reg_from").show();
}
$(function(){
var win=$(window); //得到窗口对象
var sc=$(document);//得到document文档对象
win.scroll(function() {
if (sc.scrollTop() > 700) {
$(".gotop").fadeIn();
}else {
$(".gotop").fadeOut();
}
});
$(".gotop").click(function(){
$('html,body').animate({
scrollTop: 0
},600);
});
$(".modal").click(function(){
$(".modal").fadeOut();
$(".login_box").fadeOut();
$("#wx_code").val();
});
$(".login_close").click(function(){
$(".modal").fadeOut();
$(".login_box").fadeOut();
$("#wx_code").val('');
});
$(".login_btn").click(function(){
get_ewm();
});
var c=setInterval(function(){
if($("#wx_code").val()!=''){
$.ajax({
url:'/home/login/ewm_login_ajax.html',
type:'post',
data:{"code":$("#wx_code").val()},
dataType:'json',
success:function(data){
if(data.status==1){
$("#wx_code").val('');
$("#ajax").text(data.info).fadeIn();
setTimeout(function(){
$("#ajax").fadeOut();
location.reload();
},1000);
clearInterval(c);
}
},
});
}else{
}
},2000);
});
</script>
<script>
async function copyTextToClipboard(text) {
if (navigator.clipboard) {
try {
await navigator.clipboard.writeText(text);
console.log('Text copied to clipboard');
} catch (err) {
console.error('Failed to copy text: ', err);
// 可以尝试使用 fallback 方案
fallbackCopyToClipboard(text);
}
} else {
// 如果浏览器不支持 navigator.clipboard，则使用 fallback 方案
fallbackCopyToClipboard(text);
}
}
$(function(){
$("pre").each(function(i,e){
console.log($(e).offset().top);
var py=$(e).offset().top+10;
var px=$(e).offset().left+$(e).width()-60;
if($("#uid").val()){
var copybtn='点击复制';
}else{
var copybtn='登录复制';
}
$(e).after("<span style='position:absolute;top:"+py+"px;left:"+px+"px;padding:0 8px;border-radius:3px;z-index:222222;cursor:pointer;background:#333;color:#fff;' class='copybtn'>"+copybtn+"</p>");
});
$(".copybtn").click(function(){
if($("#uid").val()){
var text=$(this).prev('pre').find("code").html();
copyTextToClipboard(text);
$(this).text('已复制');
}else{
get_ewm();
}
});
});
</script>
