博主從零開始學習HTML（入門基礎）

時間  2021-04-11
標籤 css html 小程序 瀏覽器 安全 服務器 網絡 ide oop post 欄目 HTML 简体版
原文   原文鏈接

目錄

從零開始學習HTML（入門基礎）

互聯網三大基石

  • HTTP協議
  • URL：統一資源定位符
  • HTML: 超文本標記語言

HTML的Head標籤中的經常使用元素

<!-- 告知瀏覽器使用何種字符集解析 -->
  <meta charset="UTF-8" />
  <!-- 定義關鍵字，讓搜索引擎可以經過關鍵字查詢到該網站 -->
  <meta name="keywords" content:"小程序,小星星" />
  <!-- 做者 -->
  <meta name="author" content:"小星" />
  <!-- 當前網頁的描述 -->
  <meta name="description" content:"小星星從零開始學HTML的描述" />

  <!-- 頁面3秒後跳轉到 https://cnblogs.com/ 頁面，不經常使用 -->
  <meta http-equiv="refresh" content:"3:https://cnblogs.com/" />

字體格式化標籤

<b>加粗字體</b>
  <strong>加粗字體</strong>
  <i>斜體字體</i>
  <em>斜體字體</em>
  <big>加大字體</big>
  <small>縮小字體</small>
  <sub>下標</sub>
  <sup>上標</sup>
  <del>刪除線字體</del>

字符實體，如下寫最經常使用的幾個

詳情能夠查看w3school的字符實體css

<  &lt;
  >  &gt;
 半角空格 &nbsp;
 全角空格 &emsp;

html經常使用標籤及解析

a標籤

<!-- 第一種，連接訪問外部連接 -->
  <a href="http://www.baidu.com">a標籤訪問外部連接，能夠打開百度</a><br><br>
  <!-- 訪問本地資源，能夠是絕對路徑，也能夠是相對路徑 -->
  <a href="index.html">a標籤訪問本地資源</a><br><br>
  <!-- 訪問錨點，定位到錨點位置 -->
  <a href="#site1">訪問錨點，定位到錨點位置</a><br><br>

  <!-- 定義錨點 -->
  <a name="site1">我是錨點1</>

  <!-- a標籤的target屬性 -->
  <a target="_blank">打開新的空白頁顯示</a>
  <a target="_self">在當前頁打開</a>

img標籤

<!-- 使用網絡上的圖片 -->
  <img  alt="圖片顯示不出來就會顯示這段文字" width="200px" src="http://1www.people.com.cn/NMediaFile/2021/0408/MAIN202104080934327952407170165.jpg" />
  <!-- 使用本地的圖片，相對路徑與絕對路徑都行 -->
  <img title="鼠標移動到圖片上會顯示的文字" alt="圖片顯示不出來就會顯示這段文字" width="20%" src="./img/1.jpg" />

媒體標籤audio和video

<!-- 
    src：音頻文件的地址
    autoplay：是否打開網頁自動播放
    loop：播放完第一次後重複播放
    controls:音頻控制器
  -->
  <audio src="./media/BLUE.mp3" autoplay="autoplay" loop="loop" controls="controls"></audio>

  <!-- 設置屬性時，若是屬性名與屬性值都一致，能夠直接單寫一個屬性名代替 -->
  <video height="300px;" controls loop autoplay src="./media/1.mp4"></video>
  
  <!--  標籤容許您規定可替換的視頻/音頻文件供瀏覽器根據它對媒體類型或者編解碼器的支持進行選擇 -->
  <audio controls>
     <source src="horse.ogg" type="audio/ogg">
     <source src="horse.mp3" type="audio/mpeg">
     Your browser does not support the audio element.
  </audio>

無序列表與有序列表

<!-- 有序列表 type: 1 阿拉伯數字 a小寫字母 A大寫字母 i小寫羅馬數字 I大寫羅馬數字 -->
 <ol type="i">
  <li>第1個li標籤</li>
  <li>第2個li標籤</li>
    <ul>
      <li>我是嵌套的無序列表的第1個li標籤</li>
      <li>我是嵌套的無序列表的第2個li標籤</li>
    </ul>
  <li>第3個li標籤</li>
 </ol>
  <!-- 無序列表 type：circle空心圓 disc實心圓 square實心小矩形 -->
 <ul type="square">
  <li>第1個li標籤</li>
  <li>第2個li標籤</li>
  <li>第3個li標籤</li>
 </ul>

