HTML
HTML：
一、基本介紹：
1、什麼是HTML？
超文本標記語言：
超文本：比普通文本多了一些功能
標記語言：用來編輯文本的特殊語言，不是開發語言
2、和XML比較：
文本標記語言：XML
1、開始標籤
結束標籤
自結束標籤
<head>
<body>:
文本標籤：
h1:hn n:1-6 文本標題，自帶換行
合併空格：如果有連續多個空格，將合併成一個
P：段落標籤，自帶換行
轉義字符： 空格
< 小於號
> 大於號
& ”and”符號
使用轉義字符實現Unicode編碼的轉義：中 --> 中
<div>:塊元素，本身自帶換行，作用爲了劃分區域
整個網頁元素，基本由div組成（不推薦使用換行<br/>）
<span>：行內元素，span 行內元素：不帶換行，對整體效果不會產生影響
作用：單純用來劃分區域，單獨的區分或修飾，以便於後期使用CSS修飾
通常加id屬性：當前頁面中唯一
圖片：不自帶換行
路徑（推薦相對路徑），寬度，高度（不自帶換行）
要換行，可加div；
<img src=” ” width=” ” height=” ”/>
超鏈接：不自帶換行
<a href=” 鏈接地址 ”>載體</a>
1、鏈接地址：
相對路徑：在應用內部跳轉使用 (比如百度裏跳轉)
絕對路徑：友情鏈接（http://www.baidu.com）不加http，會默認爲相對路徑；
要給hn，p加超鏈接，就在標籤內部加<a><a/>
target：頁面跳轉方式
_self：原頁面跳轉（默認）
_blank：新頁面跳轉
_parent: _top:
span img a ：行內元素（不自帶換行），可以在hn，p中加這些標籤
2、錨點：（本頁面）
頁面頂部默認錨點：#
添加錨點：<a name=”one”>內容<a/>
跳轉錨點：<a href=”#one”>載體<a/> 點擊載體可跳轉至內容那裏
demo06.html#name可以跳到其他網頁的錨點
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
<b><b/>:加粗
<br>:換行
<em><em/>：強調（傾斜）
<strong>:強調（加粗）
<pre>:會按照你寫的格式換行
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
列表：
有序列表：<ol type=”a” start=”1”></ol>
type表示類型，默認爲數字，可以是A，a，1,；start必須是數字
無序列表：<ul type=”circle”></ul>
disc:爲默認的實心圓；
square:正方形
circle:空心圓
列表間可互相嵌套
用處：導航、目錄
<frameset rows=”10%,50%,40%”> 分爲上中下三塊
<frame src=” ”></frame>
<frameset cols=” 30%,70%”> 百分數表示所佔比例
<frame src=” ”></frame>
<frame src=” ”></frame> 第二塊分爲左右兩部分
</frameset>
<frame src=” ”></frame>
</frameset>
配合超鏈接<a>使用，在第二塊中點擊超鏈接在第一塊顯示，則在第一塊里加一個name=”XXX”；
在第二塊超鏈接中加target=”XXX”
表格：（後臺管理）<table border=”1” align=”表格在頁面的位置”>
<tr>代表行 <td>代表列
border 屬性規定規定圍繞表格的邊框的寬度；
width，height：整個的寬和高
colspan：佔幾列； rowspan：佔幾行
cellpadding：表格內部內容和邊框的距離
cellspacing：相鄰內邊框間的距離，如果爲0，則只看到一條邊框
<table border=”1” align=”表格在頁面的位置”>
<caption></caption>表格的標題，表的頂部
<thead>
<th></th>
</thead> 表頭（居中）
<tbody align=”數據在表格中的位置”>
<tr>
<td></td>
</tr>
</tbody>
<tfoot>
<th></th>
</tfoot> 表尾（居中）
</table>
不會因爲書寫位置而改變佈局，會默認表頭在最前面，表尾在最後。
表單：formform action method=”post get”
A.Post方式提交性能高於get方式提交true
B.Post方式提交數據，表單數據大小沒限制，get有限制（1024個字節）true
C.Post方式提交數據，數據會在地址欄顯示，get方式提交不會在地址欄顯示 false
D.Post方式提交數據，數據不會在地址欄顯示，get方式提交會在地址欄顯示 true
Input type=”test password reset button submit radio file checkbox”
name=”” 服務器接收表單信息時使用
value=“” 服務器接收的表單值
輸入框提示placeholder
輸入框字符個數限制 maxlength
radio設置默認值checked
Checkbox 設置默認值 checked
Label
<input type="checkbox" name="like" value="study" id="study">
<label for="study">學編程</label>
Label用來綁定“學編程”和“checkbox”
Select - name, option - value
選項全部顯示size 多選multiple 設置默認選項selected
多選框
下拉列表 select -- option
Input裏的其他屬性 hidden
隱藏區域：內容不顯示
作用：向服務器發送隱藏信息
<input type="hidden" name="id" value="12">
看不到，但發送時仍會發送“id=12”
</div>
<div class="ads-article-bottom-match">
<ins class="adsbygoogle"
style="display:block;"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-2073744953016040"
data-ad-slot="3534050590"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<ul class="tag-list">
<li>
<a href="/t/5b79ca9b2b7177392c962542" target="_blank" class="label-link">HTML</a>
</li>
<li>
<a href="/t/5b7a9e122b7177392c96741d" target="_blank" class="label-link"></a>
</li>
</ul>
<div id='comment-form-wrapper'>
<div class='section-head'>發表評論</div>
<form id="comment-form" class='comment-form' action="/account/register" method="post">
<input type="hidden" name="_xsrf" value="2|d089d90e|10271a514492e613abd206ec860b824e|1716463342"/>
<input name="post_id" value="5c70051fbd9eee7f92ec77b0" class='hidden'/>
<textarea autocomplete="off" rows='2' cols='50' placeholder="登錄以後才評論..." disabled></textarea>
<a class='login' href="#">登录</a>
</form>
</div>
<div id='article-comments'>
<div class='section-head'>所有評論</div>
<div id="comment-list">
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
</div>
</div>
<div class="related-post-list">
<div class="section-head">相關文章</div>
<div class="related-posts">
<div class="list-item">
<h4 class="list-item-title">
<a href="/a/5c722c7dbd9eee2547fb44c7" target="_blank" title="《空門》">
《空門》
</a>
</h4>
<div class="post-meta">
<img src="/static/svgs/user.svg" />
<a href="/u/5ba2d34d2b71771a4da9e9f0">王清甫</a>
<img src="/static/svgs/clock.svg" />
<span>2019-02-24 13:32:45</span>
</div>
</div>
<div class="list-item">
<h4 class="list-item-title">
<a href="/a/5c722c7dbd9eee25c17eca83" target="_blank" title="《霧》">
《霧》
</a>
</h4>
<div class="post-meta">
<img src="/static/svgs/user.svg" />
<a href="/u/5ba2d34d2b71771a4da9e9f0">王清甫</a>
<img src="/static/svgs/clock.svg" />
<span>2019-02-24 13:32:45</span>
</div>
</div>
<div class="list-item">
<h4 class="list-item-title">
<a href="/a/5c70e103bd9eee68440f5031" target="_blank" title="grep，sed，awk">
grep，sed，awk
</a>
</h4>
<div class="post-meta">
<img src="/static/svgs/user.svg" />
<a href="/u/5c70e102bd9eee68440f502c">曉晶</a>
<img src="/static/svgs/clock.svg" />
<span>2019-02-23 13:58:27</span>
</div>
</div>
<div class="list-item">
<h4 class="list-item-title">
<a href="/a/5c70e0e8bd9eee68dc3f164d" target="_blank" title="linux命令學習記錄一">
linux命令學習記錄一
</a>
</h4>
<div class="post-meta">
<img src="/static/svgs/user.svg" />
<a href="/u/5c70e0e8bd9eee68dc3f164b">ssjywlb</a>
<img src="/static/svgs/clock.svg" />
<span>2019-02-23 13:58:00</span>
</div>
</div>
<div class="list-item">
<h4 class="list-item-title">
<a href="/a/5c70e099bd9eee68dc3f161a" target="_blank" title=">>>>2007年IT業回顧之哀兵糗事篇：華爲帶頭鑽法律空子<轉>">
>>>>2007年IT業回顧之哀兵糗事篇：華爲帶頭鑽法律空子<轉>
</a>
</h4>
<div class="post-meta">
<img src="/static/svgs/user.svg" />
<a href="/u/5c70e099bd9eee68dc3f1618">ahgyyubo</a>
<img src="/static/svgs/clock.svg" />
<span>2019-02-23 13:56:41</span>
</div>
</div>
<div class="list-item">
<h4 class="list-item-title">
<a href="/a/5c70dfddbd9eee68440f4f7c" target="_blank" title="CCNA實驗二：手動建立靜態路由表">
CCNA實驗二：手動建立靜態路由表
</a>
</h4>
<div class="post-meta">
<img src="/static/svgs/user.svg" />
<a href="/u/5c70dfddbd9eee68440f4f7b">蝸牛001號</a>
<img src="/static/svgs/clock.svg" />
<span>2019-02-23 13:53:33</span>
</div>
</div>
<div class="list-item">
<h4 class="list-item-title">
<a href="/a/5c70dfc8bd9eee68440f4f79" target="_blank" title="C#實現的18位身份證格式驗證算法">
C#實現的18位身份證格式驗證算法
</a>
</h4>
<div class="post-meta">
<img src="/static/svgs/user.svg" />
<a href="/u/5c70dfc8bd9eee68dc3f15a3">sccdliangl</a>
<img src="/static/svgs/clock.svg" />
<span>2019-02-23 13:53:12</span>
</div>
</div>
<div class="list-item">
<h4 class="list-item-title">
<a href="/a/5c70dfb0bd9eee68dc3f1590" target="_blank" title="安裝mvwareworstation">
安裝mvwareworstation
</a>
</h4>
<div class="post-meta">
<img src="/static/svgs/user.svg" />
<a href="/u/5c70dfb0bd9eee68dc3f158f">zhumingqiang</a>
<img src="/static/svgs/clock.svg" />
<span>2019-02-23 13:52:48</span>
</div>
</div>
<div class="list-item">
<h4 class="list-item-title">
<a href="/a/5c70df43bd9eee68dc3f1553" target="_blank" title="ShareTech 防火牆 使用手冊(適用型號：LB-2225)">
ShareTech 防火牆 使用手冊(適用型號：LB-2225)
</a>
</h4>
<div class="post-meta">
<img src="/static/svgs/user.svg" />
<a href="/u/5c70df43bd9eee68dc3f1542">yzy747</a>
<img src="/static/svgs/clock.svg" />
<span>2019-02-23 13:50:59</span>
</div>
</div>
<div class="list-item">
<h4 class="list-item-title">
<a href="/a/5c70def5bd9eee68440f4ef4" target="_blank" title="科技部網站是這樣回答無聊問題的....">
科技部網站是這樣回答無聊問題的....
</a>
</h4>
<div class="post-meta">
<img src="/static/svgs/user.svg" />
<a href="/u/5c70dd9bbd9eee68440f4e30">張富貴</a>
<img src="/static/svgs/clock.svg" />
<span>2019-02-23 13:49:41</span>
</div>
</div>
<div class="list-item">
<h4 class="list-item-title">
<a href="/a/5c70de3bbd9eee68dc3f1491" target="_blank" title="zabbix3.0安裝">
zabbix3.0安裝
</a>
</h4>
<div class="post-meta">
<img src="/static/svgs/user.svg" />
<a href="/u/5c70de31bd9eee68dc3f148e">民工騎士</a>
<img src="/static/svgs/clock.svg" />
<span>2019-02-23 13:46:35</span>
</div>
</div>
<div class="list-item">
<h4 class="list-item-title">
<a href="/a/5c70dd50bd9eee68dc3f1402" target="_blank" title="關於HTML標記的">
關於HTML標記的
</a>
</h4>
<div class="post-meta">
<img src="/static/svgs/user.svg" />
<a href="/u/5c70dd50bd9eee68dc3f1401">pengtingwei</a>
<img src="/static/svgs/clock.svg" />
<span>2019-02-23 13:42:40</span>
</div>
</div>
<div class="list-item">
<h4 class="list-item-title">
<a href="/a/5c70dd17bd9eee68440f4db1" target="_blank" title="修改收藏夾的默認路徑">
修改收藏夾的默認路徑
</a>
</h4>
<div class="post-meta">
<img src="/static/svgs/user.svg" />
<a href="/u/5c70dd15bd9eee68440f4daa">zongxn</a>
<img src="/static/svgs/clock.svg" />
<span>2019-02-23 13:41:43</span>
</div>
</div>
<div class="list-item">
<h4 class="list-item-title">
<a href="/a/5c70dd14bd9eee68440f4d9f" target="_blank" title="useradd">
useradd
</a>
</h4>
<div class="post-meta">
<img src="/static/svgs/user.svg" />
<a href="/u/5c70dd14bd9eee68440f4d9e">63332128</a>
<img src="/static/svgs/clock.svg" />
<span>2019-02-23 13:41:40</span>
</div>
</div>
<div class="list-item">
<h4 class="list-item-title">
<a href="/a/5c70db77bd9eee68dc3f124d" target="_blank" title="redis數據庫隨筆">
redis數據庫隨筆
</a>
</h4>
<div class="post-meta">
<img src="/static/svgs/user.svg" />
<a href="/u/5c70db77bd9eee68440f4c11">simuls</a>
<img src="/static/svgs/clock.svg" />
<span>2019-02-23 13:34:47</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="secondary-content feed">
<div class='sidebar author-info'>
<a href="/u/5b9819b62b717736c6219694" target="_blank">
<span id='user-icon'>
簡
</span>
簡單的WLY
</a>
</div>
<div class="right_sidebar">
<div>
<div class="section-head">
24小時熱門文章
</div>
<div>
<section class="section-item">
<ul>
<li>
<h5>
<a href="/a/664ed43911e799a69644afdb" target="_blank" class="news-link">
[轉帖]使用NMT和pmap解決JVM資源泄漏問題原創
</a>
</h5>
</li>
<li>
<h5>
<a href="/a/664e1abc024d560d6ba4923c" target="_blank" class="news-link">
Python實現大麥網搶票的四大關鍵技術點解析
</a>
</h5>
</li>
<li>
<h5>
<a href="/a/664ed9acefc074f88e82473c" target="_blank" class="news-link">
Python 安裝庫指令大全
</a>
</h5>
</li>
<li>
<h5>
<a href="/a/664d90b52a266aa2fc60fadd" target="_blank" class="news-link">
salesforce零基礎學習（一百三十八）零碎知識點小總結（十）
</a>
</h5>
</li>
<li>
<h5>
<a href="/a/664d8f0611e799a69644aeee" target="_blank" class="news-link">
一款開源的.NET程序集反編譯、編輯和調試神器
</a>
</h5>
</li>
<li>
<h5>
<a href="/a/664d8840f57b61b1f7af523a" target="_blank" class="news-link">
關於接口協議，你必須要知道這些！
</a>
</h5>
</li>
<li>
<h5>
<a href="/a/664df23e024d560d6ba49221" target="_blank" class="news-link">
基於 Milvus + LlamaIndex 實現高級 RAG
</a>
</h5>
</li>
<li>
<h5>
<a href="/a/664d7b5b11e799a69644aedb" target="_blank" class="news-link">
【2024-05-21】以茶會友
</a>
</h5>
</li>
</ul>
</section>
</div>
</div>
</div>
<div class="right_sidebar">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-2073744953016040"
data-ad-slot="3358264730"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div class="right_sidebar">
<div>
<div class="section-head">
最新文章
</div>
<div>
<section class="section-item">
<ul>
<li>
<h5>
<a href="/a/5c9b089ebd9eee73ef4af0e0" target="_blank" class="news-link">
蘑菇街、螞蟻金服等公司的Java面試題
</a>
</h5>
</li>
<li>
<h5>
<a href="/a/5c700521bd9eee7f0733e9ae" target="_blank" class="news-link">
切點、切面：@Aspect、@PointCut相關的個人總結
</a>
</h5>
</li>
<li>
<h5>
<a href="/a/5c700521bd9eee7f0733e9ac" target="_blank" class="news-link">
CSS
</a>
</h5>
</li>
<li>
<h5>
<a href="/a/5c700521bd9eee7f92ec77b5" target="_blank" class="news-link">
JS
</a>
</h5>
</li>
<li>
<h5>
<a href="/a/5c700520bd9eee7f92ec77b3" target="_blank" class="news-link">
Maven的生命週期
</a>
</h5>
</li>
</ul>
</section>
</div>
</div>
</div>
<div class="right_sidebar">
<div>
<div class="section-head">
最新評論文章
</div>
<div>
<section class="section-item">
<ul>
<li>
<h5>
<a href="/a/62760603f185d13ea2b7230d" target="_blank" class="news-link">
https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co
</a>
</h5>
</li>
<li>
<h5>
<a href="/a/5b8a97c02b71775d1ce7e822" target="_blank" class="news-link">
linux以太網驅動總結
</a>
</h5>
</li>
</ul>
</section>
</div>
</div>
</div>
</div>
</div>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<img src="" class="img-responsive">
</div>
</div>
</div>
</div>
<footer>
</footer>
</div>
<script>
var post_id = "5c70051fbd9eee7f92ec77b0";
var token = getCookie('_xsrf');
</script>
<script>
$.ajax({
url: '/views',
headers: {'X-XSRFToken' : token },
data: {post_id: post_id },
type: "POST",
});
</script>
<script src="//pic1.xuehuaimg.com/static/js/custom_fix.js?v=daee3ed248f4905b532199ca731c5c34218641de039eb76eaeb95d7592a4a6bd66144d6309b00e89fe799b7229d6b80ff11eeeccf4a9241ede71823dbefe5c24"></script>
<script>
$(document).ready(function() {
$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
});
</script>
<script src="//pic1.xuehuaimg.com/static/js/article/load_comments.js?v=dd7ad2001ff0b568b06c4c36d7211dbac32f6907da85feb2f38e9543b899f6919abd7925cfbb17fa55fcbec67fa83f100082dde82f3e824e05d6a430a644637c"></script>
<script>
$(".article-content img").click(
function() {
let width;
let img_src = $(this).attr('src');
let img_width = this.naturalWidth;
// let height = this.naturalHeight;
let window_width = $(window).width() * 0.8;
console.log(img_width,window_width)
if (img_width <= window_width) {
$("#myModal").addClass('modal-small')
width = img_width;
} else {
$("#myModal").addClass('modal-big')
width = window_width;
}
$("#myModal img").attr('src',img_src);
$("#myModal .modal-dialog img").css('width',width);
$("#myModal .modal-dialog img").css('height','auto');
$('#myModal').modal('show');
}
)
$('#myModal').click(
function() {
$('#myModal').modal('hide')
}
)
const observer = lozad('img', {
load: function(el) {
const src = el.getAttribute('data-original')
if (src) {
el.src = src;
}
}
});
observer.observe();
</script>
<style>
.modal-big .modal-dialog {
position: relative;
display: table;
overflow-y: auto;
overflow-x: auto;
width: auto;
}
.modal-big .modal.show .modal-dialog {
top: 50%;
transform: translateY(-50%);
}
.modal-big .modal-body {
text-align: center;
}
.modal-small.modal {
text-align: center;
padding: 0!important;
}
.modal-small.modal:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -4px;
}
.modal-small .modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
max-width: 100%;
}
.modal-content {
cursor: zoom-out;
}
</style>
</body>
</html>