一.form標簽的注意事項

form為表單標簽，屬性有action和method，
action為表單提交的路徑，method為表單
的提交方式，表單有九種提交請求，常用
的有兩種，今天就介紹常用的兩種請求get和
post，

1.get請求方式 get請求為method的默認提交請求，在提交路徑有屬性資訊，get請求在路徑的地址上存在屬性值 url的地址是有限制的最大為64kb；

<form action="https://www.baidu.com/?tn=62095104_23_oem_dg"  method="get" >

路徑顯示如下圖在這里插入圖片描述

2.post請求post請求為method的手動設定提交請求，在提交路徑沒有屬性資訊；

<form action="https://www.baidu.com/?tn=62095104_23_oem_dg"  method="post" >

路徑顯示如下圖請添加圖片描述

3.斜體樣式get和post請求使用場景

1.請求根據資料性質 — 熱資料安全度不重要的資料使可用get和post都可以
2.如果資料的性質需要安全性比較高時那么一定要使用post
3.在寫檔案上傳的功能時請求必須是post的提交方式

二.select標簽的注意事項

1.select標簽又稱下拉串列和option連用

地點：<select name="area">
	    <option>---請選擇---</option>
		<option value="重慶">重慶</option>
	    <option value="四川">四川</option>
	    <option value="北京">北京</option>
	    <option value="上海">上海</option>
	</select>

顯示如下圖
在這里插入圖片描述

2.使用multiple屬性可以實作多選

喜歡顏色：<br/>
<select name="color" multiple="multilie">
	    <option>---請選擇---</option>
		<option value="紅色">紅色</option>
	    <option value="藍色">藍色</option>
	    <option value="紫色">紫色</option>
	    <option value="黑色">黑色</option>
	    <option value="橘色">橘色</option>
	</select>

按住Ctrl滑鼠選擇，可實作多選如下圖
在這里插入圖片描述

三.a標簽的注意事項

1.a標簽超鏈接作用頁面跳轉

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<a href="c.html">a</a> <!--點擊a就會跳到c.html-->
</body>
</html>

如圖
在這里插入圖片描述
點擊a后如下圖

*2.a標簽進行頁面跳轉屬于get請求方式**

3.使用a標簽跳轉到網頁的內部 ----錨點

<a href="#r1">第一章</a>
	<a href="#r2">第二章</a>
	<a href="#r3">第三章</a>
	<h2><a name="r1">第一章</a></h2>
	“叮，萬法合一已啟動，”

　　“叮，檢測到宿主擁有功法數量過萬，融合時間較長，建議宿主開啟加速，預計需要五千萬裝逼值，”

　　“檢測到宿主目前擁有限時免費福利，系統自動開啟加速，”

　　“叮，融合發生錯誤，3850種功法屬性產生不可逆沖突，建議宿主開啟強力融合，預計需要十億裝逼值，”

　　“叮，融合發生巨大錯誤，560種功法融合會導致宿主施法暴斃，建議宿主購買大道規則進行補充，預計需要一百億裝逼值，”
　　<h2><a name="r2">第二章</a></h2>
　　徐缺一邊逃竄，一邊許出各種好處，

　　麒麟老祖與段七德卻依舊毫無動靜，似乎早已離去，壓根不在這，
<h2><a name="r3">第三章</a></h2>

　　“臥槽，小子，你過來干什么，”

　　“別啊！”

如下圖
在這里插入圖片描述
滑鼠點擊第一章節將會跳轉到如下圖

四.img標簽

img用于在頁面中引入圖片

1.usemap是img的重要屬性用于做位圖

usemap----用于做位圖 map ----映射
通常一起使用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
	<img src="./image/1.jpg" alt="貓" usemap="#cat">
	<!-- "./image/1.jpg"是相對路徑  ./ 當前路徑  ../ 當前路徑的父路徑-->
        <map id="cat" name="cat">
	       <area shape="circle" coords="555,506,50" href="https://www.baidu.com/?tn=62095104_23_oem_dg"></area>
	      <!--shape="circle"畫圓，圓心（555，506）半徑50；滑鼠點擊圓所在區域則連接到href="https://www.baidu.com/?tn=62095104_23_oem_dg"-->
        </map>
</body>
</html>

如下圖
在這里插入圖片描述
點擊圓所在區域進入https://www.baidu.com/?tn=62095104_23_oem_dg連接
如下圖

