Web基礎瞭解版01-html-css

時間 2019-12-18

標籤 web 基礎瞭解 html css 欄目 HTML 简体版

原文原文鏈接

HTML

網頁構成

摘要	說明
結構(HTML)	HTML是網頁內容的載體。內容就是網頁製做者放在頁面上想要讓用戶瀏覽的信息，能夠包含文字、圖片、視頻等。
表現(CSS)	CSS樣式是表現。就像網頁的外衣。好比，標題字體、顏色變化，或爲標題加入背景圖片、邊框等。全部這些用來改變內容外觀的東西稱之爲表現。
行爲(JavaScript / jQuery)	JavaScript是用來實現網頁上的特效效果。如：鼠標滑過彈出下拉菜單。或鼠標滑過表格的背景顏色改變。還有購物網站中圖片的輪換。能夠這麼理解，有動畫的，有交互的通常都是用JavaScript來實現的

HTML文件結構css

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

標籤語法post

標籤由英文尖括號 < 和 > 括起來,如：<html>字體
html中的標籤通常都是成對出現的,分開始標籤和結束標籤。結束標籤比開始標籤多一個 / ,<title>..</title>;還有一些是自結束標籤，如：<br/>動畫
標籤與標籤之間是能夠嵌套的，但前後順序必須保持一致，如：<div>裏嵌套<p>，那麼</p>必須放在</div>的前面。如： <div><p>..</p></div>網站
註釋是不能夠嵌套的,如： -->url
HTML標籤不區分大小寫,<h1>和<H1>是同樣的,但萬維網聯盟（W3C）建議小寫。spa

經常使用標籤

<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="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="style.css">

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

選擇器

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

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

類選擇器：.class(名)　　　　　　 <p class="屬性名">

組選擇器：選擇器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;}

對於樣式暫時不考慮深刻了解

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。