天天看點
傳回

HTML/CSS共7k字帶你能獨立完成簡單網頁的制作HTMLCSS建立項目

文章目錄

  • HTML
        • Hello World
        • 文法
        • 标簽
          • 行級标簽
          • a标簽屬性
          • 塊級标簽
          • HTML設定水準分割線
          • 行内塊級标簽
          • 表單元素
          • input type屬性值
          • input 屬性
          • 常用特殊符号
            • 差別
      • 軟體架構
  • CSS
      • CSS引入方式
      • css樣式
        • 字型樣式
        • 文本樣式
          • 背景樣式
          • 隐藏樣式
          • 浮動屬性
          • 盒子模型
          • position定位屬性
        • CSS選擇器
  • 建立項目

HTML

HTML（Hyper texte mark-up language）:超文本标記語言，可以描述文字、數字、字母，特殊符号、聲音、圖檔、圖像等多媒體内容。

Hello World 

<html>
	<head>
		<title>我的第一個網頁</title>
	</head>
	<body>
		Hello World
	</body>
</html>
  1. 建立記事本，并命名為Hello
  2. 編寫上例中的代碼
  3. 修改檔案擴充名，注意：如果檔案沒有顯示擴充名，輕按兩下此電腦，點選檢視按鈕，并勾選檔案擴充名。如下圖所示。
HTML/CSS共7k字帶你能獨立完成簡單網頁的制作HTMLCSS建立項目

文法

  1. HTML标簽都是成對出現，有開始标簽和結束标簽，結束标簽比開始标簽多一個斜杠，個别标簽例外，如img、input等
  2. HTML标簽放置在尖括号中
  3. HTML所有标簽全部放置在根标簽html中
  4. HTML文檔根标簽中包含head标簽和body标簽
  5. head标簽可以放置樣式表，JS腳本、SEO關鍵字等等
  6. body标簽放置網頁的主體内容

标簽

行級标簽
标簽 描述
span 不會獨占一行，寬度與字元長度有關。強調文本和行級标簽
i 顯示斜體文本效果，所有浏覽器都支援
em 定義強調文本，效果和i标簽差不多
b 加粗文本
strong 加粗文本
s
a 連結标簽
img 圖檔标簽
u 文本下劃線
sub 下标
sup 上标
a标簽屬性 
1，内部連結
<a href="text.html">内部連結</a>
2，外部連結
<a href="http://www.baidu.com">跳轉到百度</a>
3，空連結
<a href="#">我是空連結</a>

target屬性
<a href="#" target="_self">在自身頁面中打開連結（預設屬性）</a>
<a href="#" target="_blank">在新的視窗中打開連結</a>
取消連結的下劃線
a{
	text-decoration:one;
}
塊級标簽
标簽名稱 描述
div 常用于頁面布局，獨占一行。可以放置任何标簽。主要用于布局網頁
p 段落标簽
h1-h6 文字标題，數字越大字越小
ol 有序清單，可以通過ol 的type屬性修改序号樣式，也可以通過li标簽的type屬性修改序号樣式和轉換成無序清單
ul 無序清單，可以通過ul 的type屬性修改序号樣式，也可以通過li标簽的type屬性修改序号樣式和轉換成有序清單
table 表格标簽
hr 水準分割線
br 換行
HTML設定水準分割線 
  1. 1. HTML設定一條水準分割線

​```
<hr />
​```

這是水準分割線的最基本應用。它是居中對齊的。

2. HTML設定水準分割線的寬度

​```html
<hr width="200" />

​```

水準分割線的寬度為像素（px）或者相對于螢幕寬度的百分比（%）。比如：

​```html
<hr width="200px" /> <!--機關為像素。預設值是将px去掉，成為上面的格式-->
<hr width="20%" />   <!--機關是相對于螢幕寬度的百分比-->
​```

3. HTML設定水準分割線的粗細

​```html
<hr size="30" />
​```

水準分割線的粗細機關仍然是像素（px）。

4. HTML去掉水準分割線的陰影

​```html
<hr noshade="noshade" />
​```

一般情況下，水準分割線是帶有陰影的，具體顯示為一條突出的或者凹下去的線條。使用此屬性，可以去掉分割線的陰影，使之成為一條無陰影效果的實心線。

5. HTML設定水準分割線的對齊方式

