html&css
- html
- 概念
- 語法
- html常用的標簽
- 檔案標簽
- 文本標簽
- 圖片標簽
- 串列標簽
- 鏈接標簽
- 表格標簽
- 表單標簽
- css
- CSS與html結合方式
- 語法
- 選擇器
- 基礎選擇器
- 其他常用選擇器
html
概念
Hyper Text Markup Language 超文本標記語言
超文本：
超文本是用超鏈接的方法，將各種不同空間的文字資訊組織在一起的網狀文本，超文本更是一種用戶界面范式，用以顯示文本及與文本之間相關的內容，現時超文本普遍以電子檔案方式存在，其中的文字包含有可以鏈結到其他位置或者檔案的連結，允許從當前閱讀位置直接切換到超文本連結所指向的位置，超文本的格式有很多，最常使用的是超文本標記語言（標準通用標記語言下的一個應用）及富文本格式
標記語言:
由標簽構成的語言，
標記語言不是編程語言
語法
-
html文鍵后綴名 .html 或者 .htm，
-
標簽分為：
圍堵標簽：有開始標簽和結束標簽，
自閉和標簽：開始標簽和結束標簽是同一個， -
標簽可以嵌套：
標簽的嵌套是包含關系，不是交叉關系，不能你中有我，我中有你 -
在開始標簽中可以定義屬性，屬性是由鍵值對構成，值需要用引號(單雙都可)引起來
-
html不區分大小寫，但是建議使用小寫，
html常用的標簽
檔案標簽
檔案標簽是構成html最基本的標簽
html：html 檔案的根標簽
head：頭標簽，用于指定html檔案的一些屬性，引入外部的資源
title：標題標簽，
body：體標簽
<!DOCTYPE html> <!--此標簽定義此檔案是html檔案-->
<html> <!--根標簽-->
<head> <!--頭標簽包含檔案的各種屬性和資訊，包括檔案的標題-->
<meta charset="UTF-8">
<title>Title</title> <!--檔案的標題-->
</head>
<body>
<!--定義檔案的主體，包含檔案的所有內容（比如文本、超鏈接、影像、表格和串列等等，）-->
</body>
</html>
文本標簽
處理文本的標簽
h1 h2 …到h6：標題標簽，h1~h6:字體大小逐漸遞減小
p：段落標簽
br：換行標簽
hr：展示一條水平線
b：字體加粗
i：字體斜體
font:字體標簽 規定字體樣式，大小，顏色
center:文本居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>標題標簽</h1>
<h2>標題標簽</h2>
<h3>標題標簽</h3>
<h4>標題標簽</h4>
<h5>標題標簽</h5>
<h6>標題標簽</h6>
<p>段落一</p>
<p>段落二</p>
我被<br>換行了
<hr>
<b>被加粗</b> <br>
<i>傾斜</i> <br>
<font size="50" face="楷體" color="red">規定字體樣式，大小，顏色</font> <br>
<center> 文字居中</center>
</body>
</html>
圖片標簽
img
<img src="圖片的地址">
串列標簽
有序串列：
ol li
無序串列：
ul li
<!--有序串列-->
<ol>
<li>吃飯</li>
<li>睡覺</li>
<li>上網</li>
</ol>
<!--無序串列-->
<ul>
<li>吃飯</li>
<li>睡覺</li>
<li>上網</li>
</ul>
鏈接標簽
a
屬性：
href：指定訪問資源的URL
target：指定打開資源的方式
_self：在當前頁面打開
_blank：在空白頁面打開
<a href="http://www.baidu.com">百度</a>
表格標簽
table：定義biaoge
tr：定義一行
td：定義一行里面的一個單元格
<table >
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
<tr>
<td>張三</td>
<td>男</td>
<th>18</th>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<th>21</th>
</tr>
</table>
表單標簽
form
作用：用于定義表單的，可以定義一個范圍，范圍代表采集用戶資料的范圍
屬性：
action：指定提交資料的URL
method:指定提交方式，常用的方式為post get
表單項標簽
input：可以通過type屬性值，改變元素展示的樣式
常用屬性：
<table border="1" align="center" width="500">
<tr>
<td><label for="username">用戶名</label></td>
<td><input type="text" name="username" id="username"></td>
</tr>
<tr>
<td><label for="password">密碼</label></td>
<td><input type="password" name="password" id="password"></td>
</tr>
<tr>
<td><label for="email">Email</label></td>
<td><input type="email" name="email" id="email"></td>
</tr>
<tr>
<td><label for="name">姓名</label></td>
<td><input type="text" name="name" id="name"></td>
</tr>
<tr>
<td><label for="tel">手機號</label></td>
<td><input type="text" name="tel" id="tel"></td>
</tr>
<tr>
<td><label>性別</label></td>
<td><input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
</td>
</tr>
<tr>
<td><label for="birthday">出生日期</label></td>
<td><input type="date" name="birthday" id="birthday"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="注冊"></td>
</tr>
</table>
css
概念： Cascading Style Sheets 層疊樣式表
層疊：多個樣式可以作用在同一個html的元素上，同時生效
好處：
1. 功能強大
2.將內容展示和樣式控制分離
降低耦合度，解耦
讓分工協作更容易
提高開發效率
作用：頁面美化和布局控制
CSS與html結合方式
語法
選擇器 {
屬性名1:屬性值1;
屬性名2:屬性值2;
...
}
選擇器
作用：篩選具有相似特征的元素
基礎選擇器
其他常用選擇器
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/398700.html
標籤：其他