定義列表 dl

<!-- 定義列表，dt通常用於放圖片，dd通常用於放文字 -->
  <dl>
    <dt>
      <a  target="_blank" href="http://www.baidu.com">
        <img width="300px" src="./img/1.jpg" />
      </a>	
    </dt>

    <dd>
      <font color="red">&yen;1000</font>
      <p>
        <a href="http://www.baidu.com">
          <font>快來買啊，很便宜，很是便宜</font>
        </a>
      </p>
    </dd>
</dl>

table表格標籤的基本使用

<!-- border定義邊框 cellspacing：規定單元格之間的空白 cellpadding定義單元格與邊框的距離 -->
		<table width="50%" align="center"  border="3px" cellpadding="5px" cellspacing="0px">
			<!-- <thead>表示表格的頭部 <tbody>表示表格的內容，若是沒寫瀏覽器會自動生成 <tfoot>表示表格的尾部 -->
			<thead bgcolor="beige">
				<tr>
					<!-- rowspan：佔用1列幾個單元格，colspan：佔用1行的幾個單元格 -->
					<th colspan="4">學生成績單</th>
				</tr>
				<tr>
					<!-- th標籤默認會有 text-align: center;以及font-weight: bold; 屬性 -->
					<th>姓名</th>
					<th>年齡</th>
					<th>班級</th>
					<th>成績</th>
				</tr>
			</thead>
			<tbody style="text-align: center;">
				<tr>
					<td rowspan="2">張三</td>
					<td>5</td>
					<td>明月1班</td>
					<td>20分</td>
				</tr>
				<tr>
					<td>5</td>
					<td>明月1班</td>
					<td>20分</td>
				</tr>
			</tbody>
			<tfoot bgcolor="aqua">
				<tr>
					<th>總人數</th>
					<th>2</th>
					<th>總分數</th>
					<th>40分</th>
				</tr>
			</tfoot>
		</table>

input輸入標籤的基本使用

如上代碼效果圖

<!--  -->
 <table border="1px" cellspacing="0px" align="center" width="35%">
			<thead bgcolor="aqua">
				<tr>
					<th colspan="2">基本信息表</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>
						<label for="username">帳號：</label>
					</td>
					<td>
						<input id="username" type="text" placeholder="請輸入帳號">
					</td>
				</tr>
				<tr>
					<td><label for="password">密碼：</label></td>
					<td><input id="password" type="password" placeholder="請輸入密碼"></td>
				</tr>
				<tr>
					<td>性別：</td>
					<td>
						<!-- 若是要讓radio單選框擁有互斥效果，須要設置相同的name屬性 -->
						<input type="radio" name="gender" checked="checked">男</input>
						<input type="radio" name="gender">女</input>
					</td>
				</tr>
				<tr>
					<td>愛好：</td>
					<td>
						<input type="checkbox" id="checkbox1" name="hobbys"><label for="checkbox1">足球</label></input>
						<input type="checkbox" id="checkbox2" name="hobbys"><label for="checkbox2">籃球</label></input>
						<input type="checkbox" id="checkbox3" name="hobbys"><label for="checkbox3">兵乓球</label></input>
						<input type="checkbox" id="checkbox4" name="hobbys"><label for="checkbox4">羽毛球</label></input>
					</td>
				</tr>
				<tr>
					<td>請選擇照片：</td>
					<td><input type="file"></td>
				</tr>
				<tr>
					<td>我的簡介：</td>
					<td><textarea name="personal" style="height: 50px;" placeholder="請介紹如下你本身"></textarea></td>
				</tr>
				<tr>
					<td>籍貫</td>
					<td>
						<!-- multiple屬性：一次性顯示全部的option選項 -->
						<select name="myFrom">
							<option>深圳</option>
							<option>上海</option>
							<option>北京</option>
							<option selected="selected">-請選擇省份-</option>
						</select>
					</td>
				</tr>
			</tbody>
		</table>

form標籤的基本使用

