css 宋體_Java前端基礎(一)之html/css

1.1 html

HTML:超文本標記語言(Hyper Text Markup Language)，標準通用標記語言下的一個應用。HTML 不是一種編程語言，而是一種標記語言 (markup language)，是網頁制作所必備的

WEB開發工具：hbuilder/webstorm/vs code/eclpise

最簡單的HTML

<!DOCTYPE html> ---->告訴瀏覽器，當前HTML語言使用的是第5個版本，2014年發布

<html> --->根標簽，一般有2個標簽，head，body標簽

<head> --->head標簽里的內容一般不直接現實在頁面上，用來說明和描述網頁文檔

<title></title> ---->說明網頁標題

</head>

<body> --->body標簽放置真正顯示的內容

</body>

</html>

標簽：左右尖括號括起來的內容就是標簽。單標簽和雙標簽。雙標簽是有起始和結束標簽。

HTML常用標簽

網頁內容的標題標簽

H1,H2,H3...H6，都是網頁內容的標題標題

網頁注釋標簽

段落標簽

<p>超文本標記語言的結構包括“頭”部分（英語：Head）、和“主體”部分（英語：Body），其中“頭”部提供關于網頁的信息，“主體”部分提供網頁的具體內容。</p>

圖片標簽

最常用容器標簽

<div>hello</div>

鏈接標簽

跳轉到淘寶

跳轉當前頁面的某個地方

1.2 列表

表單標簽

form表單標簽

action:將表單數據提交給什么服務器（服務器的地址）

method:get/post

get和post區別：get會將表單提交的內容直接放在請求的URL地址里，效率高，不安全。post不會將表單數據顯示到url上，會放置在請求的body上。

搜索/正常的請求就會使用get

登陸/注冊等比較隱私和安全的內容時候，就需要用到POST,上傳文件的時候也會用到post

input標簽有多種類型

type=》

text（文本輸入）

password(密碼)

radio:單選框，注意單選框如果選擇的內容是同一項內容，那么多個輸入input標簽的name值必須一致。

checkbox:復選框，選擇的內容是同一項內容，那么多個輸入input標簽的name值必須一致

color:輸入顏色（少用）

date:時間標簽（少用）

select>option

textarea：長文本輸入標簽

案例：

<!DOCTYPE html>

1.3 css

層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。

CSS使用

1、style屬性上直接使用

<h1 style="color:purple;">今晚吃什么？</h1>

2、Style標簽上使用

語法：

選擇器{樣式的內容}

</style>

CSS常用選擇選擇器：

元素選擇器：元素名稱

Class選擇器：.+類名

ID選擇器：#+id名稱

3、Link標簽引入css文件使用

優先級情況

元素內style屬性的優先級>id>class>元素>默認的瀏覽器樣式>繼承的樣式

越復雜的選擇器優先級越高

備注：!Important,將樣式的優先級提高到最高

文字

Color:文字顏色

Font-size:文字的大小

font-family:文字字體，盡量使用黑體，微軟雅黑，宋體，普通用戶都有的字體

Font-weight:字體粗細,100-900,具體的粗細根據字體文件本身有什么粗細的字體來決定

Text-align:文字的排版，left,center,right

Line-height:行高，行與行之間的高度

Text-shadow:文字陰影

text-shadow: 0 0 10px orange,0 0 20px yellow;

Text-shadow:水平偏移值垂直偏移值陰影的模糊度陰影的顏色，設置多個陰影用逗號隔開

容器盒子

Box-size:設置盒子模型

Width:寬度

Height:高度

Padding:內邊距

Margin:外邊距

Border:邊框

Box-shadow:盒子陰影

Display:設置盒子是塊級元素還是行級元素還是彈性元素

Background:設置元素的背景，背景圖片，背景顏色

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/260703.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/260703.shtml
英文地址，請注明出處：http://en.pswp.cn/news/260703.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！