《原神攻略》2.0版本全冰系角色培養指南

阿新 • • 發佈：2021-08-09

TITLE：HTML學習筆記（一）

為初學者準備的：HTML速成

HTML Crash Course For Beginners

Part Ⅰ

超文字標記語言

不是程式語言

告訴瀏覽器如何構造網頁

<p>Lorem ipsum dolor sit amet</p>

起始標籤+內容+結束標籤

Part Ⅱ

<!DOCTYPE html> ——> 用來解釋文件的型別

<html>
    <head>
        
    </head>
    
    
    <body>
        
        
    </body>
</html>

Part Ⅲ

塊級元素

在頁面以塊的形式展現

出現在新的一行

佔全部寬度

<div></div>
<h1>...
<p>

內聯元素

通常在塊級元素內

不會導致文字換行

只佔必要的部分寬度

<a>
<img>
<em>
<strong>

<a href="url" target="_blank">Lorem</a>

列表

list

<!---無序列表-->
<ul>
    <li>list item1</li>
    <li>list item2</li>
    <li>list item3</li>
    <li>list item4</li>
    <li>list item5</li>
</ul>
<!---有序列表-->
<ol>
    <li>list item1</li>
    <li>list item2</li>
    <li>list item3</li>
    <li>list item4</li>
    <li>list item5</li>
</ol>

表格

<table>
    <thead>
    	<th>first name</th>
        <th>last name</th>
        <th>age</th>
    </thead>
</table>

JavaWeb教程-HTML零基礎入門

第一節 html簡介

什麼是html

超文字標記語言

html能做什麼

通過標記標籤描述網頁

html書寫規範

標籤是以尖括號包圍的關鍵字

格式：屬性=‘屬性值’ //多個屬性之間空格隔開

不區分大小寫，建議全小寫

第二節結構標籤

網頁基本結構

<html>:根標籤
	<head>:網頁頭標籤
		<title></title>:頁面的標題
	</head>
    <body></bodybody>:網頁正文

巢狀結構
帶/的是結束部分，沒有/是開始部分

屬性名	程式碼	描述
text		設定網頁正文中所有文字的顏色
bgcolor		設定網頁的背景色
background		設定網頁的背景圖

顏色的兩種表示方式

01.英文單詞 eg：res

02.16進製表示顏色 eg：#000000

demo 01

<!DOCTYPE html>
<html>
	<head>
			<!--用來設定編碼方式，“UTF-8”涵蓋中文字元-->
		<title></title>	<!--標題-->
	</head>
	<body text="red" bgcolor="bisque" background="C:\Users\86152\Downloads\HBuilderX.3.1.12.20210428\HBuilderX\readme\logo.png">
			hello，world！
	</body>
</html>

第三節 RGB顏色和相對路徑

demo 01

<!DOCTYPE html>
<html>
	<head>
			<!--用來設定編碼方式，“UTF-8”涵蓋中文字元-->
		<title></title>	<!--標題-->
	</head>
	<body text="red" bgcolor="#ff" background="adress">
			hello，world！
	</body>
</html>

地址：..表示向上一級去找父目錄	eg：../pic/logo.png

程式設計師計算器

HEX——十六進位制

DEC——十進位制

OCT——八進位制

BIN——二進位制

第四節排版標籤

可用於實現簡單的頁面佈局

註釋標籤：

換行標籤：

段落標籤：

文字文字

特點：段與段之間有空行

屬性：align對齊方式（left、center、right）

水平線標籤:

屬性

——width：水平線的長度（兩種：第一種-畫素表示；第二種-百分比表示）

——size：水平線的粗細（畫素表示，eg：10px）

——color：水平線的顏色

——align：水平線的對齊方式

demo 02

<!DOCTYPE html>
<html>
	<head>
		
		<title>排版標籤</title>
	</head>
	<body>
		<!--換行-->
		換<br>行
		<!--段落-->
		<p>段落1</p>
		<p align="center">段落2</p>
		<p align="right">段落3</p>
		<!--水平線-->
		<hr width="50%" align="left" color="#f00" size="7">
	</body>