​```html
<hr width="30%" align="left" />
​```

水準分割線的對齊方式預設為居中對齊。使用align屬性可以改變它的對齊方式。并且隻有當它的寬度設定小于螢幕的寬度時，才會顯示出對齊方式的設定效果。

6. HTML設定水準分割線的顔色

​```html
<hr color="#FF0000" />
​```

可以給水準分割線設定不同的顔色。

7. HTML設定水準分割線的title屬性

​```html
<hr size="30" title="設定水準分割線的title屬性" />
​```

當浏覽者将滑鼠懸停在分割線上時會出現屬性值設定的提示内容。

8. HTML水準分割線的綜合應用

​```html
<hr width="300" size="20" noshade="noshade" align="right" color="#0000FF" />
​```

可以分别設定<hr />的屬性：size、width、align、color和noshade等。屬性不用全部設定，而是根據需要選擇某些屬性進行設定，未設定的屬性浏覽器會以預設的方式顯示。

- 預設方式：浏覽器在遇到屬性不全的标簽時，對于未設定的屬性将根據浏覽器内部定義好的樣式進行顯示。
行内塊級标簽

可以和其他元素保持在一行，還能設定寬高

标簽名稱 描述
textarea
input
img
button
表單元素
标簽 描述
form 表單
input
select
input type屬性值
屬性 描述
text 文本輸入框
password 密碼框
datetime-local 日期時間選擇器
date 日期選擇器
time 時間選擇器
color 顔色選擇器
radio 單選按鈕，按鈕互斥必須具有相同的name值
checkbox 複選框
submit 送出按鈕
reset 重置按鈕
hidden 隐藏域，該input不可見
input 屬性
屬性 描述
checked 單選按鈕或者複選框被選中
name 該input的名稱，用于服務端擷取該input的值
placeholder 用于配置文本框的提示資訊，當輸入内容時該提示資訊自動消息 
<html>
	<head>
		<title>我的第一個網頁</title>
	</head>
	<body>
		<div style="background:yellow">我是一個div</div>
		<div>我也是一個div</div>
		<i style="background:green">你是個I，閣下何不同風起，扶搖直上九萬裡</i>
		<i>你還是個I</i>
		<p>早期的計算機主要用于數值計算，現在，計算機主要用于非數值計算，包括處理字元、表格
和圖像等具有一定結構的資料。這些資料内容存在着某種聯系，隻有厘清楚資料的内在聯系，合
理地組織資料，才能對它們進行有效的處理，設計出高效的算法。如何合理地組織資料、高效地
處理資料，這就是 “資料結構” 主要研究的問題。本章簡要介紹有關資料結構的基本概念和算法
分析方法。</p>
		<p>計算機主要用千數值計算時， 一般要經過如下幾個步驟：首先從具體問題抽象出數學模型，
然後設計一個解此數學模型的算法，最後編寫程式，進行測試、調試，直到解決問題。在此過程
中尋求數學模型的實質是分析問題，從中提取操作的對象，并找出這些操作對象之間的關系，然
後用數學語言加以描述，即建立相應的數學方程。例如，用計算機進行全球天氣預報時，就需要
求解一組球面坐标系下的二階橢圓偏微分方程；預測人口增長情況的數學模型為常微分方程。求
解這些數學方程的算法是計算數學研究的範疇，如高斯消元法、差分法、有限元法等算法。資料
結構主要研究非數值計算問題，非數值計算問題無法用數學方程建立數學模型，下面通過三個實
例加以說明</p>
		<h1>這裡是一個h1</h1>
		<h2>這裡是一個h2</h2>
		<h3>這裡是一個h3</h3>
		<h4>這裡是一個h4</h4>
		<h5>這裡是一個h5</h5>
		<h6>這裡是一個h6</h6>
	</body>
