第59節:Java中的html和css語言

CSS Java · 發表 2018-11-16 08:09:59

摘要：標題圖歡迎到我的簡書檢視我的文集前言: HTML 英文: HyperText Markup Language 內容 html 是超文字標記語言,是網頁語言的基礎知識, html 是通過標籤來定義的語言,所有程式碼都是由標籤所組成...

標題圖

歡迎到我的簡書檢視我的文集

前言:

HTML 英文: HyperText Markup Language 內容

html 是超文字標記語言,是網頁語言的基礎知識, html 是通過標籤來定義的語言,所有程式碼都是由標籤所組成的,在html程式碼中不用區分大小寫.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>

</body>
</html>

html 程式碼是由 <html> 開始的,並且由 </html> 結束的,包含頭部分 <head></head> 和體部分 <body></body> 兩部分組成.

頭部分是用來給 html 頁面新增屬性資訊的,頭部分是最先載入的內容,而體部分是頁面資料儲存的地方.

在 html 程式碼中,多數標籤都是有開始標籤和結束標籤的，其中有個別標籤因為只有單一功能,所以沒有開始標籤和結束標籤這樣.

這種個別標籤: <br /> , 要建議使用 "/" , 這是規範要求.

html 為超文字標記語言,標記語言,要對標籤進行修飾,新增豐富的內容操作,可以對屬性值進行改變,增強效果,也可以增強使用者體驗感.

屬性與屬性值之間用“=”連線.

文字尾部 ".txt" 改副檔名為 ".html".

開啟時預設關聯開啟瀏覽器.

格式：

// 超文字標記
<標籤名 屬性名='屬性值' />
<標籤名 屬性名='屬性值'> 資料內容 </標籤名>

在 html 中,程式碼都是由標籤所組成的,程式碼邏輯相當低.

// 頭和體
<html>
 <head>
<title></title>
 </head> // 網頁的屬性資訊
 <body>
 </body> // 網頁的資料內容
</html>

html 是網頁的最基本語言,為了操作資料,需要對資料進行不同標籤的封裝並通過標籤中的屬性可以對封裝的資料進行操作.

字型標籤

字型標籤為: <font>

例如: <font size="10px" color="red"> 達叔小生 </font>

複雜顏色用 16 進製表示，表現形式 #FF0000 兩個數為一組，按紅，綠，藍排列，如： #00FF00 表示綠色.

標題標籤: <h1><h2>...<h6>
數字越大越小來著.

特殊字元

列表標籤

<dt>為上層專案
<dd>為下層專案

例項:

<dl>
<dt>名稱</dt>
<dd>達叔小生</dd>
<dd>dashucoding</dd>
<dt>部門名稱</dt>
<dd>技術部</dd>
<dd>研究部</dd>
</dl>

<ol>為數字標籤,<ul>為符號標籤,<li>為具體專案內容標籤

列表

影象標籤

<img>
// 例項
<img src=”1.jpg” align=”middle” border=”3” alt=”圖片說明文字”/>
// align時屬性定義圖片的排列方式
// border是用來設定影象的邊框

地圖 <map>

<img src="dashucoding.jpg" alt="圖片說明文字" usemap="#Map" />
<map >
<area shape="rect" coords="40,50,100,104" href="1.html" />
<area shape="circle" coords="118,203,40" href="2.html" />
</map>

表格標籤

<table>
標題標籤為<caption>,是表格的標題
表頭標籤:<th>
行標籤:<tr>
單元格標籤:<td>

例項:

表格

// width值為百分比,讓表格的寬度隨瀏覽器視窗的大小變化
<table border="1" width=”40%”>
<caption>表格標題</caption>
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
<tr algin=”center”>
<td>達叔小生</td>
<td>dashucoding</td>
</tr>
</table>

例項2:

// 表頭標籤:<th>
// colspan：th標籤佔兩列
<table border="1" width="40%">
<tr>
<tr>
<th colspan="2"> 
個人資訊
</th>
</tr>
<tr align="center">
<td>達叔小生</td>
<td>dashucoding</td>
</tr>
</tr>
</table>

<tbody></tbody>表格體

超連結 <a> 標籤

