HTML+CSS+JS學習筆記(日更)
1、h1 h2 h3 ... h6 對應六個標題
2、開頭加<!DOCTYPE html> 是html 5 的定義
3、所有內容都在<html> 內， 裡面有head和body
4、<p> 定義段落，在文字後加東西，就是加在後面，而對段落加東西會另起一行, 換行的東西跟前面有行間距
5、超連結，用a標籤，裡面href引數=地址，中間的內容是帶上這個超連結的
6、<img> 裡面放參數src是地址
7、<br\>換行無間距，而段落的換行有間距
8、屬性以鍵值對的方式出現，比如
<a>的href:標籤獲得超連結
的target：規定在何處開啟連結
_blank 在新的頁面開啟網頁
_self 覆蓋當前頁面
<h1>的align對齊方式
right
left
center
<body>的bgcolor背景顏色
通用：
class：規定元素類名
id：規定元素唯一ID
style：規定元素樣式
type = text/css 引入css樣式
title：規定元素額外資訊
放在head裡，文字就是網頁標題
9、格式化
定義***的字
b 粗體文字
big 大號字
em 著重字型
i 斜體
small 小號字
strong 加重語氣
sub 下標字
sup 上標字
ins 插入字（有下劃線）
del 刪除字（有刪除線）
10、HTML樣式
標籤
<style> 樣式定義
<link> 資源引用
屬性
rel = "stylesheet": 外部樣式表
type = "text/css": 引入文件的型別
margin-left: 邊距
樣式插入方法
1、外部樣式表
<link rel = "stylesheet" type = "text/css" href = "mystyle.css"> 自己寫一個檔案mystyle.css
2、內部樣式表
<style type = "text/css">
body {
background-color: red
},
p {
margin-left: 20px
}
</style> 對...標籤加入...樣式
3、內聯樣式表
<p style = "color":red> 只修改當前的，原地修改
11、html連結
1、連結資料
文字連結
圖片連結
2、屬性
href屬性 指向另一個文件的連結 標籤裡的所有東西包括圖片都會獲得超連結
name屬性 建立文件內的連結 當前頁面內的連結
<a name = "fuck"> abc </a>
<a href = "#fuck"> 跳轉到fuck </a>
點選跳轉到fuck，我們就會跳轉到abc所在的位置，（某些網站回到頂部同理）
3、img標籤屬性
alt 替換文字屬性 (比如我打錯了一個圖片的名字，就會顯示不出來那個圖片，相應位置會出現alt設定的內容）
width 寬 px(畫素)
height 高 px
12、html表格
<table> 定義表格
border = 1 定義邊框厚度
cellpadding = 10 每個單元格放大多少
cellspacing = 10 相鄰單元格的間距（不改變單元格本身大小）
background = 顏色/圖片檔案
<caption> 定義表格的標題
<th> 定義表格的表頭
<tr>
<th>222</th>
<th>222</th>
<th>222</th>
</tr>
<tr> 定義表格的行
<td> 定義表格的單元
空單元格：裡面不寫內容
<thead> 定義表格的頁首
<tbody> 定義表格的主體
<tfoot> 定義表格的頁尾
<col> 定義表格的列屬性
<ul> 表格內的列表
裡面的每一項通過<li>來定義
EX
<tr>
<td>
<ul>
<li>pg</li>
<li>pc</li>
<li>cg</li>
</ul>
</td>
</tr>
EX
<table>
<tr>
<td>單元格1-1</td>
<td>單元格1-2</td>
<td>單元格1-3</td>
</tr>
<tr>
<td>單元格2-1</td>
<td>單元格2-2</td>
<td>單元格2-3</td>
</tr>
</table>
13、html列表
<ol> 有序列表，列表標著123
<ul> 無序列表，每行前面是一個點
<li> 列表項
<dl> 列表
<dt> 列表項
<dd> 描述
1.無序列表
標籤 <ul> <li>
屬性 type = "disc" / "circle" / "square" 前面小圓點的樣式
2.有序列表
標籤 <ol> <li>
屬性 A a L l start
前面數字的樣式
A --> ABCD
a --> abcd
I --> I II III IV
i --> i ii iii iv
start 從幾開始
3.巢狀列表
標籤 <ul> <ol> <li>
無序列表巢狀：
<ul>
<li>人類</li>
<ul>
<li>中國人</li>
<li>英國人</li>
</ul>
</ul>
4.自定義列表
標籤 <dl> <dt> <dd>
dl 等價於ul ol，不過沒有前面的數字或點點
dt 為dl裡的每一個列表項
dd 為dt的一個描述，在dt的下面會+tab顯示出來
<dl>
<dt>helloworld</dt>
<dd>abc</dd>
<dt>helloworld</dt>
<dd>abc</dd>
<dt>helloworld</dt>
<dd>abc</dd>
</dl>
效果：
helloworld
abc
helloworld
abc
helloworld
abc
14、html塊
1.html塊元素
塊元素在顯示時，通常會以新行開始
ex: <h1> <p> <ul>
2.html內聯元素
內聯元素通常不會以新行開始
ex: <b> <a> <img>
3.html<div>元素
<div>元素也被稱為塊元素，其主要是組合html元素的容器
正常情況加不加沒啥區別，主要與css結合
需要定義一個id屬性，從而在css裡編輯
PS: 用CSS需要在head裡引入
<link rel="stylesheet" type="text/css" href="ls.css">
CSS樣式書寫時
#加id名加大括號
如果id名後加p，那麼html裡只會對p標籤產生影響
4.html<span>元素
<span>元素是內聯元素，可作為文字的容器
在head裡也可以自定義樣式
<style type = "text/css">
span{
}
</style>
15、html佈局
見程式碼1.html 2.html
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>佈局</title> 6 <style type="text/css"> 7 body { 8 margin: 0px; 9 /* 頁邊距為0 */ 10 } 11 #container1.html{ 12 width: 100%; 13 height: 950px; 14 background-color: darkgray; 15 /* 寬*高的部分都為container的範圍，並設定了背景顏色 */ 16 } 17 #heading { 18 width: 100%; 19 height: 10%; 20 background-color: aqua; 21 } 22 #content_menu { 23 width: 30%; 24 height: 80%; 25 background-color: aquamarine; 26 float: left; 27 /* 定義可以從左往右排的方式，相同型別的如果能放一排就一排了（從左往右） */ 28 } 29 #content_body { 30 width: 70%; 31 height: 80%; 32 background-color: blueviolet; 33 float: left; 34 } 35 div#footing { 36 width: 100%; 37 height: 10%; 38 background-color: black; 39 clear: both; 40 } 41 42 </style> 43 </head> 44 <body> 45 <div id="container"> 46 <div id="heading">頭部</div> 47 <div id="content_menu">內容選單</div> 48 <div id="content_body">內容主體</div> 49 <div id="footing">底部</div> 50 </div> 51 </body> 52 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <meta type="UTF-8"> 4 <head> 5 <title>table佈局</title> 6 </head> 7 <body marginheight="0px" marginwidth="0px"> <!--上下/左右頁邊距--> 8 <table width="100%" height="950px" style="background-color: darkgray"> 9 <tr> 10 <td colspan="3" width="100%" height="10%" style="background-color: aqua;"> 11 <!--colspan向右合併幾個單元格--> 12 這是頭部 13 </td> 14 </tr> 15 <tr> 16 <td width="20%" height="80%" style="background-color: blue;"> 17 <ul> 18 <li>ios</li> 19 <li>android</li> 20 <li>html5</li> 21 </ul> 22 </td> 23 <td width="60%" height="80%" style="background-color: blueviolet;">內容主體</td> 24 <td width="20%" height="80%" style="background-color: deeppink;">右選單</td> 25 </tr> 26 <tr> 27 <td width="100%" height="10%" colspan="3" style="background-color: darkcyan;"> 28 這是底部 29 </td> 30 </tr> 31 </table> 32 </body> 33 34 </html>2.html