五.多視窗框架 frameset

多視窗的框架標簽里面的每一個視窗都是一個frame 注意：標簽不能和body標簽連用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<frameset rows="15%,70%,15%"><!--劃分框架結構為三行第一行占15%，第二行占70%，第三行占15%-->
	<frame src="a.html " name="1"></frame>

    <frameset cols="20%,80%"><!--架結構第二行劃分為兩列，第一列占20%，第二行占80%-->
        <frame src="b.html" name="2"></frame>
        <frame src="c.html" name="3"></frame>
   </frameset>

  <frame src="d.html" name="3"></frame>
</frameset>
</html>

瀏覽器打開如下
在這里插入圖片描述

以下是a.html代碼，其他的類似

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<a href="c.html">a</a> 
</body>
</html>

打開如下
在這里插入圖片描述

六.視頻標簽video

以下是簡單應用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<video src="./video/1.mp4" controls="controls">
</video>
</body>
</html>

瀏覽器運行如下圖
在這里插入圖片描述

七.音頻標簽audio

以下是簡單應用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body> 
	<audio src="./music/1.mp3" controls="controls"><!--controls該屬性，則向用戶顯示控制元件，比如播放按鈕，-->
</audio>
</body>
</html>

瀏覽器運行如下圖
在這里插入圖片描述

八.串列標簽

1. 有序串列

ol 有序串列標簽，li 串列的選項
簡單應用如下

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<ol>
	 <li>第1章</li>
	 <li>第2章</li>
	 <li>第3章</li>
	 <li>第4章</li>
	</ol>
</video>
</body>
</html>

運行顯示如下圖
在這里插入圖片描述

2. 無序串列

ul無序串列標簽，li 串列的選項
簡單應用如下

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<ul>
	 <li>第1章</li>
	 <li>第2章</li>
	 <li>第3章</li>
	 <li>第4章</li>
	</ul>
</video>
</body>
</html>

運行顯示如下圖
在這里插入圖片描述

3. 定義串列

dl 表示定義串列
dt 定義的專案
dd 定義專案的描述
簡單應用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<dl>
   <dt>重慶</dt>
   <dd>磁器口</dd>
   <dd>解放碑</dd>
   <dt>四川</dt>
   <dd>樂山大佛</dd>
   <dd>.....</dd>
</dl>
</video>
</body>
</html>

運行結果如下

九.什么是css

CSS是Cascading style Sheets的簡稱，中文譯作“層疊樣式表單”，我把它叫作“層疊樣式表”

1.Css的語法結構

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>登錄</title>
</head>
<body>
<h4 style="color:red">登錄界面</h4>
</body>
</html>

在標簽內寫 style=”屬性:屬性值”

選擇符{
屬性:屬性值
}

2.選擇符

標簽選擇符：以標簽命名的選擇符

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
p{
  color:green;
}
	</style>
</head>
<body>
<p>你好</p>
	<a href="c.html" target="2">a</a> 

</body>
</html>

以下是標簽選擇符標識

p{
  color:green;
}

運行如下
在這里插入圖片描述

id選擇符: 通常用于描述一個標簽具有唯一的樣式，標識是 #

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
 #p1{
  color:green;
}
	</style>
</head>
<body>
<p id="p">你好</p>
	<a href="c.html" target="2">a</a> 

</body>
</html>

以下是id選擇符標識

<p id="p1">你好</p>

#p1{
  color:green;
}

運行如下
在這里插入圖片描述

class選擇符通常用于修飾一組或者一系列具有相同樣式的標簽，標識是 .

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
 .green{
  color:green;
}
	</style>
</head>
<body>
<p class="green">你好</p>
	<a href="c.html" target="2">a</a> 

</body>
</html>

以下是class選擇符標識

<p class="green">你好</p>

.green{
  color:green;
}

運行如下
在這里插入圖片描述
4. 通配符選擇器
*{ color:green;}
的對頁面中所有的標簽都起作用
什么時候使用通配符選擇器
一般情況下在css頁面剛開始的時候描述通用屬性
5. 包含選擇符
語法e1 e2{屬性：值} e1 是e2的父節點標簽
標識：空格

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
body .green{
  color:green;
}
	</style>
</head>
<body>
<p class="green">你好</p>
	<a href="c.html" target="2">a</a> 
</body>
</html>

