html 图片 高度无效_HTML笔记（详细）
HTML的標簽分類
雙標簽：如<strong>標簽的內容</strong> 語法：<開始標簽> 標簽內容 </結束標簽><strong>我要變粗</strong> <head></head>...... 單標簽：<br/>單標簽都是功能性的標簽，例如換行等功能里面不需要添加內容 語法：<標簽名 /><br> <hr> ......HTML中的標簽（熟練）
用<>包裹的英文單詞h 系列的標簽 : 標題標簽
h1，h2，h3，h4，h5，h6
作用 : 給頁面上的文字加上標題的語義
代碼 : <h1>我就是h1標簽</h1>
效果 : h1，h2，h3，h4，h5，h6 將文字放大、加粗、并且逐漸變小（h1標簽是最大的）
特點 : 獨占一行
注意 : h1 標簽盡量少用，太多不利于SEO(搜索引擎優化) 。 一般h1 都是給文章的標題或者 logo使用。
p 標簽 : 段落標簽
作用: 給頁面上的一段文字加上段落的語義
代碼: <p>這是段落</p>
特點：頁面上的一個段落，單獨占一行，并且與上下內容之間存在距離。
hr 標簽：水平線標簽
作用: 在頁面上顯示一條橫線
代碼: <hr />
br 標簽：換行標簽
作用：強制換行（代碼中換行無效）
代碼：<br />
(4組)文本格式化標簽
作用:
- b: 加粗
- u: 下劃線
- i: 傾斜
- s: 刪除線
建議不要使用, 因為這些標簽沒有語義
作用:
- strong: 加粗
- ins: 下劃線
- em: 傾斜
- del: 刪除線
可以使用
語義: 起強調加強語氣作用
圖片標簽（重點）
img 標簽 ：圖片標簽
作用： 在頁面中顯示一張圖片
代碼： <img src="圖像URL" />
特點： 就是顯示圖片
屬性：
- src：圖片顯示的路徑（必須）
- alt：如果圖片加載不出來，會顯示這個屬性中的文字
- title：介紹這張圖片
- width：圖片的寬度
- height：圖片的高度
兩個都設可能會變形，所以一般我們只設一個。
路徑問題（難點）
當前文件找目標文件的過程[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-1Teq5brB-1602818986804)(mdImg/%E5%9C%B0%E5%9B%BE.PNG)]
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-CdDuoqgx-1602818986807)(mdImg/%E6%96%87%E4%BB%B6%E8%B7%AF%E5%BE%84-1535340133797.PNG)]
絕對路徑
用的較少，可移植性差帶有盤符的路徑: C:UsersziyueDesktop代碼01.jpg
相對路徑
用的很多，可移植性很好同級目錄
如果頁面與圖片同一級目錄，直接寫目標文件的名字（類比如我們倆都在大廳）
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-xaeTs5fK-1602818986809)(mdImg/path-01.png)]
<img src="2.jpg"> 或者 <img src="./2.jpg">下級目錄
下級目錄：如果圖片在同級目錄image文件夾下
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-InS5x9hj-1602818986810)(mdImg/path-02.png)]
<img src="image/1.jpg">步驟：
上級目錄
上級目錄：如果圖片在頁面的上一級目錄
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-KeDVDDXK-1602818986811)(mdImg/path-03.png)]
<img src=”../2.jpg” >步驟：
總結：
- 通過文件夾名 / 可以來到下一級目錄，通過../ 可以來到上一級目錄
- 一般開發中用的最多的是相對路徑，因為相對路徑的可移植性要強。（我發給你，你能看~）
鏈接標簽（重點）
a 標簽 (Anchor ) : 超鏈接（錨）
超鏈接在頁面中起到跳轉或定位的作用（超鏈接、錨鏈接、a鏈接、a標簽）a標簽的跳轉功能
作用: 可以從一個頁面跳轉到另一個頁面
代碼: <a href="跳轉目標" target="目標窗口的彈出方式">文本或圖像</a>
效果：
注意：
a 標簽的屬性
- **href：**a 標簽跳轉的目標地址（路徑）
- 外部鏈接（互聯網上）需要添加 http:// www.baidu.com
- 內部鏈接（文件夾中）直接鏈接頁面的路徑即可 比如 < a href="index.html"> 首頁 </a >
- **target：**用于指定鏈接頁面的打開方式
- _self ：在當前頁面，進行跳轉
- _blank : 保留原始頁面，再進行跳轉
- 相關標簽 ：
base 標簽：
**作用：**可以為頁面上所有的a標簽設置跳轉的方式（書寫位置：base標簽一般放在titile標簽下面）
統一設置頁面中所有a標簽的跳轉方式
a 標簽的其他用法
- 可以不跳轉 (不寫路徑其實會刷新頁面！刷新也不要哦~)
- href="#"
- 項目中沒有確定鏈接目標時，通常將鏈接標簽的href屬性值定義為“#”，表示該鏈接暫時為一個空鏈接
- 在項目中起到站位的作用
- 可以進行下載（一般不用，看不到進度條，配合Js才能看到進度條）
- 當路徑指向的目標文件是瀏覽器打不開的文件時，瀏覽器會默認下載下來。
- 當路徑指向的目標文件是瀏覽器可以打開的文件時，瀏覽器會打開。
a標簽的定位功能（快速定位）
a標簽可以快速定位到當前頁面或者其他頁面的目標內容（百度百科）在當前頁面進行定位
步驟：
<p id="mao">我是一只貓</p>
<a href="#mao">吸貓大法</a>
在跳轉的頁面進行定位
步驟：
<p id="mao">我是一只貓</p>
<a href="目標文件路徑#mao">吸貓大法</a>
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-hsamkacC-1602818986812)(mdImg/搖頭貓.gif)]
結構中每個標簽的含義（了解）
DOCTYPE : 文檔類型
作用： 用來定義文檔類型（告訴瀏覽器，使用哪種規范去解析html頁面）
**位置：**文檔的最前面的位置
**規范：**HTML 或 XHTML 規范
**html:xt ：**XHTML規范，已經淘汰了， 一些特別老的網站會有，知道即可
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">html:5 ： HTML5規范，非常的簡潔
<!DOCTYPE html>html 標簽
**作用：**所有html中標簽的一個根節點（老祖宗）
**lang：**用來設置當前頁面的語言（標簽的語言、對比易語言）
<html lang="en"> </html>en-英文 zh-中文 英文的意思并不是告訴瀏覽器，我們這就是純英文的，而且告訴瀏覽器我們的內容以英文為主，提高瀏覽器的渲染性能head 標簽
作用：用于存放網頁的配置標簽和引入文件的標簽
title、meta、base、style、script、link注：在head標簽中我們必須要設置的標簽是title, 其他可有可無body 標簽
**作用：**頁面在的主體部分，用于存放頁面中的html標簽
p、h、a、b、u、i、s、em、del、ins、strong、imgmeta 標簽
**作用：**設置網頁的元信息
**注意：**meta中設置的所有的內容在頁面都不會顯示, 在其中可以設置編碼格式、樣式、關鍵字等等
設置字符集（編碼格式）：
<meta charset="UTF-8">Charset（字符集的格式）：UTF-8最常見的3種字符集（字典）：
- UTF-8：國際化的字典，字體庫，收錄是全世界所有的語言中的文字
1漢字 = 3個字節 - GBK：收錄了大陸漢字，還加了港澳臺的文字-》ANSI（中國）
1個漢字= 2個字節 - GB2312：收錄了大陸漢字
**約定：**將來我們在整個學習過程中都用utf-8（與國際接軌）
title 標簽
**作用：**讓頁面擁有一個屬于自己的標題。
**注意：**title中的文本在 seo 中占有很大的權重，不能亂寫
SEO與標簽語義化（了解）
SEO : 搜索引擎優化
Search Engine Optimization寫網頁的目的-》用戶的習慣-》用戶的結果-》怎樣排名靠前-》seo
作用：用來優化網站，使用網站在搜索引擎上的排名靠前
百度是如何收錄一個網站的信息的呢？百度自己寫的一個程序來收錄每個網站的信息。怎樣提升網站的SEO（記憶）
- 花錢買排名
缺點：燒錢。
優點：效果杠杠的 - 將頁面做成靜態頁面（html后綴）
- 發外鏈（類似于廣告）
- 標簽語義化（語義化規范）
在合適的地方使用合適的標簽
標簽語義化的應用：每個html標簽都有屬于自己的語義，有使用標簽時候要一定要了解每個標簽的語義，合理使用。
標簽語義化的好處
在合適的地方使用合適的標簽（比如title和h1）列表（熟練）
無序列表 ul （Unordered List）
一列沒有順序的列表（用的最多）**作用：**顯示一列沒有排列順序的數據
**語義：**一組沒有順序的數據
代碼：
<ul><li>列表項1</li><li>列表項2</li><li>列表項3</li>...... </ul>注意：
- 無序列表中的數據沒有先后順序之分
- <ul></ul> 中只能嵌套<li></li> ，不能放其他標簽或者文字
- <li></li> 標簽中可以嵌套任意標簽（嵌套ul都可以）
有序列表 ol（了解）
一列有順序的列表（用的很少）作用：顯示一列有順序的數據
語義：一組有順序的數據
<ol><li>列表項1</li><li>列表項2</li><li>列表項3</li>...... </ol>注意：
- 有序列表中的數據有先后順序之分
- <ol></ol> 中只能嵌套<li></li> ，不能放其他標簽或者文字
- <li></li> 標簽中可以嵌套任意標簽（ul都可以）
現在一般情況下ul標簽用的比較多，ol標簽用的比較少（關鍵看語義，和樣式無關）。
自定義列表 dl（了解）
一列格式自定義的列表（幾乎不用）[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-um7pcoZK-1602818986812)(mdImg/mi.fw.png)]
作用：顯示一列數據，格式自己定義
dt : 標題dd : 列表正文
代碼：
<dl><dt>小標題</dt><dd>小標題的解釋1</dd><dd>小標題的解釋2</dd> </dl>注意：
1.dl里面只能放dt或者dd
2.dt/dd里面可以放任意的標簽
HTML中的特殊字符（記憶）
有時候需要在頁面中顯示空格、<、>等特殊字符HTML的空格合并現象
在HTML代碼中同時出現多少個空格、縮進、換行。最后瀏覽器只會解析出一個空格顯示合并現象案例
女孩：寶貝，靠近點~男孩：darling，我離不開你~ 拆了他們！**總結：**html代碼中對空格、縮進、換行不敏感，如果同時出現多個空格、縮進、換行, 頁面只會把它們當做一個空格來解析
html 中特殊字符有對應的 轉譯符 :
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-UuO6pxOx-1602818986813)(mdImg/zifu.png)]
表格table（難點）
將數據以表格的形式在網頁中展示感知表格相關標簽： <table></table> : 代表 表格 <tr></tr> : 代表一行 (row : 行 ) <td></td> : 代表一個標準單元格創建表格
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-OqWDpq3H-1602818986814)(mdImg/%E8%A1%A8%E6%A0%BC.png)]
代碼：
<table><tr><td>單元格</td><td>單元格</td></tr><tr><td>單元格</td><td>單元格</td></tr> </table>表格的屬性
雖然我們可以使用table中的標簽來設置標簽的一些樣式，但是最好不要用，因為將來凡是與樣式相關內容都是由css來設置的
表格中的其他標簽
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-mQSl4axA-1602818986815)(mdImg/%E5%90%88%E5%B9%B6.PNG)]
總結：
注意：
- <tr></tr>中只能嵌套<td></td>或者<th></th>
- <td></td>標簽像一個容器，可以容納所有的元素
合并單元格 (左上原則)
上下合并------》跨行合并：屬性: rowspan=“合并的個數”------》留住最上，刪除其他左右合并------》跨列合并：屬性: colspan=“合并的個數”-------》留住最左，刪除其他
1.確定合并哪幾個單元格
2.利用左上原則，確定保大保小
3.確定跨行（rowspan）還是跨列合并（colspan）
步驟：
合并單元格練習:
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-F7Ex4lKA-1602818986815)(mdImg/%E5%90%88%E5%B9%B6%E5%8D%95%E5%85%83%E6%A0%BC%E7%BB%83%E4%B9%A0.PNG)]
**其實：**在早期的網站開發中，表格的使用非常的泛濫
表單系列標簽（重點）
表單的目的是收集用戶信息注冊頁面
有一種生物叫做后端
input (輸入框系列) 基本表單控件
先簡單的過一遍~<input type="text">單標簽、type：用于指定不同的控件類型文本框 text 、 密碼框 password
昵稱：<input type="text" value="小姐姐" name="nicheng" maxlength="6"> 密碼：<input type="password" name="password" maxlength="6">注意：
- value ：用戶輸入的值（提前在標簽設置好就是默認值）
- name：告訴后端對應的值的含義。后端接收到的格式：name的屬性值=value的屬性值
拓展：頁面中的信息需要傳給后臺服務器，但是直接發一個值（value）過去，后端不知道是什么，所以需要加上一個屬性name 代表數據的含義。
后端接收的數據結構為： name屬性值=value屬性值 這樣后端就知道傳過去的是什么（前后端交互在就業班會重點說明，基礎班不會使用） - maxlength：設置表單的最大輸入值
小bug ：如果是密碼輸入框，type="password" 的password不能拼錯且后面不能有空格，否則瀏覽器會認為type屬性設置無效，會以默認的text方式顯示，此時不會密文，相當于是文本框。
單選框 radio 、多選框 checkbox
單選框 radio
性別 : <input name="sex" type="radio" value="nan"> 男 <input name="sex" type="radio" value="nv" checked> 女注意：
- 通過name進行分組（有相同name屬性值的單選框是一組的，一組中同時只能有一個選中），并且告訴后臺傳的是什么
- 在實際工作中，需要寫value值
- checked 屬性設置默認選中，屬性值省略。
多選框 checkbox
愛好：<input type="checkbox" name="hobby" value="code" checked>敲代碼<input type="checkbox" name="hobby" value="nosleep" checked>熬夜<input type="checkbox" name="hobby" value="game">玩游戲- 通過name進行分組，并且告訴后臺傳的是什么
- 需要寫value值
- checked屬性設置默認選中，屬性值省略
文件選擇框 file
<input type="file"> 單文件上傳 <input type="file" multiple> 多文件上傳注意：
- multiple設置一次同時可以選中多個文件（ctrl+選中/鼠標框選）屬性值可以省略
- 現在html只負責結構，之后真正的上傳相關功能通過js來實現
表單按鈕
需要配合form表單一起使用說白了就是用form標簽把表單標簽都包起來~
提交按鈕submit
將表單的內容提交給后端<input type="submit">重置按鈕reset
將表單的內容重置為默認值<input type="reset">普通按鈕button
之后配合js使用<input type="button"> // 配合后面的js使用圖片按鈕image
功能相當于提交按鈕，樣式為一張圖片<input type="image" src="a.jpg">select 下拉菜單
出生年月：<select name="year"><option value="1996">1996</option><option value="1997">1997</option><option value="1998">1998</option><option value="1999" selected>1999</option></select>注意：
- name屬性設置在select標簽上（告訴后臺傳過去的是什么）
- value屬性設置在option上，表示選中的值
- selected屬性設置默認選中，屬性值省略
textarea文本域
用于輸入大段文字<textarea cols="規定文本區內的可見寬度" rows="規定文本區內的可見行數">文本內容 </textarea>**注意：**不能通過設置value使文本域有默認值，無效！
Form 表單域
form標簽用于定義表單域，將各種表單包裹起來，用于表單提交<form action="url地址">各種表單控件 </form>**屬性：**action 用于指定處理請求的服務器URL地址（就業班的內容）
label 標簽（記憶）
示例 : 新浪網頁注冊作用：讓文本和表單元素綁定到一起（結拜兄弟）
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-CBARlNXR-1602818986816)(F:/前端/筆記/mdImg/label.jpg)]
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-LLjixZIi-1602818986816)(F:/前端/筆記/mdImg/貓哥.jpg)]
用法：
- 寫 for ，值為 id，規定 label 與哪個表單元素綁定
- 不寫 for，默認綁定 label 內的表單控件
沒有語義的布局標簽（記憶）
div和span是沒有語義的標簽，一般用于頁面布局使用（項目中會經常使用到）div：div盒子
<div>長亭外</div><div>古道邊</div>特點：
- width由屏幕寬度決定（獨占一行）height自適應（由內容撐開）
- 默認占一整行（一行只能顯示一個）
頁面布局中用的最多~
span
<span>芳草碧連天</span>特點：
- width、height由內容來決定（都由內容撐開）
- 一行里面可以顯示多個
除了沒有語義的標簽可以用于布局，還有一些有語義的標簽可以用于布局
HTML5新標簽與特性（了解）
就業班會有專門的H5C3的課，來學習html5的一些新標簽和屬性HTML5新增語義標簽（記憶）
- 頭部：header標簽
header：定義網頁的頭部---》頭部語義 + div - 導航：nav標簽
nav：定義網頁的導航---》導航語義 + div - 底部：footer標簽
footer：定義網頁的底部---》底部語義 + div - 側邊欄：aside標簽
aside：定義網頁的側邊---》側邊語義 + div - 區塊：section標簽
section：定義網頁的區塊---》區塊語義 + div - 文章：article標簽
article：定義網頁的文章---》文章語義 + div
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-R7dXEVgc-1602818986817)(F:/前端/筆記/mdImg/h5新標簽.png)]
**注意：**html5標簽有兼容性問題（老瀏覽器沒效果），所以為了客戶群多，會少用。
其他表單新屬性(記憶)
多媒體標簽—audio 音頻
在網頁中播放音頻（聲音）屬性：
- controls 是否顯示播放控件
- autoplay 自動播放（有兼容性問題）
- loop 循環播放（有兼容性問題）
兼容性處理：
<audio controls autoplay loop><source src="1.mp3">您的版本過低,請升級高級版本 <a href="http://www.itcast.cn/">點擊下載</a> </audio>多媒體標簽—video 視頻
在網頁中播放視頻屬性（和audio類似）：
- controls 是否顯示播放控件
- autoplay 自動播放（有兼容性問題）（muted）
- loop 循環播放（有兼容性問題）
**區別：**可以設置寬高，并且顯示視頻
**注意：**寬度和高度只需要設置一個，另一個會根據等比例縮放，如果同時指定兩個，視頻的實際寬高會以小的為基準（類似圖片）
原文鏈接：
https://blog.csdn.net/weixin_43732485/article/details/109113288?utm_medium=distribute.pc_category.none-task-blog-hot-10.nonecase&depth_1-utm_source=distribute.pc_category.none-task-blog-hot-10.nonecase&request_id=?blog.csdn.net作者：KC++.GUO
出處：CSDN
總結
以上是生活随笔為你收集整理的html 图片 高度无效_HTML笔记（详细）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MySql和Oracle数据库的区别？
- 下一篇： 前端三大框架