</html>

第五節塊標籤和文字標籤

demo 03

<!DOCTYPE html>
<html>
	<head>
		
		<title></title>
	</head>
	<body>
		<div>div標籤1<font color="#f00" size="5">div標籤1</font></div>
		<div>div標籤2</div>
		<div>div標籤3</div>
		<!--div寬度預設是其外層容器的寬度-->
		<span>span標籤1</span>
		<span>span標籤2</span>
		<span>span標籤3</span>
	</body>
</html>

使用CSS+div是現下流行的一種佈局方式

標籤	程式碼	描述
div		行級塊標籤，獨佔一行，換行
span		行內塊標籤，所有內容都在同一行

，處理網頁中文字的顯示方式

屬性名	程式碼	描述
size		用於設定字型的大小、最小1號，最大7號
color		用於設定字型的顏色
face		用於設定字型的樣式

第六節文字格式化標籤和標題標籤

文字格式化標籤

使用標籤實現標籤的樣式處理

標籤	程式碼	描述
b		粗體標籤
strong		加粗
em		強調字型
i		斜體
small		小號字型
big		大號字型
sub		上標標籤
sup		下標標籤
del		刪除線

標題標籤

隨著數字增大文字逐漸變小，字型是加粗的，內建字號，預設佔據一行

標籤	程式碼	描述
h1		1號標題，最大字型
h2		2號標題
h3		3號標題
h4		4號標題
h5		5號標題
h6		6號標題，最小字型

demo 04

<!DOCTYPE html>
<html>
	<head>
		
		<title></title>
	</head>
	<body>
		<b>粗體</b><Strong>粗體</strong>
		<br>
		<em>斜體</em><i>斜體</i>
		<big>大號</big><small>小號</small>
		上標：5m<sup>2</sup> 下標：H<sub>2</sub>O
		<br>
		<del>刪除</del>
		<h1>最大</h1>
		<h2>二</h2>
		<h3>三</h3>
		<h4>四</h4>
		<h5>五</h5>
		<h6>六</h6>
	</body>
</html>

第七節列表標籤

無序列表：使用一組無序的符號定義，

//un-

<ul type>
    <li></li>
</ul>

屬性值	描述	用法舉例
circle	空心圓
disc	實心圓
square	黑色方塊

有序列表：使用一組有序的符號定義，

//order

<ol type="a" start="1">
    <li></li>
</ol>

屬性值	描述	用法舉例
1	數字型別
A	大寫字母型別
Ⅰ	大寫羅馬數字型別
a	小寫字母型別
i	小寫羅馬數字型別

demo 05

<!DOCTYPE html><html>	<head>				<title></title>	</head>	<body>		無序列表<br>		<ul type="circle">			<li>規格嚴格</li>			<li>功夫到家</li>		</ul>		有序列表<br>		<ol type="i" start="4">			<li>哈工大</li>			<li>哈哈哈0</li>			<li>哈哈哈1</li>			<li>哈哈哈2</li>			<li>哈哈哈3</li>			<li>哈哈哈4</li>		</ol>		巢狀列表<br>		無序列表<br>		<ul type="circle">			<li>規格嚴格</li>			<ol type="i" start="4">				<li>哈工大</li>				<li>哈哈哈0</li>				<li>哈哈哈1</li>				<li>哈哈哈2</li>				<li>哈哈哈3</li>				<li>哈哈哈4</li>			</ol>			<li>功夫到家</li>		</ul>	</body></html>

第八節圖形標籤

在頁面指定位置處中引入一幅圖片，

屬性名	描述
src	引入圖片的地址
width	圖片的寬度
height	圖片的高度
border	圖片的邊框
align	與圖片對齊顯示方式
alt	提示資訊
hspace	在圖片的左右設定空白
vspace	在圖片的上下設定空白