前端三劍客-03html

時間 2019-11-30

標籤前端劍客 03html html 欄目 HTML 简体版

原文原文鏈接

一丶什麼是HTML

寫網頁的一套標準css

二丶HTML註釋

註釋是代碼之母html

<!--單行註釋-->

<!--

多行註釋

多行註釋

-->

通常狀況下 html的註釋都會按照下面的方式書寫
<!--導航條樣式開始-->

<!--導航條樣式結束-->

三丶HTML文檔結構

<html>
<head></head>:head內的標籤 不是用來展現給用戶看的  而是定義一些配置 主要是給瀏覽器看的
<body></body>:body內的標籤 就是瀏覽器展現給用戶看的內容
</html>

四丶標籤分類

1.雙標籤(前端

)
2.單標籤(自閉和標籤

)

五丶head內經常使用標籤

title用來顯示網頁標題後端
style用來控制樣式的內部支持寫css代碼瀏覽器
script內部支持寫js代碼也支持導入外界的js文件post
link專門用來引入外部的css文件編碼
meta定義網頁原信息url

提供網頁的元信息spa

位於文檔的頭部插件

用戶不可見

六丶標籤的分類

塊兒級標籤(獨佔瀏覽器一行)
div p h
1.塊兒級標籤能夠修改長寬
2.塊兒級標籤內部能夠嵌套任意的塊級標籤
是p標籤雖然是塊兒級標籤可是他不可以其餘塊兒級標籤包括自身能夠嵌套行內標籤
- 總結:
  只要是塊兒級標籤均可以嵌套行內標籤
  p標籤只能嵌套行內其餘塊兒級能夠嵌套任意的塊兒級標籤
行內標籤(自身文本多大就佔多大)
span b s i u

七丶標籤的三個重要屬性

id值該值就相似於人的身份證號在用一個html文檔id應該保證惟一不重複
class值該值就相似於面向對象裏面的繼承能夠寫多個
style(不是必備) 支持在標籤內直接寫css代碼屬於行內樣式優先級最高
補充任何標籤都支持自定義屬性!!!

八丶body內經常使用標籤

8.1基本標籤

h標籤:標題標籤

p標籤:段落標籤

8.2符號標籤

內容	對應代碼
空格
>	>
<	<
&	&
¥	¥
版權	©
註冊	®

8.3經常使用標籤

div標籤

span標籤

div標籤和span標籤

div標籤用來定義一個塊級元素，並沒有實際的意義。主要經過CSS樣式爲其賦予不一樣的表現。
span標籤用來定義內聯(行內)元素，並沒有實際的意義。主要經過CSS樣式爲其賦予不一樣的表現。

塊級元素與行內元素的區別：

所謂塊元素，是以另起一行開始渲染的元素，行內元素則不需另起一行。若是單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響。
這兩個元素是專門爲定義CSS樣式而生的。

p標籤

p標籤只能嵌套行內其餘塊兒級能夠嵌套任意的塊兒級標籤

img標籤

src 存放的是圖片的路徑(本地或者往上)
alt 當圖片加載不出來的時候,顯示的提示信息
title 當鼠標懸浮在圖片上,提示的信息
heght , width 當你只指定一個參數的時候另一個會等比例縮放

a標籤

超連接標籤

所謂的超連接是指從一個網頁指向一個目標的鏈接關係，這個目標能夠是另外一個網頁，也能夠是相同網頁上的不一樣位置，還能夠是一個圖片，一個電子郵件地址，一個文件，甚至是一個應用程序。

href後面存放url的時候, 點擊跳轉到該url
target默認是_self當前頁面跳轉

_blank新建頁面跳轉
錨點功能(回到頂部)
href還能夠寫另外一個a標籤的id值,點擊就會跳到id值所對應的a標籤

列表相關標籤

1.無序列表(記憶方法:uniform)

<ul type="disc">
  <li>第一項</li>
  <li>第二項</li>