</html>
HTML/CSS共7k字帶你能獨立完成簡單網頁的制作HTMLCSS建立項目
常用特殊符号
顯示結果 描述 實體名稱 實體編号
空格
< 小于号 < <
> 大于号 > >
& 和号 & &
" 引号 " "
` 撇号 '(ie不支援) '

差別

  1. 行級标簽寬度至于内容有關
  2. 塊級标簽寬度預設是父容器的百分之百，寬度與内容無關
  3. 行級标簽和塊級标簽可以互相轉換

提示：

​ 這隻是一部分标簽，更多的标簽需要不斷地練習才能記得牢靠，不用刻意的去背這些标簽名稱以及用法，等你一個小項目實戰做下來，這些看似複雜的标簽以及關系都可以被很好的掌握，前期隻需要用到什麼标簽，去查找他的屬性就行。

​ 所謂的行級标簽，塊級标簽，其實可以根據需要，在開發過程中通過css樣式互相轉換。即通過設定display屬性，他的屬性值中，inline（元素一行内标簽進行展示），block（元素以塊級标簽進行展示），inline-block（元素以行内塊級标簽進行展示），none（隐藏标簽）

軟體架構

C/S:(用戶端/伺服器)：

  1. 需要安裝客戶度
  2. 當軟體更新時必須更新用戶端或者重新安裝
  3. 主要的運算都在用戶端進行，是以用戶端負擔較重

B/S:(浏覽器/伺服器)：

  1. 不需要安裝客戶度，隻要有浏覽器即可使用軟體
  2. 軟體更新時使用者不需要更新，隻需要開發人員更新服務端資源即可，使用者無感覺
  3. 主要運算在服務端進行，服務端負擔較重
  4. 分布式，不受地域限制

CSS

用于修飾和美化html标簽

CSS引入方式

  1. 行内樣式/内聯樣式 
<div style="font-family: "microsoft yahei";" >待到秋來九月八，我花開後百花殺，沖天香陣透長安，滿城盡帶黃金甲</div>
  1. 内嵌樣式 
<head>
		<meta charset="utf-8">
		<title>文字樣式</title>
		<style>
			div{
				font-family: simsun;
			}
		</style>
</head>
  1. 外部樣式 
<link rel="stylesheet" type="text/css" href="css/index.css"/>
HTML/CSS共7k字帶你能獨立完成簡單網頁的制作HTMLCSS建立項目

2

HTML/CSS共7k字帶你能獨立完成簡單網頁的制作HTMLCSS建立項目

css樣式

字型樣式

樣式名稱 描述 可選值
font-family 修改字型
font-weigth 修改字型是否加粗及加粗程度 100-900/bold,bolder
font-size 修改字型字号
font-style 字型樣式 italic|normal

文本樣式

樣式名稱 描述 可選值
color 修改文本顔色
text-shadow 添加字型陰影 1.x軸偏移量 2.y軸偏移量 3.模糊程度 4.陰影顔色
text-decoration 修飾文本 underline（下劃線）|overline（上劃線）|line-through（穿過）
text-align 文本對齊方式 left|right|center
line-height 設定文字行高 文字行高=标簽高度（height）時垂直居中
text-indent 設定文字縮進 一個字元占16px

字元間距：

背景樣式
樣式名稱 描述 可選值
background-color 設定背景顔色
background-image 設定背景圖檔
background-repeat 設定背景圖檔是否重複及重複方向 repeat-x|repeat-y|no-repeat
background-size 設定背景圖檔的大小
background-position 設定背景圖檔的位置
隐藏樣式
樣式名稱 描述 可選值
display 控制元素的顯示方式 none|block|inline
visibility 控制元素的顯示和隐藏 hidden
浮動屬性
屬性 描述 可選值
float 讓元素浮動，但是會脫離文檔流 left|right
clear 清除元素的浮動 both
盒子模型
樣式名稱 描述 可選值
width 定義容器的寬度
height 定義容器的高度
border 定義容器的邊框，包括邊框寬度，邊框樣式，邊框顔色
margin 容器的外邊距，容器邊框外層距離周圍容器的距離
padding 容器的内邊距，容器邊框内側和内容的距離
border-radius 容器邊框的弧度
position定位屬性

轉載于：https://blog.csdn.net/qq9764312/article/details/80204950?utm_source=app&app_version=4.9.0&code=app_1562916241&uLinkId=usr1mkqgl919blen

在html網頁中可以看成一個立體空間，一個完整的頁面是由多個頁面堆積形成的，如下圖所示：

HTML/CSS共7k字帶你能獨立完成簡單網頁的制作HTMLCSS建立項目

CSS中Position屬性有四個可選值，它們分别是：static、absolute、fixed、relative。

◆position:static　無定位

該屬性值是所有元素定位的預設情況，在一般情況下，我們不需要特别的去聲明它，但有時候遇到繼承的情況，我們不願意見到元素所繼承的屬性影響本身，進而可以用position:static取消繼承，即還原元素定位的預設值。

◆position:absolute　絕對定位

使用position:absolute，能夠很準确的将元素移動到你想要的位置，

◆position:fixed　相對于視窗的固定定位

這個定位屬性值是什麼意思呢？元素的定位方式同absolute類似，但它的包含塊是視區本身。在螢幕媒體如WEB浏覽器中，元素在文檔滾動時不會在浏覽器視察中移動。例如，它允許架構樣式布局。在頁式媒體如列印輸出中，一個固定元素會出現于第一頁的相同位置。這一點可用于生成流動标題或腳注。我們也見過相似的效果，但大都數效果不是通過CSS來實作了，而是應用了JS腳本。

請特别注意，IE6不支援CSS中的position:fixed屬性。真的非常遺憾，要不然我們就可以試試這種酷酷的效果了。

◆position:relative　相對定位

所謂相對定位到底是什麼意思呢，是基于哪裡的相對呢？我們需要明确一個概念，相對定位是相對于元素預設的位置的定位。既然是相對的，我們就需要設定不同的值來聲明定位在哪裡，top、bottom、left、right四個數值配合，來明确元素的位置。

————————————————

版權聲明：本文為CSDN部落客「qq9764312」的原創文章，遵循CC 4.0 BY-SA版權協定，轉載請附上原文出處連結及本聲明。

原文連結：https://blog.csdn.net/qq9764312/article/details/80204950

CSS選擇器

  1. 标簽選擇器 
标簽名稱{樣式名稱:樣式值}
           
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>标簽選擇器</title>
		<style>
			/* 标簽名稱{樣式屬性:樣式值} */
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 200px;
				height: 200px;
				background-color: magenta;
			}
			p{
				width: 200px;
				height: 200px;
				background-color: magenta;
			}
		</style>
	</head>
	<body>
		<div>
			
		</div>
		<p></p>
		<p></p>
	</body>
</html>

  1. ID選擇器

    W3c标準規定id選擇器隻能使用一次。

#ID{樣式名稱:樣式值}
           
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>ID選擇器</title>
		<style>
			#box{
				width: 200px;
				height: 200px;
				background-color: red;
			}
			#txt{
				width: 200px;
				height: 200px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
		<p id="txt"></p>
	</body>
</html>

  1. class選擇器（類選擇器）

    可以使用多次

.className{樣式名稱:樣式值}
           
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				width: 200px;
				height: 200px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
		<p class="box"></p>
	</body>
</html>
  1. 僞類選擇器 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>僞類選擇器</title>
		<style>
			/* 連結預設的樣式 */
			a:link{
				text-decoration: none;
			}
			/*連結被通路過後的樣式*/
			a:visited{
				color: red;
			}
			/* 滑鼠懸停在标簽上的樣式 */
			a:hover{
				font-size: 20px;
				color: blue;
                /*滑鼠指向連結時變成小手*/
                cursor:pointer;
			}
			/*滑鼠點選但是未松開時的狀态*/
			a:active{
				color: #008000;
			}
		</style>
	</head>
	<body>
		<a href="http://www.baidu.com">百度一下，你就知道</a>
	</body>
</html>

           
隔行變色的效果
<style>
    p:nth-child(even){
        background:yellow;//偶數行
    }
    p:nth-child(odd){
        background:red;//奇數行
    }
</style>
<body>
    <h1>
        <p>第一行</p>
        <p>第二行</p>
        <p>第三行</p>
        <p>第四行</p>
        <p>第五行</p>
    </h1>
</body>

建立項目

使用的開發軟體是HBuilder

方式1：

HTML/CSS共7k字帶你能獨立完成簡單網頁的制作HTMLCSS建立項目
HTML/CSS共7k字帶你能獨立完成簡單網頁的制作HTMLCSS建立項目

方式二：

在開發工具左側項目清單空白處點選右鍵—>建立——>項目

建立頁面：

在建立的項目上點選滑鼠右鍵選擇建立—>html檔案

HTML/CSS共7k字帶你能獨立完成簡單網頁的制作HTMLCSS建立項目
html/css css html 定位
上一篇: 基本的SQL語句
下一篇: 遊戲開發随手記:cocos2d ccLayer響應觸摸事件方法

繼續閱讀