html 標籤
HTML的代碼結構
- 標籤-承載內容
- 層疊樣式表 - 渲染頁面
- JavaScript -交互式行爲
1.初識HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>流浪Python</title>
<!-- 2. 層疊樣式表 -->
<!-- css cascading style sheet -->
<style type="text/css">
h1 { /*h1標籤格式 */
color: red; /* 顏色 */
font-family: 隸書; /* 字體 */
}
p { /*p標籤格式 */
/* 字體大小 還能夠使用 80px */
font-size: 1cm;
}
p:first-letter{ /*首字格式 */
font-size:1.5cm;
color:blue;
}
.a { /*a 類格式 */
color:red;
}
.b { /*b 類格式 */
color:green;
}
</style>
</head>
<body>
<h1>成員列表</h1> <!-- 標籤 -->
<h2>二級標籤</h2>
<h3>三級標籤</h3>
<h4>四級標籤</h4>
<h5>五級標籤</h5>
<h6>六級標籤</h6>
<hr> <!-- 分割線 -->
xxx<br> <!-- br 換行 -->
xxx<br>
xxx<br>
xxx<br>
<p class="a">xx </p> <!-- 建立a 類 -->
<p class="b">xxx</p> <!-- 建立b 類 -->
<p>xxx</p>
<p>xx</p>
<!-- 建立按鈕並關聯js -->
<button onclick="showWeiter()">肯定</button>
<button onclick="closeWindow()">關閉窗口</button>
<!--javascript -->
<script type="text/javascript">
// 駝峯命名法 Camel Notation
function showWeiter(){
for(var i = 1; i <= 3; i += 1){
window.alert('pyth1901');
}
}
function closeWindow(){
if (window.confirm('肯定要關閉嗎?')){
window.close();
}
}
</script>
</body>
</html>
- 效果
2.標籤、字符實體、列表、圖片
<!DOCTYPE html>
<html>
<head>
<title>1.標籤</title>
</head>
<body>
<h1>標籤和字符實體</h1>
<ol>
<h2>上標(sup)/下標(sub)</h2>
<p> H<sub>2</sub>O </p> <!-- 下標 -->
<p> a<sup>2</sup> </p> <!-- 上標 -->
<h2>加粗(strong)/傾斜(em)/換行(br)</h2>
人到<strong>中年</strong>不得以,<em>保溫杯</em>裏泡<strong><em>枸杞<sub></sub></em></strong><br>
<h2>下劃線(ins)/刪除線(del)</h2>
<ins>人生</ins>自古<del>誰無死</del>,<br>
<h2>字符實體: 空格($nbsp)/版權($copy)</h2>s
留取丹心 照汗©青.
</ol>
<br>
<br>
<h1>列表</h1>
<hr>
<ol>
<h2>1 有序列表</h2>
<ol>
<li>表項1</li>
<li>表項2</li>
<li>表項3</li>
</ol>
<h2>2 無序列表</h2>
<ul>
<li>表項1</li>
<li>表項2</li>
<li>表項3</li>
</ul>
<h2>3 定義列表</h2>
<dl>
<dt>Python</dt>
<dd>面向對象的編程語言</dd>
<dd>動態類語言,須要Python解釋器才能執行</dd>
</dl>
<h2>4 列表嵌套</h2>
<ul>
<li>表項1</li>
<ol>
<li>表項1</li>
<li>表項2</li>
<li>表項3</li>
</ol>
<li>表項2</li>
<li>表項3</li>
</ul>
</ol>
<h1>圖片</h1>
<ol>
<p>網絡圖片<p>
<dt><img src="https://www.python.org/static/img/python-logo.png"></dt>
<p>本地圖片</p>
<dt><img src="wali.jpg"></dt>
<p>調整圖片大小</p>
<dt><img src="wali.jpg" width="100" height="80"></dt>
<p>加載失敗</p>
<dt><img src="wali11.jpg" width="100" height="80"alt="加載失敗" ></dt>
<p>對齊:居中(center)/左對齊/右對齊/上對齊/下對齊</p>
<dt><img src="wali.jpg" width="100" height="80"align="left">瓦力</dt>
</ol>
<a name="foo"></a>
</body>
</html>
- 效果
3.連接：頁面、錨點、功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2.標籤</title>
<style type="text/css">
a {
color:red;
}
a:hover{
color:green;
}
</style>
</head>
<body>
<a name="flag1"></a> <!--設置錨點 -->
<a href="#flag0">到底部</a> <!--使用錨點 -->
<h2>1 頁面連接</h2>
<hr>
<h3>經常使用網站</h3>
<ol>
<li><a href="https://www.baidu.com"target="_blank">百度</a></li>
<li><a href="https://fanyi.baidu.com/translate?aldtype=16047&query=&keyfrom=baidu&smartresult=dict&lang=auto2zh#auto/zh/"target='_blank'> 百度翻譯</a></li>
<li><a href="https://www.jianshu.com/u/20d448d19898"target="_self">個人簡書</a></li>
</ol>
<h3>本身的頁面</h3>
<ol>
<!-- -->
<li><a href="h2.html">H2</a></li>
<li><a href="h1.html">H1</a></li>
</ol>
<hr>
<br><br>
</body>
<h2>2 錨點連接</h2>
<a name="flag0"></a> <!--設置錨點 -->
<a href="#flag1">回頂部</a> <!--使用錨點 -->
<a href="h2.html#foo">到h2 foo</a> <!--跨頁面使用錨點 -->
<hr>
<h2>3 功能連接</h2>
<!--mailto:XXXXXX@xx.com爲郵箱帳號 -->
<a href="mailto:XXXXXX@xx.com">聯繫站長</a>
<!--qq聊天連接，本身上（shang.qq.com)生成 ,img圖片能夠本身替換-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=xxxxxxx&site=qq&menu=yes"><img src="wali.jpg" width="100" height="80" alt="點擊這裏給我發消息" title="點擊這裏給我發消息"/></a>
</html>
- 效果
4.表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>中國,中國</title>
<style>
th{
color: #FF0000;
}
.a{
color: #0000FF;
}
</style>
</head>
<body>
<h1>你好</h1>
<!-- ol>li*5 快速列表 -->
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<!-- table>tr*4>td*5 快速生成4行5列表格命令-->
<!-- border 表格邊框通常用css方式實現 -->
<!-- thead 表頭 tbody 表體 只是爲了代碼好看 不影響頁面顯示 -->
<table border=9>
<caption>學生成績表</caption>
<thead>
<tr>
<th width="100">語文</th>
<th width="100">姓名</th>
<th width="100">數學</th>
<th width="100">英語</th>
<th width="100">體育</th>
</tr>
</thead>
<tbody>
<tr>
<td class="a" align="center">XX</td>
<td>22</td>
<td>33</td>
<td>43</td>
<td>53</td>
</tr>
<tr> <!-- rowspan 合併行/xolspan 合併列-->
<td rowspan="2"align="center">XXX</td>
<td align="center" colspan="4">55</td>
<!-- align 對齊方式 center 居中 -->
</tr>
<tr>
<td>73</td>
<td>86</td>
<td>27</td>
<td>f2</td>
</tr>
<tr>
<td align="center">XX</td>
<td>32</td>
<td>32</td>
<td>22</td>
<td>22</td>
</tr>
</tbody>
</table>
</body>
</html>
- 效果
相關文章
- 1. HTML標籤_head標籤
- 2. html 標題標籤
- 3. HTML：標題，標籤
- 4. html標籤（二）
- 5. html 標籤
- 6. HTML標籤
- 7. Html span 標籤
- 8. HTML 頭標籤
- 9. Html p 標籤
- 10. HTML 標籤
- 更多相關文章...
- • MyBatis if標籤 - MyBatis教程
- • MyBatis foreach標籤 - MyBatis教程
- • JDK13 GA發佈：5大特性解讀
- • Docker 清理命令
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. vs2019運行opencv圖片顯示代碼時，窗口亂碼
- 2. app自動化 - 元素定位不到？別慌，看完你就能解決
- 3. 在Win8下用cisco ××× Client連接時報Reason 422錯誤的解決方法
- 4. eclipse快速補全代碼
- 5. Eclipse中Java/Html/Css/Jsp/JavaScript等代碼的格式化
- 6. idea+spring boot +mabitys(wanglezapin)+mysql (1)
- 7. 勒索病毒發生變種 新文件名將帶有「.UIWIX」後綴
- 8. 【原創】Python 源文件編碼解讀
- 9. iOS9企業部署分發問題深入瞭解與解決
- 10. 安裝pytorch報錯CondaHTTPError：******
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. HTML標籤_head標籤
- 2. html 標題標籤
- 3. HTML：標題，標籤
- 4. html標籤（二）
- 5. html 標籤
- 6. HTML標籤
- 7. Html span 標籤
- 8. HTML 頭標籤
- 9. Html p 標籤
- 10. HTML 標籤