<!-- 
    form表單，用於提交用戶數據到服務端
    表單提交的數據必須擁有name屬性，不然不會被提交。提交的數據是該標籤的value屬性。
    action：提交的服務器地址
    method：指定提交方式，分別有get與post。
    get：經過地址欄提交數據，數據不安全。提交的數據大小有限制。只能提交文本數據。
    post：經過請求體提交數據，數據相對安全。理論上無數據大小限制（服務端可限制）。能夠提交任意類型的數據。
  -->
  <form action="http://www.baidu.com" method="post">
    <input name="username" type="text" />
    <button type="submit">提交按鈕</button>
    <button type="reset">重置，點我可清空全部輸入框</button>
  </form>

iframe標籤

<!-- 若是須要經過頁面上的a標籤讓iframe中的內容切換，則須要爲iframe定義一個name屬性，而且a標籤的target寫入該name屬性 -->
  <a target="iframe1" href="http://www.baidu.com">百度</a>
  <!-- iframe標籤，在當前頁面中再打開另外一個頁面 -->
  <iframe name="iframe1" src="這裏能夠放本地html路徑，也能夠放網絡上的html路徑" width="500px" height="400px"></iframe>

行內元素與塊級元素的區別

行內元素：顯示在頁面一行，不能使用盒子模型，不必定能設置寬高
  塊級元素：單獨佔用一整行，可使用盒子模型

  行內元素 轉換爲 塊級元素：display: block；
  塊級元素 轉換爲 行內元素：display: inline;

CSS的三種引入方式以及優先級

一、行內式，指樣式卸載標籤內
  <a href="" style="color: #FF0000;"></a>
  二、內嵌式，寫一堆style標籤在head標籤內，而後使用選擇器對頁面樣式進行修改
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    </style>
  </head>
  三、外鏈式，寫在head標籤中，引入外部css樣式
  <link rel="stylesheet" href="css/font.css">

CSS的經常使用選擇器

id選擇器：#idname{}
  class選擇器： .classname{}
  標籤選擇器：  例如選擇全部span標籤：span{}
  屬性選擇器，例如選擇input中type爲text的： input[type=text]{}
  層級選擇器，選擇id爲myid的子元素中的div： #myid div{}
  分組選擇器，選擇多個標籤，例如： #id1,#id2,.class1 {}
  僞類選擇器：
    /* 未訪問的連接 */
    a:link {
      color: #FF0000;
    }

    /* 已訪問的連接 */
    a:visited {
      color: #00FF00;
    }

    /* 鼠標懸停連接 */
    a:hover {
      color: #FF00FF;
    }

    /* 已選擇的連接 */
    a:active {
      color: #0000FF;
    }
  注意：a:hover 必須在 CSS 定義中的 a:link 和 a:visited 以後，才能生效！a:active 必須在 CSS 定義中的 a:hover 以後才能生效！

一些經常使用CSS屬性

line-height: 文字行高（做用於塊級元素）
  text-decoration：文本裝飾
  font-size：字體大小
  float：浮動
  postion：定位
  color：文字顏色
  background：背景
  background-color：背景顏色
  text-align：當前元素的子元素文本對齊方式
  width：寬度（多數時候做用於塊級元素）
  height：高度（多數時候做用於塊級元素）
  padding：內邊距（盒子模型）
  margin：外邊距（盒子模型）
  list-style：li標籤樣式
  cursor: 鼠標滑過期的手勢;

盒子模型、浮動、定位

盒子模型：指的是塊級元素之間存在包含關係，調整其位置。padding內邊距，margin外邊距等...
  浮動：塊級元素之間想要存在於同一行而不切換爲行內樣式的清空下，使用float:left or right 調整左右浮動，相對於父標籤進行浮動
  定位：
    絕對定位 absolute：絕對定位是相對於元素最近的已定位的祖先元素，若是元素沒有已定位的祖先元素，那麼它的位置則是相對body元素，定位後會釋放原點的位置。
    相對定位 relative：相對位置的座標參考是以本身上一次的位置（x，y）做爲原點進行定位。定位後不會釋放原點的位置。
    相對窗口定位fixed： 會相對於瀏覽器窗口進行定位，不會由於瀏覽器上下滑動而改變位置。一般用於首部、尾部、或者側邊廣告
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程