day 49 html標籤介紹，標題、段落、a、img、表格、特殊符號、經常使用標籤、div、span
HTML簡介
#網頁的組成：
1. html
至關於骨架
2. css
肉,衣服
3. js,jq
動了
靜態網頁：沒有鏈接數據庫，數據不能動態改變
動態網頁：鏈接了數據庫，數據能隨着數據庫的改變更態改變
#瀏覽器
c/s
客戶端、服務端
b/s
瀏覽器、服務端
瀏覽器就是一個客戶端，瀏覽不經過服務端也能把咱們文本渲染
#什麼是html
超文本標記語言（Hypertext Markup Language, HTML）是一種用於建立網頁的標記語言
#html文件的結構
<!DOCTYPE html>要用什麼版本html進行解析
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
1 標籤的書寫，
雙標籤，<head></head>
單標籤 <meta charset="UTF-8">
2 標籤裏面的屬性
<標籤名 屬性名="屬性值"></標籤名>
<標籤名 屬性名="屬性值" />
<標籤名 id="屬性值" class="屬性值 屬性值 屬性值"></標籤名>
<標籤名 >內容</標籤名>
<標籤名 屬性名="內容"/>
</body>
</html>
標籤
<!DOCTYPE html> #告訴瀏覽器你應該用什麼版的html去解析
<html></html> #中間全部的內容纔是咱們真正html lang="en"表示哪一個國家的語言
<html lang="en">
<head>
<meta charset="UTF-8">#咱們html的編碼格式
<title>sdhasd</title> #網頁的標題
<style></style> #樣式標籤，能夠把css寫在style標籤中
<script src="t.js"></script> #將js文件放入script標籤中 alter（'提示信息'）網頁彈窗提示信息
<link rel="stylesheet" href="01.css"/> #將css文件放入lin標籤中
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">-->
<meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉">
<meta name="description" content="老男孩教育Python學院"> #搜索引擎主要參考這兩個
</head>
<body>
<div>
aa
</div>
雙標籤：<html >內容</html>
單標籤:<br/>
標籤的屬性：任何一個標籤都有id 和 class屬性
<div id="屬性值" class="屬性值" 屬性名="屬性值">
</body>
<!---奧術大師--> #body是寫正文部分，若是位置寫錯了，在瀏覽器渲染的時候，仍是會強行將位置錯誤的內容放入body中
</html>
<!---奧術大師多-->
#行內標籤
#塊級標籤
#標題標籤
<h1 id="h1">我是標題1</h1>
<h2>我是標題2</h2>
<h3>我是標題3</h3>
<h4>我是標題4</h4>
<h5>我是標題5</h5>
<h6>我是標題6</h6> #最多知道6
<h7>我是標題7</h7>
我是標題7
#段落標籤
<p>我是p</p>
<p>我是p</p>
#a標籤，連接標籤 ,href="連接的地址"
target屬性默認是_self,若是是self就會覆蓋當前的html,
若是target屬性默認是_blank，就會從新打開窗口
<a href="02.html" target="_blank">首頁</a>
<a href="02.html" target="_self">首頁</a>
#錨點
<a href="#h1">首頁</a>
#id屬性，
id="屬性值"，若是是id屬性，屬性值必須全頁面惟一
#class屬性
class屬性能夠全局不惟一
<a class="a b c k"></a>
#img 圖片標籤
src="圖片的地址"
alt="當圖片不能加載的時候，就會顯示，還有給搜索引擎提示咱們圖片的內容"
title="當咱們的鼠標懸浮在圖片上的時候，就會顯示"
<img src="http://s9.rr.itc.cn/r/wapChange/20174_1_21/a7o3k08442035758542.jpg" alt="">
<img src="1.jpg" alt="">
<img src="2.jpg" alt="dasdasd">
<img src="1.jpg" title="這是大家的老婆">
#無序列表標籤
disc（實心圓點，默認值）
circle（空心圓圈）
square（實心方塊）
none（無樣式）
<ul class="a" type="circle">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
#有序列表標籤
type屬性：
1 數字列表，默認值
A 大寫字母
a 小寫字母
Ⅰ大寫羅馬
ⅰ小寫羅馬
<ol type="A" start="2">
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
#標題列表
<dl>
<dt>標題1</dt>
<dd>內容1</dd>
<dt>標題2</dt>
<dd>內容1</dd>
<dd>內容2</dd>
</dl>
#表格標籤
border: 表格邊框.
cellpadding: 內邊距
cellspacing: 外邊距.
width: 像素 百分比.（最好經過css來設置長寬）
rowspan: 單元格豎跨多少行
colspan: 單元格橫跨多少列（即合併單元格）
<table border="1" cellpadding="20" cellspacing="20" >
<thead>
<tr>
<th>name</th>
<th>age</th>
<th>sex</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">egon</td>
<td>39</td>
<td>男</td>
</tr>
<tr>
<td colspan="2">egon</td>
<td>39</td>
<td>男</td>
</tr>
<tr>
<td>egon</td>
<td>39</td>
<td>男</td>
</tr>
</tbody>
</table>
#普通文本
<br> #換行
<b>加粗</b>
<br>
<i>斜體</i>
<br>
<u>下劃線</u>
<br>
<s>刪除</s>
<a href="">a</a>
<br>
<a href="">a</a>
<br>
<a href="">a</a>
#水平線
<hr>
<div>我是塊級</div>
<span>我是行內</span>
<span>我是行內</span>
#html中特殊符號
<span>我是 行內</span>
<!--空格 -->
<!--> >-->
<!--< <-->
<!--& &-->
<!--¥ ¥-->
<!--版權 ©-->
<!--註冊 ®-->
<!--<script>-->
<!--alert("123")-->
<!--</script>-->
相關文章
- 1. html中的a標籤、img標籤、iframe標籤、列表標籤
- 2. 列表標籤，自定義標籤，img標籤，超連接，div , span
- 3. HTML——段落標籤
- 4. HTML段落標籤
- 5. html段落標籤
- 6. HTML 段落標籤
- 7. Html span 標籤
- 8. HTML_常用標籤之段落標籤
- 9. html常用標籤介紹
- 10. Html img 標籤
- 更多相關文章...
- • MyBatis if標籤 - MyBatis教程
- • MyBatis foreach標籤 - MyBatis教程
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
- • Composer 安裝與使用
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. html中的a標籤、img標籤、iframe標籤、列表標籤
- 2. 列表標籤，自定義標籤，img標籤，超連接，div , span
- 3. HTML——段落標籤
- 4. HTML段落標籤
- 5. html段落標籤
- 6. HTML 段落標籤
- 7. Html span 標籤
- 8. HTML_常用標籤之段落標籤
- 9. html常用標籤介紹
- 10. Html img 標籤