1. 超連結<a href=””>
<a href=”http://www...cn” target=”_blank”>達叔</a>
2. 定位標記<a name=””> 
<a name=”標記”>標記位置</a>
<a href=”#標記”>返回標記位置</a>

框架

<frameset rows="20%,*>
// 上部分
 <frameset cols="28%,*>
 </frameset>
</frameset>

// <frameset>
框架標籤會到<head>和<body>之間
例子:
<frameset>
</frameset>

畫中畫標籤： <iframe>

<iframe src=”1.html” >
</iframe>

表單

form

sex

表單標籤：<form>
輸入標籤 input
文字框 text
密碼框 password

單選框 radio
複選框 checkbox
隱藏欄位 hidden

提交按鈕 submit
重置按鈕 reset
按鈕 button
按鈕 button
影象 image

選擇標籤 <select>
子項標籤 <option>
多行文字框 <textarea>

表單

表單提交：明確提交方式,指定 method 屬性值,預設為 get , form 表單中的 action 屬性值,是指定表單資料提交的目的地.

get 和 post

get 提交的資料會顯示在位址列中,而 post 不會,使用 get 會對敏感資訊不安全.

get 的提交資料體積有限,而 post 可以提交大體積的資料.

get 將提交資料封裝到了 http 訊息頭的第一行,而 post 將提交的資料封裝到訊息頭後

提交表單建議使用 post

頭標籤

頭標籤放在<head></head>頭部分之間
<title>用於顯示瀏覽器的標題欄內容
<base> href 屬性和 target 屬性
<meta>用於網頁的描述資訊,是搜尋引擎的關鍵字進行搜尋
<link> 
rel (目標文件與當前文件的關係)屬性 
type (文件型別)屬性 
media (在哪種裝置上起作用)屬性

XHTML (可擴充套件的超文字標記語言)

Extensible HyperText Markup Language

XML (可擴充套件標記語言) -> 對資料資訊的描述

Extensible Markup Language

HTML -> 資料顯示的描述

public class Server{
 public static void main(String[] args) throws Exception {
ServerSocket ss = new ServerSocket(90);
Socket s = ss.accept();
System.out.println(s.getInetAddress().getHostAddress());
InputStream in = s.getInputStream();
byte[] buf=new byte[1024];
int len = in.read(buf);
String text = new String(buf,0,len);
System.out.println(text);
PrintWriter out = new PrintWriter(s.getOutputStream(),true);
out.println();
 }
}

meta標籤

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<!--meta http-equiv="refresh" content="3;url=http://www.sina.com.cn" /-->

<title>Insert title here</title>
</head>
<body>

你好

</body>
</html>

<i>一下</i>
<u>其他</u>
<strong>標籤</strong>

X<sub>2</sub>X<sup>2</sup>
<pre>程式碼格式</pre>

`Java` 中 `css` 的學習

css 是用來實現網頁的頁面效果,層疊樣式表( Cascading Style Sheets ), css 將頁面的內容和顯示樣式進行了分離,提高了顯示功能.

四種方式:

style屬性方式

<p style="";></p>

style內嵌方式

<style type=”text/css”>
</style>

匯入方式

@import url(css_1.css);

連結方式

<link rel="stylesheet" type="text/css" href="css_1.css" media="screen" />

樣式優先順序是由上到下，由外到內

css 選擇器共有三種：

html 標籤名選擇器
class 選擇器 -> 標籤名 .class 值
id 選擇器 -> #id 值

i. 關聯選擇器

p b { color:#fff;}

ii. 組合選擇器

p,div { color:#fff;}

iii. 偽元素選擇器

a:link超連結未點選狀態。
a:visited 被訪問後的狀態。
a:hover 游標移到超連結上的狀態（未點選）。
a:active 點選超連結時的狀態。

標籤

@import

匯入

達叔小生：往後餘生，唯獨有你

You and me, we are family !

90後帥氣小夥，良好的開發習慣；獨立思考的能力；主動並且善於溝通

簡書部落格：達叔小生

ofollow,noindex">https://www.jianshu.com/u/c785ece603d1

結語

下面我將繼續對其他知識深入講解，有興趣可以繼續關注
小禮物走一走 or 點贊

第59節:Java中的html和css語言

前言:

Java 中 css 的學習

結語

您可能也會喜歡…

`Java` 中 `css` 的學習