HTML

網頁構成

摘要	說明
結構(HTML)	HTML是網頁內容的載體，內容就是網頁制作者放在頁面上想要讓用戶瀏覽的資訊，可以包含文字、圖片、視頻等，
表現(CSS)	CSS樣式是表現，就像網頁的外衣，比如，標題字體、顏色變化，或為標題加入背景圖片、邊框等，所有這些用來改變內容外觀的東西稱之為表現，
行為(JavaScript / jQuery)	JavaScript是用來實作網頁上的特效效果，如：滑鼠滑過彈出下拉選單，或滑鼠滑過表格的背景顏色改變，還有購物網站中圖片的輪換，可以這么理解，有影片的，有互動的一般都是用JavaScript來實作的

HTML檔案結構

<html></html>為HTML頁面中的根標簽，所有的HTML網頁中的標簽都在<html></html>中，
這里<head>標簽用于定義檔案的頭部，它是所有頭部元素的容器，頭部元素有<title>、<script><style>、<link>、 <meta>等標簽，
在<body>和</body>標簽之間的內容是網頁的主要內容，如<h1>、<p>、<a>、<img>等網頁內容標簽，在這里的標簽中的內容會在瀏覽器中顯示出來，

標簽語法

標簽由英文尖括號 < 和 > 括起來,如：<html>
html中的標簽一般都是成對出現的,分開始標簽和結束標簽，結束標簽比開始標簽多一個 / ,<title>..</title>;還有一些是自結束標簽，如：<br/>
標簽與標簽之間是可以嵌套的，但先后順序必須保持一致，如：<div>里嵌套<p>，那么</p>必須放在</div>的前面，如： <div><p>..</p></div>
注釋是不可以嵌套的,如： -->
HTML標簽不區分大小寫,<h1>和<H1>是一樣的,但萬維網聯盟（W3C）建議小寫，

常用標簽

<h1>...</h1>	標題
<br />	換行
<hr />	分割線
<p>...</p>	段落
<span></span>	行內
<img src="" />	圖片
<a href=""></a>	超鏈接
<ul>...</ul>	無序串列
<ol>...</ol>	有序串列
<li>...</li>	串列項
<table>...</table>	表格
<tr>...</tr>	一行
<td>...</td>	一列
<th>...</th>	列標題
<form>...</form>	表單
<input>	輸入框
<select>...</select>	下拉串列
<option>...</option>	下拉選項

屬性

align="left" 　　　　　　　　　　　　　　　　　　【align="center"，align="right"　　左中右】

style="background-color: red"　　　　　　　　【樣式】

<img alt="加載失敗提示" src="../網路/本地路徑" border="邊框" width="100px" height="120" />【寬高只設定一項即可，另一項會自適應】

<a href="../網路/本地路徑" target="_self">　　【" target="_blank"在新視窗打開，默認原視窗打開】

串列

在ul標簽中添加屬性 type="" circle 空心圓，disc 實心圓 (默認)，square 實心方塊
在ol標簽中添加屬性 type="1/a/A/i/I"

表格

table標簽中可以宣告的屬性
　　border="" 　　表格的邊框
　　width=""　　表格的寬度
　　height=""　　高度
　　align="" 　　表格的對其方式
　　bgcolor="" 　　背景顏色
td標簽內定義對齊方式的屬性
　　align="" 　　設定當前單元格水平對齊
　　valign="" 　　設定當前單元格垂直對齊
　　bgcolor="" 　設定背景顏色
合并單元格
　 rowspan=" 　合并單元格的個數　合并行
　　colspan="　　合并單元格的個數　　合并列

表單

　　<select name="下拉串列">
　　　　<option value="https://www.cnblogs.com/Open-ing/p/china" selected="默認選擇">中國</option>
　　</select>

</form>

get：是將所有的提交的資料顯示在地址欄，長度會有一些限制
post：將要提交的資料放在請求體中，在url表單里面沒有任何資料

提交時以key:value形式，其中文本框、密碼框的key為name 值為提交資料

　　　　　　　　　　　其中單選框、復選框、隱藏域、提交按鈕key為name 值為value

　　　　　　　　　　　下拉串列name在select標簽value在option標簽提交時同上key為name值為value

常規屬性

id：　　標簽的唯一編號，識別碼

class : 標簽的分類，用來識別一組標簽，

style：標簽的風格、樣式

p,form,ol,ul,li,dl,dt,dd,h3{margin:0;padding:0;list-style:none} 樣式清除

事件屬性

onblur:　　失去焦點
onclick: 滑鼠點擊
onbdclick: 雙擊

onmouseover: 滑鼠移動到元素上

CSS

CSS全稱為“層疊樣式表 (Cascading Style Sheets)”，它主要是用于定義HTML元素（或內容）在瀏覽器內的顯示樣式

語法

CSS樣式由選擇符(選擇器)和宣告組成，而宣告又由屬性和值組成

語法說明

屬性 (property) 是你希望改變的屬性，并且每個屬性都有一個值，屬性和值被冒號分開，并由花括號包圍，這樣就組成了一個完整的樣式宣告（declaration）
多個宣告：如果要定義不止一個宣告，則需要用英文分號”;”將每個宣告分開，雖然最后一條宣告的最后可以不加分號，但盡量在每條宣告的末尾都加上分號
每行最好只描述一個屬性
CSS對大小寫不敏感，但建議使用小寫，不過存在一個例外：class 和 id 名稱對大小寫是敏感的，
CSS注釋：/* 注釋內容 */

撰寫位置

方式一：寫在標簽的style屬性中

<p style=“font-size:30px”>字體大小用px表示</p>

方式二：寫在html頭的style標簽中(style標簽一般寫在head標簽與title標簽之間)

<style type="text/css">
    p{
        background-color: yellow;
    }
</style>

方式三：寫在外部的css檔案中，然后通過link標簽引入外部的css檔案

<link rel="stylesheet" type="text/css" href="https://www.cnblogs.com/Open-ing/p/style.css">

優先級按照上述講的三種方式依次降低

選擇器

標簽選擇器：標簽名　　　　　　　　<html的標簽如：div>

id選擇器：#id(名)　　　　　　　　　<p id="屬性名">

類選擇器：.class(名)　　　　　　 <p >

組選擇器：選擇器1，…　　　　　　【同時使用多個選擇器選中一組元素，使用，分隔】

派生選擇器：選擇器1 選擇器2 …　　【根據背景關系關系，選擇元素的后代元素，使用空格隔開】

常用樣式

顏色：color：red；或 #00F6DE

寬度：width：20px; 或 %20

高度：height：20px; 或 %20

背景顏色：background-color： #00F6DE

字體大小：font-size：20px;

文本居中：text-align：center;

div居中：margin-left：auto;　　margin-right：auto;

1px實線邊框：border：1px solid;

串列去修飾：ul{list-style：none;}

對于樣式暫時不考慮深入了解

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/90121.html

標籤：Html/Css

上一篇：添加遮罩層

下一篇：HTML連載57-相對定位和絕對定位

Web基礎了解版01-html-css