當(dāng)前位置：首頁(yè) > 前端技术 > HTML >内容正文

HTML

《HTML菜鸟教程》学习

發(fā)布時(shí)間：2024/1/1 HTML 27 豆豆

生活随笔收集整理的這篇文章主要介紹了《HTML菜鸟教程》学习小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

學(xué)習(xí)資料：《HTML菜鳥教程》

學(xué)習(xí)目標(biāo)：熟悉HTML的語(yǔ)法即可

開發(fā)環(huán)境：VSCode + Chrome + Plugin:Open In Default Browser

進(jìn)度：2021.6.1 完成HTML的語(yǔ)法熟悉

HTML簡(jiǎn)介

<!DOCTYPE html> <html><head><meta charset = "utf-8"><title> HTML教程 Fighting!!! </title></head><body><h1> 標(biāo)題 </h1><p> 段落 </p></body> </html>

代碼解析

<!DOCTYPE html> 聲明是HTML5文檔。有助于瀏覽器正確顯示內(nèi)容，告知瀏覽器用了哪種HTML版本，doctype不區(qū)分大小寫
<html> 是HTML頁(yè)面的根元素
<head>包含文檔的meta data和title data
<body>包含元素的可見內(nèi)容

什么是HTML？

超文本標(biāo)記語(yǔ)言 Hyper Text Markup Language
不算嚴(yán)格的編程語(yǔ)言，沒有if-else

HTML標(biāo)簽（元素）

帶尖括號(hào)的文本內(nèi)容，例如<html></html>
<p></p>

HTML標(biāo)簽和屬性（以key = "value" / 'value'?的形式出現(xiàn)）

大小寫不敏感，盡量采用小寫
常見的屬性
- class：為元素定義一個(gè)類
- id：元素的唯一id
- sytel：樣式
- title：額外的信息，但這個(gè)和標(biāo)簽title是同名的，應(yīng)該是同名功能不同
常見的標(biāo)簽和一些tips
- <a>?href必須得加http/https，否則鏈接失效。屬性定義在標(biāo)簽內(nèi)，標(biāo)簽之間，代表超鏈接的名字 <a href = 'https://www.BAidu.com' target = "_blank"> 百度鏈接 </a>
  - 如果是超鏈接名字里有雙引號(hào)，那必須最外層用單引號(hào)，例如：name='John?"ShotGun"?Nelson'
  - target可以代表打開的方式，_blank代表另起一頁(yè)
- <h1></h1>是最大的標(biāo)題，font標(biāo)簽的size為6是最大的字體。不要通過標(biāo)題來(lái)生成加粗/大號(hào)字體
- <hr>可以生成水平線
- <br>可以換行
- ?
- <p></p>會(huì)自動(dòng)在行位添加換行符
- 連續(xù)的空格，只會(huì)當(dāng)做一個(gè)空格
- 文本格式化標(biāo)簽
  - strong 和 b 等價(jià)，都是加粗。出現(xiàn)的原因，是在一些場(chǎng)合，strong和em有加重語(yǔ)氣
  - em和i等價(jià)，都是斜體 <!DOCTYPE html> <html><head><title> HTML教程 Fighting!!! </title></head><body><b>加粗！</b> <br><em>定義著重文字</em> <br><i>定義斜體</i><br><small>定義小號(hào)字</small><br><sub>下標(biāo)</sub><br><sup>上標(biāo)</sup><br><ins>插入字</ins><br><del>刪除字</del><br><code>計(jì)算機(jī)代碼</code><br><kbd>鍵盤碼</kbd><br><samp>計(jì)算機(jī)代碼樣本</samp><br><var>定義變量</var><br><pre>預(yù)格式文本</pre><br><abrr>定義縮寫</abrr><br><address>地址</address><bdo dir = "rtl">123456</bdo></body> </html>