運行如下
在這里插入圖片描述
6.選擇符分組
標識： , 逗號
用它可以替代通配符選擇符

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
p,h1{ /*p標簽和h1標簽*/
  color:green;
}
	</style>
</head>
<body>
<h1>我很好，只是偶爾被需要</h1>
<p class="green">你好</p>
	<a href="c.html" target="2">a</a> 
</body>
</html>

運行如下
在這里插入圖片描述
7.標簽指定式選擇符
標簽指定式選擇符：如果既想使用id或class，也想同時使用標簽選擇符如： p.green{ color:green;}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
 p.green{     /*p標簽中class是green的*/
  color:green;
}
	</style>
</head>
<body>
<p class="green">你好</p>
<p>我很好，只是偶爾被需要</p>
	<a href="c.html" target="2">a</a> 
</body>
</html>

運行如下
在這里插入圖片描述
8．組合選擇選擇符前面的1-7種組合性使用
h1,p.green{ color:green;}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
 h1,p.green{ /*h1標簽和p標簽中class是green的*/
  color:green;
}
	</style>
</head>
<body>
<h1>溫柔盡失</h1>
<p class="green">你好</p>
<p>我很好，只是偶爾被需要</p>
	<a href="c.html" target="2">a</a> 
</body>
</html>

在這里插入圖片描述

3.css 的引入方式

行內樣式
在標簽中寫入style屬性

<h4 style="color:red">登錄界面</h4>

內嵌樣式

<style type="text/css">
 .green{
  color:green;
}
 #p1{
  color:green;
}
	</style>

外鏈樣式
需要先建立一個XXX.css檔案
css檔案內用選擇符如

 .green{
  color:green;
}

然后在需要的時候鏈接該檔案

	<link rel="stylesheet" type="text/css" href="./css/1.css">

匯入樣式
是內嵌樣式和外鏈的樣式的混合，不太常用

<style type="text/css">
     @import url(./css/1.css);
	</style>

4.偽類

