前端菜鳥學習筆記①——HTML

時間 2020-05-20

標籤前端菜鳥學習筆記 html 欄目 HTML 简体版

原文原文鏈接

1、前言

　　這裏是剛開始學習前端的菜鳥，一名電子信息工程的準大四學生。由於學校教的東西實在是太多太亂，軟件硬件什麼都讓咱們學一點，又什麼都學不精，想找一份實習但看了一眼各家單位的招人要求以後，發現各類工做都能知足其中的一小部分要求但就是沒有一份能徹底達標，因此趁如今還不太晚，決定靠本身的力量自學前端。而後在網上查找了許多資料之後，首先明白了前端的基礎就是HTML、CSS和JS，因此要學也是先從學習HTML開始。php

2、HTML的基本組成

下面是我使用VS Code建立的一個什麼內容都沒有的HTMLcss

首先<!DOCTYPE html>申明瞭這是一個HTML5文檔html

而後文檔的基本信息都要寫在<head>裏面包括<meta>、<title>還有寫css用到的<style>，頁面的內用則是要放在<body>裏面。前端

<!DOCTYPE html>
<html lang="en">
<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>

3、行內元素、塊級元素和行內塊級元素

HTML的學習基本上是不難的，但要是說有什麼值得注意的地方的話就確定是行內元素和塊級元素相關的部分了。web

1.行內元素（如<span>）：

1.和其餘元素都在一行

  2.高度、寬度以及內邊距都是不可控的

  3.寬高就是內容的高度，不能夠改變

  4.行內元素只能行內元素，不能包含塊級元素

2.塊級元素（如<div>）：

1.老是重新的一行開始

  2.高度、寬度都是可控的

  3.寬度沒有設置時，默認爲100%

  4.塊級元素中能夠包含塊級元素和行內元素

3.行內塊級元素：

顧名思義就是綜合了行內元素和塊級元素的特色。框架

1.不自動換行

  2.可以識別寬高

  3.默認排列方式爲從左到右

4.切換和注意：

display:block　　//轉換爲塊級元素 display:inline　　//轉換爲行內元素 display:inline-block　　//轉換爲行內塊級元素 
//注1：行內元素沒法設置寬、高；margin、padding左右有效、上下無效 //注2：行內元素設置了position屬性或float屬性後屬性默認變成inline-block，能夠設置寬高

4、HTML速查列表

對於像我這樣的菜鳥來講，學習HTML並不困難，可是要記住裏面所有內容仍是不太現實，因此仍是須要一個速查列表方便記憶。這裏推薦菜鳥教程裏面的速查列表，能夠進入網頁直接右鍵打印下來保存在桌面，方便查閱。post

HTML 基本文檔

<!DOCTYPE html>
<html>
<head>
<title>文檔標題</title>
</head>
<body> 可見文本... </body>
</html>

基本標籤（Basic Tags）

<h1>最大標籤</h1>
<h2>.  .  .</h2>
<h3>.  .  .</h3>
<h4>.  .  .</h4>
<h5>.  .  .</h5>
<h6>最小標題</h6>

<p>這是一個段落-</p>
</br>(換行) </hr>(水平線) <!--這是註釋-->

文本格式化（Formatting）

<b>粗體文本</b>
<code>計算機代碼</code>
<em>強調文本</em>
<i>斜體文本</i>
<kbd>鍵盤輸入</kbd> 
<pre>預格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
 
<abbr> （縮寫） <address> （聯繫信息） <bdo> （文字方向） <blockquote> （從另外一個源引用的部分） <cite> （工做的名稱） <del> （刪除的文本） <ins> （插入的文本） <sub> （下標文本） <sup> （上標文本）

連接（Links）

普通的連接：<a href="http://www.example.com/">連接文本</a> 圖像連接： <a href="http://www.example.com/"><img src="URL" alt="替換文本"></a> 郵件連接： <a href="mailto:webmaster@example.com">發送e-mail</a> 書籤： <a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>

圖片（Images）

<img src="URL" alt="替換文本" height="42" width="42">

樣式/區塊（Styles/Sections）

<style type="text/css"> h1 {color:red;} p {color:blue;}
</style>
<div>文檔中的塊級元素</div>
<span>文檔中的內聯元素</span

無序列表

<ul>
    <li>項目</li>
    <li>項目</li>
</ul>

有序列表

<ol>
    <li>第一項</li>
    <li>第二項</li>
</ol>

定義列表

<dl>
  <dt>項目 1</dt>
    <dd>描述項目 1</dd>
  <dt>項目 2</dt>
    <dd>描述項目 2</dd>
</dl>

表格（Tables）

<table border="1">
  <tr>
    <th>表格標題</th>
    <th>表格標題</th>
  </tr>
  <tr>
    <td>表格數據</td>
    <td>表格數據</td>
  </tr>
</table>

框架（Iframe）

<iframe src="demo_iframe.htm"></iframe>

表單（Forms）

<form action="demo_form.php" method="post/get">
<input type="text" name="email" size="40" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Send">
<input type="reset">
<input type="hidden">
<select>
<option>蘋果</option>
<option selected="selected">香蕉</option>
<option>櫻桃</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea>
 
</form

實體（Entities）

&lt; 等同於 < &gt; 等同於 > &#169; 等同於 ©

5、總結

　　這是博主前端學習系列的第一篇文章，目前仍是新人因此原創的內容很少，大多都是對前人經驗的總結。總之HTML對於新人來講並不難，初學的話也沒必要要記不少，因此只是寫了一篇來總結，但基礎的部分最好仍是要認真學，學紮實一點。博主寫的時候css和js也已經初步看過一遍了，如內行元素那裏就是寫css的時候發現的。學習

　　學習的軟件我使用的是VS Code，VS體積小、方便快捷，還能夠下許多插件，但對於初學者來講也不須要下太多，總之我的感受是挺適合用來學習的。ui