- head中有許多標(biāo)簽
  - <title>在HTML頁(yè)面中是必須的
  - <base href = "xxx"> 如果其他地方的href沒value，就會(huì)用base的href-value
  - <link>用于鏈接到樣式表，有點(diǎn)像頭文件引用
  - <style>通過樣式來(lái)渲染HTML文檔
  - <meta>描述基本的元數(shù)據(jù)。元數(shù)據(jù)不顯示在瀏覽器上，但會(huì)被瀏覽器解析。可以作為引擎搜索的關(guān)鍵詞
  - <script>用于加載js腳本語(yǔ)言

HTML CSS【以內(nèi)聯(lián)樣式舉例】

CSS生效的三種方法
- 內(nèi)聯(lián)樣式：給HTML的style屬性設(shè)值
- 內(nèi)部樣式表：在HTML文檔<head>區(qū)，使用<style>元素來(lái)包含CSS（HTML全局）
- 外部引用：引用外部CSS文件【這種最好，外部引用，改變外部文件，可以改所有】
背景色，邊距，字體顏色 <p style = "color:red;margin-left: 20px;background-color: black;">哈哈</p>
列舉一些屬性
- font
- color
- font-size
- text-align：對(duì)齊方式
后面在CSS專欄里會(huì)更具體地學(xué)習(xí)，這里但當(dāng)涉獵

HTML圖像

<img>沒有閉合標(biāo)簽
src是url
alt是圖片加載失敗后的tips
width和height分別代表寬高（px）
<area></area>標(biāo)簽，可以定義圖片可點(diǎn)擊區(qū)域以及跳轉(zhuǎn)頁(yè)面

HTML表格

<table></table>實(shí)現(xiàn)表格
border屬性定義邊框大小
<th></th>代表表頭
<tr>代表一行
<td>代表一行中的某個(gè)數(shù)據(jù)
因?yàn)閠able是父元素，所以子元素所有的節(jié)點(diǎn)都有屬性border = 1

HTML列表

<body><ul><li>Coffee</li><li>Milk</li></ul><ol><li>Coffee</li><li>Milk</li></ol> </body>

有序列表與無(wú)序列表

HTML布局

<div id="container" style="width:500px"><div id="header" style="background-color:#FFA500;"><h1 style="margin-bottom:0;">主要的網(wǎng)頁(yè)標(biāo)題</h1></div><div id="menu" style="background-color:#FFD700;height:200px;width:99px;float:left"><b>菜單</b><br>HTML<br>CSS<br>JavaScript</div><div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:right;">內(nèi)容在這里</div><div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">版權(quán) ? runoob.com</div></div>

<table></table>表格不是布局工具
<div></div>直接整個(gè)塊，然后div里的屬性可以影響里面的元素
通過div標(biāo)簽和float屬性進(jìn)行HTML排版

HTML表單

<form>First name : <input type = "text" value="ee"><br>Password : <input type = "password"><br><input type = "radio" name ="sex" > Happy0<br><input type = "radio" name = "sex1"> Happy1<br><input type = "radio" name= "sex" > Happy2<br><input type="checkbox" > bick0 <br><input type="checkbox" > bick1 <br> </form><form name="input" action="your html path" method="get"><input type="text" name="usewerwerrddewrewrwr"><input type="submit" value="Submit"> </form>

input標(biāo)簽中，type屬性的常見類型
- password
- text
- radio：單選，name相同只有一個(gè)會(huì)被勾選
- checkbox
- 通過action可以將數(shù)據(jù)發(fā)送到y(tǒng)our html path

HTML框架

iframe框架可以在瀏覽器中同時(shí)顯示多個(gè)頁(yè)面

HTML腳本

script用于定義客戶端腳本語(yǔ)言，例如JS
<noscript>用于當(dāng)瀏覽器禁止腳本語(yǔ)言時(shí)候的 try out
通過button，指定onlick屬性值，可以觸發(fā)JS事件

HTML字符實(shí)體

HTML中某些字符是預(yù)留的。就像C++中，有些字符是預(yù)留字符一個(gè)道理
- 表達(dá)方式：&entity_name? ? &#entity_number

總結(jié)

以上是生活随笔為你收集整理的《HTML菜鸟教程》学习的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：斐波那契数列——递归与非递归算法时间复杂
下一篇： LAGT100型无线网关