Body 標簽 link alink vlink
在css有相應的偽類去替代他們
標簽:偽類{ 樣式 }
未訪問的鏈接 a:link{color:#ff0000}
已訪問的鏈接 a:visited{color:#00ff00}
滑鼠移動到鏈接上 a:hover{color:#ff00ff}
滑鼠按下到鏈接上 a:active{color:#0000ff}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
 h1,p.green{
  color:green;
}
	a:link {color:red;}/*未訪問的鏈接*/
	a:visited{color:black;}/*已訪問的鏈接*/
	a:hover{color:blue}/*滑鼠移動到鏈接上*/
	a:active{color:orange}/*滑鼠按下到鏈接上*/
	</style>

</head>
<body>
<h1>溫柔盡失</h1>
<p class="green">你好</p>
<p>我很好，只是偶爾被需要</p>
	<a href="c.html" target="2">a</a> 
	<a href="#">xxxxx</a>
	<a href="#1">hhh</a>
</body>
</html>

運行如圖
在這里插入圖片描述
滑鼠移動到xxxxx

滑鼠按到hhh上

5.css命名

關于css命名法，和其他的程式命名差不多，主要有三種：駝峰，帕斯卡，匈牙利法
駝峰命名法：除第一個單詞首字母小寫外，其余所有單詞首字母都大寫#headerBlock
帕斯卡命名法：與駝峰相似，區別都是所有單詞首字母都大寫#HeaderBlock
匈牙利命名法：是需要在名稱前面加上一個或多個小寫字母作為前綴#head_block

6.CSS樣式的特點

繼承 ---- 層疊
1、繼承：
網頁中子元素，將繼承父元素的樣式
例如：要控制段落p中的文字大小，可以直接給body標記加樣式，
2、層疊：
網頁中子元素定義了與父元素相同的樣式，則子元素的樣式將覆寫掉父元素的樣式
后面定義的樣式，會覆寫前面定義的樣式

7.字體樣式

瀏覽器默認字體大小為16px
常用單位：px 像素 em 當前字體尺寸百分比單位用的比較多
功能：
設定字號： font-size:12px
設定字色： color:#000000
設定字體：font-family:Arial,‘宋體’
設定行高： line-height：150% line-height：1.5em
設定字體的粗細： font-weight：normal[正常]bold[粗體]

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
 h1,p.green{
   color:green;
   font-size:25px;
   font-family:'宋體';
   line-height:2em;
   font-weight: bold;
}
	</style>

</head>
<body>
<h1>溫柔盡失</h1>
<p class="green">你好</p>
<p>我很好，只是偶爾被需要</p>
	<a href="c.html" target="2">a</a> 
	<a href="#">xxxxx</a>
	<a href="#1">hhh</a>
</body>
</html>

運行如下
在這里插入圖片描述

8.文本控制

文本水平對齊方式 text-align:

功能	語法
設定物件中文本縮進	text-indent：2em 可以為負值
文本水平對齊方式	text-align: left[左]center[中]right[右]
物件中空白處理	white-space：white-space：normal[自動換行] pre[換行和空白受保護]nowrap[強制在同一行顯示]
文本大小寫控制	text-transform：none[正常大小] capitalize；[每個單詞的第一個字母轉換成大寫]uppercase[轉換成大寫]lowercase[轉換成小寫]
元素的垂直對齊方式	vertical-align：sub[設定文字為下標] super[設定文字為上標]top[把元素的頂端與行中最高元素的頂端對齊]text-botton[把元素的低端與父元素字體的低端對齊]

9.盒子模型

4個屬性
Content 內容
Padding 內邊距
Border 邊框
Margin 外邊距
元素的總寬度應該這樣計算：

元素總寬度 = 寬度 + 左內邊距 + 右內邊距 + 左邊框 + 右邊框 + 左外邊距 + 右外邊距

元素的總高度應該這樣計算：

元素總高度 = 高度 + 上內邊距 + 下內邊距 + 上邊框 + 下邊框 + 上外邊距 + 下外邊距

Padding和margin的用法相似

一個引數時表示上下左右
二個引數時表示上下和左右
padding:100px 200px 300px; 表示上，左右，下
padding:100px 200px 300px 400px; 表示上右下左
簡單應用：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color:pink;
  width: 300px;
  border: 15px solid black;
  padding: 50px;
  margin: 20px auto;
}
</style>
</head>
<body>

<h1 style="text-align:center;">演示</h1>
<div><h3>CSS 盒模型（框模型）實質上是一個包裝每個 HTML 元素的盒子，它包括：邊框、內邊距（填充）、外邊距以及實際的內容，</h3>此文本是盒子里的內容，我們添加了 50px 的內邊距，20px 的外邊距和 15px 的綠色邊框，此文本是盒子里的內容，此文本是盒子里的內容，此文本是盒子里的內容，此文本是盒子里的內容，此文本是盒子里的內容，此文本是盒子里的內容，此文本是盒子里的內容，此文本是盒子里的內容，此文本是盒子里的內容，此文本是盒子里的內容，此文本是盒子里的內容，此文本是盒子里的內容，此文本是盒子里的內容，此文本是盒子里的內容，此文本是盒子里的內容，此文本是盒子里的內容，此文本是盒子里的內容，此文本是盒子里的內容，此文本是盒子里的內容，此文本是盒子里的內容，此文本是盒子里的內容，</div>

</body>
</html>

運行如圖
在這里插入圖片描述

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

標籤：其他

上一篇：JavaWeb專案smbms超市訂單管理系統

下一篇：大資料在保險應用場景

HTML的一些常用的標簽和部分css知識

一.form標簽的注意事項

1.get請求方式 get請求為method的默認提交請求，在提交路徑有屬性資訊，get請求在路徑的地址上存在屬性值 url的地址是有限制的最大為64kb；

2.post請求post請求為method的手動設定提交請求，在提交路徑沒有屬性資訊；

3.斜體樣式get和post請求使用場景

二.select標簽的注意事項

1.select標簽又稱下拉串列和option連用

2.使用multiple屬性可以實作多選

三.a標簽的注意事項

1.a標簽 超鏈接 作用頁面跳轉

2.a標簽進行頁面跳轉 屬于get請求方式*

3.使用a標簽跳轉到網頁的內部 ----錨點

四.img標簽

1.usemap是img的重要屬性用于做位圖

五.多視窗框架 frameset

六.視頻標簽video

七.音頻標簽audio

八.串列標簽

1. 有序串列

2. 無序串列

3. 定義串列

九.什么是css

1.Css的語法結構

2.選擇符

3.css 的引入方式

4.偽類

5.css命名

6.CSS樣式的特點

7.字體樣式

8.文本控制

9.盒子模型

1.a標簽超鏈接作用頁面跳轉

*2.a標簽進行頁面跳轉屬于get請求方式**