這是第一篇接觸HTML后的筆記。
HTML(Hyper Text Markup Language)是超(超鏈接)文本(純文本)標記(標簽)語言，它是早期的作者小范圍自用語言，后經長期發展逐漸被廣泛使用並形成了一定的規范。
HTML現在是學習前端知識的一部分，html+css+javascript是前端知識學習的三個部分，今天主要是在學習了html后的一個簡單小應用，好記性不如爛筆頭。
找來了一個書的封面，目的是在網頁上顯示相似的排版。
目標圖片
我的實現效果如下：
具體實現代碼如下：
編程工具是HBuilderX
<!DOCTYPE html>
<!--以上一句確定了html的版本，方便瀏覽器解碼 -->
<html>
<!--以上表示html文件的根目錄，一個文件中有且僅有一個 -->
<head>
<!--
html 分為head和body兩個部分， head用來設置信息網頁上看不見，body用來設置頁面顯示出來的信息
meta 表示用來描述頁面的元數據
meta charset 指定文檔的字符編碼，供不同的瀏覽器解析出正確的結果 utf-8是不同地區都可以使用的字符編碼
title標簽 設定網頁打開時的標題，在搜索時並不會起到什么作用
style標簽 設置標簽中的屬性，以下的寫法是css的寫法，html的寫法是設置在標簽中，這種方法不鼓勵使用
-->
<meta charset="utf-8">
<title>html test</title>
<style type="text/css">
/* <!-- body是標簽，如果標簽相同，但是需要設置不同的屬性，可以給標簽設置id ，
如下面額 p id="first",id唯一，通過id可以指定設置屬性，如#first{},
需要注意的是id的設置不能油空格，如first line，這樣不可行
--> */
body{
background-color: black;
<!-- 設置頁面的背景顏色-->
}
<!-- 以下設置對應標簽/ID的屬性-->
#first{
color: white;
}
#secoend{
color: white;
background-color: palevioletred;
font-family: "arial narrow";
font-size: calc(10);
width: 4.75rem;
}
#third{
color: gold;
font-size: xx-large;
font-family: "arial rounded mt bold";
font-weight: 900;
}
p{
color: white;
font-size: calc(4);
}
#four{
line-height: 0px;
}
#seven{
line-height: 0px;
}
#five{
color: gold;
font-weight: 600;
}
#nine{
color: gold;
line-height: calc(1mm);
}
h6{
color: white;
font-size: calc(2);
line-height: 1px;
}
#six{
width: 100%;
}
.ptoto,.description{
float: left;
}
</style>
</head>
<body>
/*
<!--
這個HTML配置文件的目的是利用html的基礎知識創建一個有普通的網頁
樣本是一本書《深入理解計算機系統》封面的簡潔版
center標簽 是為了是居中顯示
p是段落標簽，獨占一行
hr是自結束標簽，
img標簽用於設置圖片信息， src指定要加載圖片的路徑，alt是圖片的描述文字，瀏覽器中的圖片搜索就是靠這些文字搜索
當顯示不出來圖片時，瀏覽器中就顯示這些描述文字，同時可以設置寬高
br是換行標簽
div是塊標簽，在加載的時候塊內內容可以被一起選中
h1 - h6 標簽可定義標題。h1 定義最大的標題。h6 定義最小的標題，在頁面搜索時一般h1,h2,h3會被用到
a 標簽用於定義超鏈接，結合href指定鏈接地址，此處偶然發現用a標簽的line-height設置比p標簽更封面更像-->
*/
<center>
<p id="first">計
算 機
科 學
叢 書</p>
<p id="secoend">原書第3版</p>
<p id="third">深入理解計算機系統</p>
<p>蘭德爾E.布萊恩特(Randal E.Bryant)</p>
<hr width = '300px'/>
<p id="four">[美] <font size="2">卡內基-梅隆大學</font> [著]</p>
<p>大衛R.奧哈拉倫(David R.O"Hallaron)</p>
<hr width = '300px'/>
<p id="seven"><font size="2">卡內基-梅隆大學</font></p>
<p>龔奕利 賀蓮 譯</p>
<hr width = '700px' />
<p id="five">Computer Systems</p>
<p id="nine"> A Programmers' Perspective Third Edition</p>
<img src='1.jpg' alt="computer systems book" height = '200px' width="400px" />
<br/>
<br />
<br />
<div id="six">
<div id="photo"><img src='2.jpg' alt="機械工業出版社"></div>
<div id="description" >
<h6>
<a id="bottom1">機 械 工 業 出 版 社</a> <br />
<hr width = '90px' />
<a id="bottom2">China Machine Press</a>
</h6>
</div>
</div>
</center>
</body>
</html>
左邊一個圖片右邊三行字符 想要設置好，還需要學習列表，以后可以再修改。
以上信息同步於公眾號”悠然扎記“，有興趣的可以關注公眾號，可以及時看到更加豐富的推送~