《HTML菜鸟教程》学习
生活随笔
收集整理的這篇文章主要介紹了
《HTML菜鸟教程》学习
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
學習資料：《HTML菜鳥教程》
學習目標：熟悉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是同名的，應該是同名功能不同
- 常見的標簽和一些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ù)的空格，只會當做一個空格
- 文本格式化標簽
- strong 和 b 等價，都是加粗。出現(xiàn)的原因，是在一些場合，strong和em有加重語氣
- em和i等價，都是斜體 <!DOCTYPE html> <html><head><!-- <meta charset = "utf-8"> --><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>預格式文本</pre><br><!-- HTML 引文, 引用, 及標簽定義 --><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ù)不顯示在瀏覽器上，但會被瀏覽器解析。可以作為引擎搜索的關鍵詞
-
<script>用于加載js腳本語言
-
- <a>?href必須得加http/https，否則鏈接失效。屬性定義在標簽內(nèi)，標簽之間，代表超鏈接的名字 <a href = 'https://www.BAidu.com' target = "_blank"> 百度鏈接 </a>
HTML CSS【以內(nèi)聯(lián)樣式舉例】
- CSS生效的三種方法
- 內(nèi)聯(lián)樣式：給HTML的style屬性設值
- 內(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專欄里會更具體地學習，這里但當涉獵
HTML圖像
<img src = "http://www.runoob.com/images/pulpit.jpg" alt="haha" width="900px" height="900px" >- <img>沒有閉合標簽
- src是url
- alt是圖片加載失敗后的tips
- width和height分別代表寬高（px）
- <area></area>標簽，可以定義圖片可點擊區(qū)域以及跳轉(zhuǎn)頁面
HTML表格
<table border="1"><th> 表頭1 </th><th> 表頭2 </th><tr><td>(1,1)</td><td>(1,2)</td></tr><tr><td>(2,1)</td><td>(2,2)</td></tr> </table>- <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;">版權 ? 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 loading="lazy" src="http://www.baidu.com" width="2000" height="2000"></iframe>- iframe框架可以在瀏覽器中同時顯示多個頁面
HTML腳本
<script>document.write("<p> this is a paragraph </p>"); </script> <noscript>sorry,your browser does not support js! </noscript> <p id="oo"> hello !!!!</p> <script>function MyOnclickFunc(){document.getElementById("oo").innerHTML = "click change the text";} </script> <button type = "button" onclick = "MyOnclickFunc()" ></button>- script用于定義客戶端腳本語言，例如JS
- <noscript>用于當瀏覽器禁止腳本語言時候的 try out
- 通過button，指定onlick屬性值，可以觸發(fā)JS事件
HTML字符實體
- HTML中某些字符是預留的。 就像C++中，有些字符是預留字符一個道理
- 表達方式：&entity_name? ? &#entity_number
總結
以上是生活随笔為你收集整理的《HTML菜鸟教程》学习的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 斐波那契数列——递归与非递归算法时间复杂
- 下一篇： 2017年html5行业报告,云适配发布