1，html簡介
*什麼是html
-HyperText Markup Language:超文本標記語言，網頁語言
**超文本：超出文本的範疇，使用html可以輕鬆實現這樣的操作
**標記：HTML所有的操作都是通過標記實現的，標記就是標籤,<標籤名稱>
**網頁語言：
*第一個html程序。
- 創建java文件.java
**先編譯，然後再運行（jvm）
- html後綴是 .html .htm
**直接通過瀏覽器就可以運行
- 代碼
** 這是我的<font size = "10" color = "green">第一個程序！</font>
*html的規範（遵循）
1.一個html文件開始標籤和結束的標籤 <html> </html>
- 定義一個java的方法{ }
2.html包含兩部分內容
（1）<head>設置相關信息</head>
（2）<body>顯示在網頁上的內容都是在body裏面</body>
3.html的標籤有開始標籤，也要有結束標籤，一般是成對出現
-<head></head>
4.html的代碼不區分大小寫的
5.有些標籤，沒有結束標籤，在標籤內結束
-比如 換行 <br/> 水平線 <hr/>
*html的操作思想（**********************重點<html></html>）
網頁中有很多數據可能需要不同的顯示效果，這個時候需要使用標籤吧操作的數據包起來（封裝起來），
通過修改標籤的屬性值可以實現標籤內數據樣式的變化。
一個標籤相當於一個容器，想要修改容器內數據的樣式，只需要修改容器的屬性值，就可以實現容器內數據樣式的變化。
html中常用的標籤
2.文字標籤和註釋標籤
*文字標籤：修改文字的樣式
- 屬性：
*size：文字的大小，取值範圍 1-7，超出了7，默認還是7
*color：文字的顏色
- 兩種表示方式
**英文單詞：red green blue black white yellow gray....
**使用工具實現不同的顏色#ffffff : RGB
- 通過工具實現不同的顏色 #66cc66
*註釋標籤：
- java註釋幾種？三種
- html的註釋：<!-- html的註釋 -->只有這一種且！必須是英文狀態下的
3.標題標籤，水平標籤和特殊字符
*標題標籤
- <h1></h1> <h2></h2> <h3></h3> .......<h6></h6>
- 從h1到h6，大小是依次變小，同時會自動換行
*水平線標籤
- <hr/>
- 屬性
** size：水平線的粗細 取值範圍1-7
** color：顏色
- 代碼
<hr size = "5" color = "blue">
*特殊字符
- 想要在頁面上顯示這樣的內容 <html>：是網頁的開始！
- 需要對特殊字符進行轉義
* < <
* > >
* 空格 <!-- 一個空格一個 -->
* & &
4.列表標籤
- 比如現在顯示這樣的效果
傳智播客
財務部
學工部
人事部
**<dl></dl>:表示列表的範圍
**在dl裏面 <dt></dt>:上層內容
**在dl裏面 <dd></dd>:下層內容
- 代碼
<dl>
<dt>傳智播客</dt>
<dd>財務部</dd>
<dd>學工部</dd>
<dd>人事部</dd>
</dl>
- 想要在頁面上顯示這樣的效果
1.財務部
2.學工部
3.人事部
a.財務部
b.學工部
c.人事部
i.財務部
ii.學工部
iii.人事部
**<ol></ol>:有序列表的範圍
- 屬性 type：設置排序方式 1（默認爲阿拉伯數字排序） a i
**在ol標籤裏面<li>具體內容</li>
- 代碼
-----------------------------
<ol>
<li>財務部</li>
<li>學工部</li>
<li>人事部</li>
</ol>
-----------------------------
<ol type = "a">
<li>財務部</li>
<li>學工部</li>
<li>人事部</li>
</ol>
------------------------------
<ol type = "i">
<li>財務部</li>
<li>學工部</li>
<li>人事部</li>
</ol>
------------------------------
- 想要在頁面上顯示這樣的效果
特殊符號（方框）財務部
特殊符號（方框）學工部
•財務部
•學工部
•人事部
◦財務部
◦學工部
◦人事部
◾財務部
◾學工部
◾人事部
**<ul></ul>:表示無序列表的範圍
屬性：type: 空心圓circle,實心圓disc,實心方塊square，默認爲disc
在ul裏面 <li></li>
- 代碼
-------------------------
<ul><!--默認爲實心圓-->
<li>財務部</li>
<li>學工部</li>
<li>人事部</li>
</ul>
-------------------------
<ul type = "circle"><!-- 空心圓 -->
<li>財務部</li>
<li>學工部</li>
<li>人事部</li>
</ul>
-------------------------
<ul type = "square"><!-- 實心方塊 -->
<li>財務部</li>
<li>學工部</li>
<li>人事部</li>
</ul>
-------------------------
5.圖像標籤（******************重點<html></html>）
*<img src = "圖片的路徑"/>
-src:圖片的路徑
- width:圖片的寬度
- height:圖片的高度
- alt:圖片上顯示的文字，把鼠標移動到圖片上，停留片刻顯示內容
**有些瀏覽器下不顯示（沒有效果）
6.路徑的介紹（***********重點）
*分類：兩類
** 絕對路徑
- E:\JavaScript+html+Css_Practise\day01\code\1.jpg
- http://www.baidu.com/b.jpg
** 相對路徑
- 一個文件相對於另外一個文件的位置
- 三種：
** html文件和圖片在一個路徑下，可以直接寫文件名稱
- <img src = "1.jpg" alt = "這是一個美女"/>
** 圖片在html的下層目錄
在html文件中，使用img文件夾下面的10.jpg
-- E:\JavaScript+html+Css_Practise\day01\code\ 4.html
-- E:\JavaScript+html+Css_Practise\day01\code\ img\10.jpg
*** 在html中使用圖片 4.html和img在一個路徑下
img\10.jpg
** 圖片在html文件的上層目錄
-- E:\JavaScript+html+Css_Practise\day01\ 3.jpg
-- E:\JavaScript+html+Css_Practise\day01\ code\4.html
***html文件所在的目錄和圖片是一個目錄
**圖片和html文件是什麼關係？
- 圖片在html的所在目錄的上層目錄day01
** 怎樣表示上層路徑 ../
- ../3.jpg
7.案例一：列表標籤的使用
8.超鏈接標籤（**************重點）
* 鏈接資源（*****）
- <a href = "連接到資源的路徑">顯示在頁面上的內容</a>
** href:鏈接的資源的地址
** target:設置打開的方式，默認是在當前頁面打開
-- _blank:在一個新的窗口打開
-- _self:在當前頁面打開（默認）
- 當超鏈接不需要到任何的地址 在href裏面加#
-<a href = "#">這是一個超鏈接1</a>
* 定位資源
** 如果想要定位資源：定義一個位置
<a name = "top">頂部</a>
** 回到這個位置
<a href = "#top">回到頂部</a>
** 引入一個標籤 pre:原樣輸出
9.表格標籤（********重要內容**********<html></html>）
<table></table>:表格的範圍。屬性：border,bordercolor,cellspacing,width,height
<tr></tr>:表示一行。屬性：align:left center right
<td></td>:表示一行中的一個單元格。屬性：align:left center right
* 可以對數據進行格式化，是數據顯示更加清晰
* <table></table>:表示表格的範圍
- border:表格線
- bordercolor:表格線的顏色
- cellspacing:單元格直接的距離
- width:表格的寬度
- height:表格的高度
** 在table裏面<tr></tr>
- 設置對齊方式 align: left center right
*** 在tr裏面<td></td>
- 設置對齊方式 align: left center right
*** 使用th也可以表示單元格
- 表示可以實現居中和加粗
* 代碼
<table border = "1" bordercolor = "blue" cellspacing = "0" width = "400" height = "200"></table>
* 畫圖分析表格的寫法
- 首先定義一個表格的範圍使用<table></table>
- 定義一行使用<tr></tr>
- 定義一個單元格使用<td></td>(有時候單元格還可以使用<th></th>：效果是加粗居中)
** 操作技巧
- 首先數有多少行，數每行裏面有多少個單元格
** 表格的標題
<caption></caption>
** 合併單元格
- rowspan:跨行
- colspan:跨列
10.表單標籤
* 可以提交數據到開心網的服務器，這個過程可以使用表單標籤實現
* <form></form>:定義一個表單的範圍
- 屬性
** action：提交到地址，默認提交到當前的頁面
** method：表單提交方式
- 常用的有兩種 get 和 post,默認是get請求
** 面試題目：get 和 post區別
1.get請求地址欄會攜帶提交的數據，post不會攜帶（請求體裏面。在第七天時候講http協議時候）；
2.get請求安全級別較低，post較高；
3.get請求數據大小的限制，post沒有限制。
** enctype:一盤請求下不需要這個屬性，做文件上傳時候需要
** 輸入項：可以輸入內容或者選擇內容的部分
- 大部分的輸入項 使用 <input type = "輸入項的類型"/>
***** 在輸入項裏面需要一個name屬性。
*** 普通輸入項：<input type = "text"/>
*** 密碼輸入項：<input type = "password"/>
*** 單選輸入項：<input type = "radio"/>
- 在裏面需要屬性 name
- name的屬性值必須要相同
- 必須有一個value值
**** 實現默認選中屬性
-- checked = "checked"
*** 複選輸入項：<input type = "checkbox">
- 在裏面需要屬性 name
- name的屬性值必須要相同
- 必須有一個value值
**** 實現默認選中屬性
-- checked = "checked"
*** 文件輸入項（在後面上傳時候用到）
- <input type = "file"/>
*** 下拉輸入項（不是在input標籤裏面的）
<select>
<option value = "1991">1991</option>
<option value = "1992">1992</option>
<option value = "1993">1993</option>
</select>
- 默認選擇
*** selected = "selected"
*** 文本域
<textarea cols = "10" rows = "10"></textarea>
*** 隱藏項（不會顯示在頁面上，但是存在於html代碼裏面）
<input type = "hidden"/>
*** 提交按鈕
<input type = "submit"/>
<input type = "submit"/ value = "註冊">
file:///E:/JavaScript+html+Css_Practise/day01/code/10-表單標籤1.html
?sex=on&love=on&birth=1992&tex=312&hid=
file:///E:/JavaScript+html+Css_Practise/day01/code/10-%E8%A1%A8%E5%8D%95%E6%A0%87%E7%AD%BE1.html
?phone=123344&pwd=1234&sex=nan&love=y&love=p&love=l&birth=&tex=123456&hid=
** ?輸入項name的值 = 輸入的值&
** 參數類似於key-value形式
*** 使用圖片提交
<input type = "image" src = "圖片路徑"/>
*** 重置按鈕
<input type = "reset "/>
*** 普通按鈕（和明天講JS在一起使用）
<input type = "button" value = ""/>
11.案列，使用表單標籤實現註冊頁面，具體案例鏈接：https://blog.csdn.net/qq_43751200/article/details/105667484
- 使用表格實現頁面效果;
- 超鏈接不想要它的效果<a href = "#">XXX</a>;
- 如果表格裏面的單元格沒有內容，使用空格作爲佔位符
- 使用圖片提交表單<input type = "image" src = "圖片的路徑">；
- 使用圖片的時候<img src = "圖片路徑">
12.html中的其他的常用標籤的使用
b:加粗
s:刪除線
u:下劃線
i:斜體
pre:原樣輸出
sub:下標
sup:上標
p:段落標籤 比br標籤多一行
==明天css時候一直使用
div:自動換行
span:在一行顯示
13.html的頭標籤的使用
* html兩部分組成 head 和 body
** 在head裏面的標籤就是頭標籤
** title標籤：設置頁面的一些相關內容
** <meta>標籤：設置頁面的一些相關內容（單個出現的的）
- <meta name = "keyword" content = "畢姥爺，熊出沒，劉翔">
<meta heep-equiv = "refresh" content = "3"; url = "hello.html"/>
** base標籤：設置超鏈接的基本設置
- 可以統一設置超鏈接的打開方式
<base target = "_blank">
** link標籤：引入外部文件
- 利用link標籤引入css文件
14.框架標籤的使用
* <frameset>
- rows:按照行進行劃分
** <frameset rows = "80,*">
- cols:按照列進行劃分
** <frameset clos = "80,*">
*<frame>
- 具體顯示的頁面
- <frame name = "lower_left（自定義名字）" src = "a.html">
*** 使用框架標籤的時候，不能寫在body裏面，使用了框架標籤，需要把body去掉
* <frameset rows = "80,*"> //把頁面劃分成上下兩部分
<frame name = "top" src = "a.html"> //上面的頁面
<frameset cols = "80,*"> //把下面部分劃分成左右兩部分
<frame name = "left" src = "b.html">//左邊的頁面
<frame name = "right" src = "c.html">//右面的頁面
</frameset>
<frameset>
* 如果在左邊的頁面有超鏈接，想讓內容顯示在右邊的頁面中
- 設置超鏈接裏面的屬性 target值設置成名稱
- <a href = "hello.html" target = "right">超鏈接1</a>
JavaScript+html+Css學習day01
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.