HTML系统学习（1）
1）視頻1開發工具：主要介紹了一些常見的瀏覽器（Chrome、Firefox、IE、Edge等）以及一些寫代碼的軟件（vs code、sublime、HBuilder、Dreamweaver，Notepad++），介紹了必要的切圖軟件Photoshop
2）視頻2瀏覽器內核:介紹了網頁主要是由文字、圖像、超鏈接、音頻、視頻及flash等元素組成
3）視頻3Web標準
4）視頻4：HTML骨架
HTML不是一種編程語言，而是一種描述網頁的標記語言
5）視頻5：HTML標簽分類
雙標簽：<>內容</>（可以理解成一對夫妻，/是關閉符）
單標簽：
形式的（/是關閉符）,非常少，也叫空標簽，是指用一個標簽符號即可完整的描述整個功能的標簽
標簽關系分成兩種：
① 嵌套關系：
② 并列關系：
<head></head> <body></body>在HBuilder中創建文件后，直接敲上一行代碼：html:5接著再按一下tab鍵就可以實現（或者是更為暴力的是直接寫上!接著再按一下tab鍵）下面的一大堆亂七八糟的東西
<!DOCTYPE html> <html lang="zh"> <head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title> </head> <body></body> </html>6）視頻6：文檔類型及字符集
7）視頻7：排版標簽
注意：p標簽一行只能放一個，div也是
8）視頻8：div span
Div span是沒有語義的，是我們網頁布局主要的2個盒子（div是division的縮寫，意思是分割，分區 span是跨度、跨距、范圍的意思）
（布局CSS+div）
Span可以集中在一行
9）文本格式化標簽
前面的沒有強調意義的之類的標簽常用作是小部件
10）圖像標簽：單標簽
①<img src = “圖像URL”/>語法中src屬性用于指定圖像文件的路徑和文件名，是img標簽的必須屬性
③ alt圖像（用于無法打開圖片的情況，用于解釋圖片是什么方面的信息）
④ 帶有title的圖像：
<img src = “2.jpg” title = “劉德華的圖像”/>鼠標懸停時顯示的內容
⑤ 帶有寬度的照片
⑥ 帶有邊框的照片：
<img src = “1.jpg” title = “劉德華的圖像” border = “2px”/>
11）鏈接標簽（單詞anchor的縮寫，表示錨的意思），在HTML中創建超鏈接只需用標簽環繞被鏈接的對象
文本或圖像
(target用于指定鏈接頁面的打開方式，取值有self和blank兩種方式，其中self是默認值，blank代表的是打開新頁面)
我的作品地址
12)錨點定位：（通過創建錨點鏈接，用戶能夠快速定位到目標內容）
創建錨點鏈接分為兩步：
使用”a href = “#id名”創建鏈接文本
使用相應的id名標注跳轉的位置
個人生活
<id = “live”>
13)base標簽（可以設置整體鏈接的）在之間插入這個單標簽
這樣就可以讓這個頁面上的鏈接地址都以另一個窗口打開14）特殊字符：
----?nbsp;特殊字符nbsp;nbsp;----
其中這個 有幾個就代表有幾個空格
我們的段落標簽語法格式是：
段落
（但是會發現這個會分成兩行）如果只需要一行出現（怎么把這個<>顯示出來）
我們的段落標簽語法格式是：<p>段落</p>
版權符號：?
15）注釋標簽：
一些便于理解但是并不要在瀏覽器的顯示
16）相對路徑：
分為相對路徑和絕對路徑
其中相對路徑分為三種情形：
同級和上一級以及上兩級的分法
17）無序列表的使用及其注意事項：
列表的最大特點就是整齊、整潔、有序
無序列表ul（各個列表項之間沒有順序級別之分，是并列的）
注意事項：
- 標簽，不能放別的標簽
但是在 - 里面是可以放其他的標簽的
<h3>你喜歡的水果</h3>
<ul><li>蘋果</li><li>香蕉</li><li>桃子</li><li><p>水果蔬菜</p></li>
</ul>
18）有序列表
<ol><li>美國</li><li>英國</li><li>中國</li><li>俄羅斯</li> </ol> 里面也只能放li標簽的，
有序列表（ol）即為有排列順序的列表19）四大名著案例：
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>第一天21四大名著案例</title><base target="_blank" /><!--這里使用base盒子的作用就是為了打開鏈接的時候打開另一個界面--></head><body><h1>中國四大名著</h1><ul><li><img src="https://img01.sogoucdn.com/v2/thumb/resize/w/120/h/120/zi/on/iw/90.0/ih/90.0/crop/x/0/y/0/w/120/h/120?t=2&url=http%3A%2F%2Fimg03.sogoucdn.com%2Fapp%2Fa%2F100520043%2F20170711193732&appid=200524" alt="《水滸傳》"/>《水滸傳》<p>《水滸傳》是中國歷史上第一部用古白話文寫成的歌頌農民起義的長篇章回體版塊結構小說，以宋江領導的起義軍為主要題材，通過一系列梁山英雄反抗壓迫、英勇斗爭的生動故事，暴露了北宋末年統治階級的腐朽和殘暴，揭露了當時尖銳對立的社會矛盾和“官逼民反”的殘酷現實。</p></li><br /><li><img src="https://img03.sogoucdn.com/v2/thumb/resize/w/120/h/120/zi/on/iw/90.0/ih/90.0/crop/x/0/y/0/w/120/h/120?t=2&url=http%3A%2F%2Fimg04.sogoucdn.com%2Fapp%2Fa%2F100520043%2F20170711193639&appid=200524" alt="《三國演義》" />《三國演義》<p>《三國演義》是綜合民間傳說和戲曲、話本，結合陳壽的《三國志》、范曄《后漢書》、元代《三國志平話》、和裴松之注的史料，以及作者個人對社會人生的體悟寫成。現所見刊本以明嘉靖本最早，分24卷，240則。清初毛宗崗父子又做了一些修改，并成為現在最常見的120回本。</p></li><br /><li><img src="https://img03.sogoucdn.com/v2/thumb/resize/w/120/h/120/zi/on/iw/90.0/ih/90.0/crop/x/0/y/0/w/120/h/120?t=2&url=http%3A%2F%2Fimg01.sogoucdn.com%2Fapp%2Fa%2F100520043%2F20170711193556&appid=200524" alt="《西游記》" />《西游記》<p>西游記以民間傳說的唐僧取經的故事和有關話本及雜劇（元末明初楊訥作）基礎上創作而成。</p></li><li><img src="https://img04.sogoucdn.com/v2/thumb/resize/w/120/h/120/zi/on/iw/90.0/ih/90.0/crop/x/0/y/0/w/120/h/120?t=2&url=http%3A%2F%2Fimg02.sogoucdn.com%2Fapp%2Fa%2F100520043%2F20170711193435&appid=200524"alt="《紅樓夢》" />《紅樓夢》<p>《紅樓夢》是一部章回體長篇小說。早期僅有前八十回抄本流傳，八十回后部分未完成且原稿佚失。原名《脂硯齋重評石頭記》。程偉元邀請高鶚協同整理出版百二十回全本，定名《紅樓夢》。亦有版本作《金玉緣》。</p></li></ul></body> </html>20）自定義列表:
<dl><dt>名詞1</dt><dd>名詞1解釋1</dd><dd>名詞1解釋2</dd>…<dt>名詞2</dt><dd>名詞2解釋1</dd><dd>名詞2解釋1</dd>…<dl>
自定義列表常用于對術語或名詞進行解釋和描述，定義列表的列表項前沒有任何項目符號，基本語法如下：截圖效果分別如下：
第一天，聽視頻聽了好久，而且在例子中我感覺到好多東西沒有用到，比如那個特殊字符。
有想要筆記和源代碼的同學可以打開百度網盤：（百度網盤維護中，無法進行無提取碼的分享）
鏈接：https://pan.baidu.com/s/1Qf1lV8852fRPO3Mqx2E1cg
提取碼：jf2p
總結
以上是生活随笔為你收集整理的HTML系统学习（1）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 小白的jquery学习之路之04效果新闻
- 下一篇： HTML CSS 布局