</ul>

type屬性：

disc（實心圓點，默認值）
circle（空心圓圈）
square（實心方塊）
none（無樣式）

2.有序列表(記憶方法:order)

<ol type="1" start="2">
  <li>第一項</li>
  <li>第二項</li>
</ol>

type屬性：

1 數字列表，默認值
A 大寫字母
a 小寫字母
Ⅰ大寫羅馬
ⅰ小寫羅馬

3.標題列表(記憶方法:describle)

<dl>
  <dt>標題1</dt>
  <dd>內容1</dd>
  <dd>內容2</dd>
  <dt>標題2</dt>
  <dd>內容1</dd>
  <dd>內容2</dd>
</dl>

表格標籤

1.語法:

大體結構體:
        <table>
            <thead></thead>
            <tbody></tbody>
        </table>

完整列子:
        <table>
          <thead>
          <tr>
            <th>序號</th>
            <th>姓名</th>
            <th>愛好</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>1</td>
            <td>Egon</td>
            <td>槓娘</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Yuan</td>
            <td>日天</td>
          </tr>
          </tbody>
        </table>

記憶方法:

tr表示一行
        th和td都是文本
            建議在thead內用th
            tbody內用td

2.屬性

border: 表格邊框.
cellpadding: 內邊距
cellspacing: 外邊距.
width: 像素百分比.（最好經過css來設置長寬）
rowspan: 單元格豎跨多少行
colspan: 單元格橫跨多少列（即合併單元格）

form表單標籤

1.功能

可以接收用戶輸入(輸入選擇上傳)並將其發送給後端

2.表單屬性

這邊列幾個經常使用熟悉

accept-charset	規定在被提交表單中使用的字符集（默認：頁面字符集）。
action	規定向何處提交表單的地址（URL）（提交頁面）。
enctype	規定被提交數據的編碼（默認：url-encoded）。爲了實現傳文件添加enctype="multipart/form-data"
method	規定在提交表單時所用的 HTTP 方法（默認：GET）。改成post
target	規定 action 屬性中地址的目標（默認：_self）。

3.action控制數據提交的目的地

1.不寫的狀況下默認提交到當前頁面所在的路徑
2.寫全路徑(https://www.baidu.com)
3.路徑後綴(/index/)

4.form注意點

form表單默認是get請求你須要經過method參數換成post提交
form表單中要想觸發提交動做
只有兩種狀況能夠
1.input標籤type指定成submit
2.直接寫button標籤

獲取用戶輸入(輸入選擇上傳...)的標籤都必須有一個name屬性
這個name屬性就相似於字典的key,而標籤獲取到的用戶寫入的值就相似於字典的value

<input type="text" id="d1" name="username" value="默認值">

name就至關因而字典的key
value就是字典的值
獲取的用戶輸入都會被放入value屬性中

form表單傳文件的時候須要指定enctype參數

input標籤

input標籤就相似因而前端變形金剛

1.屬性type:

text:普通文本
password:密文不展現明文
date:日期
submit:觸發提交動做
button:普通按鈕沒有實際意義可是能夠經過js綁定事件實現自定義動做
reset:重置表單內容
radio:單選能夠經過checked控制默認選擇(當屬性值和屬性名相同的狀況下能夠簡寫 checked)
checked="checked"
checkbox:多選同上能夠設置默認值
file:獲取用戶上傳的文件
hidden:隱藏輸入框
file:文本選擇框

2.屬性說明:

name：表單提交時的「鍵」，注意和id的區別
value：表單提交時對應項的值
- type="button", "reset", "submit"時，爲按鈕上顯示的文本內容
- type="text","password","hidden"時，爲輸入框的初始值
- type="checkbox", "radio", "file"，爲輸入相關聯的值
checked：radio和checkbox默認被選中的項
readonly：text和password設置只讀, 推薦用disabled!!
disabled：全部input均適用,使之沒法修改,相較readonly推薦用它!!