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

HTML

《HTML菜鸟教程》学习

發(fā)布時間：2024/1/1 HTML 41 豆豆

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

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

學(xué)習(xí)目標：熟悉HTML的語法即可

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

進度：2021.6.1 完成HTML的語法熟悉

HTML簡介

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

代碼解析

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

什么是HTML？

超文本標記語言 Hyper Text Markup Language
不算嚴格的編程語言，沒有if-else

HTML標簽（元素）

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

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

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

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

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

HTML圖像

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

HTML表格

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

HTML列表

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

有序列表與無序列表

HTML布局

<div id="container" style="width:500px"><div id="header" style="background-color:#FFA500;"><h1 style="margin-bottom:0;">主要的網(wǎng)頁標題</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>直接整個塊，然后div里的屬性可以影響里面的元素
通過div標簽和float屬性進行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標簽中，type屬性的常見類型
- password
- text
- radio：單選，name相同只有一個會被勾選
- checkbox
- 通過action可以將數(shù)據(jù)發(fā)送到y(tǒng)our html path

HTML框架

iframe框架可以在瀏覽器中同時顯示多個頁面

HTML腳本

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

HTML字符實體

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

總結(jié)

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

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

上一篇：斐波那契数列——递归与非递归算法时间复杂
下一篇： HTML5+CSS期末大作业：个人主页介