品牌做網(wǎng)站公司長沙網(wǎng)站seo服務(wù)
什么是HTML,CSS？
HTML(HyperText Markup Language):超文本標記語言。
超文本:超越了文本的限制，比普通文本更強大。除了文字信息，還可以定義圖片、音頻、視頻等
標記語言:由標簽構(gòu)成的語言
>HTML標簽都是預(yù)定義好的。例如:使用<a>展示超鏈接，使用<img>展示圖片，<vide0>展示視
HTML代碼直接在瀏覽器中運行，HTML標簽由瀏覽器解析。
CSS(Cascading Style Sheet):層疊樣式表，用于控制頁面的樣式(表現(xiàn))
HTML結(jié)構(gòu)標簽
<html><head><title>標題</title></head><body></body>
</html>特點：
HTML標簽不區(qū)分大小寫
HTML標簽屬性值單雙引號都可以
HTML語法松散
1.標題標簽
標簽:<h1>..</h1>(h1 →h6 重要程度依次降低)
注意:HTML標簽都是預(yù)定義好的，不能自己隨意定義。
2.水平線標簽??<hr>
用于在網(wǎng)頁界面添加一條水平線
3.圖片標簽
<img src "圖片路徑" width=""height="">width大小有兩種單位
一種是像素點（px)
另一種是百分比（%）
標簽使用樣例：
<!-- 文檔類型為HTML -->
<!DOCTYPE html>
<html lang="en">
<head><!-- 字符集為UTF-8 --><meta charset="UTF-8"><!-- 設(shè)置瀏覽器兼容性 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>焦點訪談：中國底氣 新思想務(wù)實大國糧倉</title>
</head>
<body><img src="./img/news_logo.png" height="35px"> 新浪政務(wù)>正文<h1>焦點訪談：中國底氣 新思想務(wù)實大國糧倉</h1><hr>2023年03月02日21:50央視網(wǎng)<hr>
</body>
</html>?運行后網(wǎng)頁
?CSS引入方式
1.行內(nèi)樣式:寫在標簽的style屬性中(不推薦)
?該方式只能使得h1一個標簽有該屬性，復(fù)用性較低
2.內(nèi)嵌樣式：寫在style標簽中(可以寫在頁面任何位置，但通常約定寫在head標簽中)
?3.外聯(lián)樣式:寫在一個單獨的.css文件中(需要通過 1ink標簽在網(wǎng)頁中引入)
?代碼樣例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>焦點訪談：中國底氣 新思想務(wù)實大國糧倉</title><!-- 方式二：內(nèi)嵌方式 --><style>h1{/* 顏色描述方式 *//* 第一種：關(guān)鍵字 *//* color: red; *//* 第二種：RGB表示 *//* color: rgb(255,0,0); *//* 第三種：基于16進制 */color: #ff0000;}</style><!-- 方式三：外聯(lián)樣式 --><!-- <link rel="stylesheet" href="css/news.css"> -->
</head>
<body><img src="./img/news_logo.png"> 新浪政務(wù)>正文<!-- 方式一：行內(nèi)樣式 --><!-- <h1 style="color: red;">焦點訪談：中國底氣 新思想務(wù)實大國糧倉</h1> --><h1>焦點訪談：中國底氣 新思想務(wù)實大國糧倉</h1><hr>2023年03月02日21：50央視網(wǎng)<hr>
</body>
</html>CSS文件：
h1{color: red;
}顏色表示的三種方式
1.關(guān)鍵字
如 red表示紅色，green表示綠色，blue表示藍色
2.rgb表示?
紅綠藍三原色，每項取值0-255。
3.十六進制表示法
#開頭，將數(shù)字轉(zhuǎn)換成十六進制表示
每兩個表示rgb的一個數(shù)
若有兩個相同可以縮寫
#000000縮寫#000
CSS選擇器
作用：用來選取需要設(shè)置樣式的元素(標簽)
1.元素選擇器
2.id選擇器
為標簽設(shè)置id:
?3.類選擇器
為標簽設(shè)置類:
?優(yōu)先級
id選擇器>類選擇器>元素選擇器
CSS屬性
color:設(shè)置文本的顏色
font-size:字體大小 (注意:記得加px)
text-decoration:規(guī)定添加到文本的修飾，none表示定義標準的文本
text-decoration: none;/* 設(shè)置沒有下劃線 */text-align:規(guī)定元素中的文本的水平對齊方式（左，中，右）
text-align: right;/* 靠右對齊 */text-indent:定義第一個行內(nèi)容的縮進
text-indent: 35px;/* 設(shè)置首行縮進 */4.<pane>標簽
<span>是一個在開發(fā)網(wǎng)頁時大量會用到的沒有語義的布局標簽
特點:一行可以顯示多個(組合行內(nèi)元素)，寬度和高度默認由內(nèi)容撐開
5.超鏈接
標簽: <a href=" "target="...">央視網(wǎng)</a>
屬性:
href:指定資源訪問的ur1(路徑）
target:指定在何處打開資源鏈接
_self:默認值，在當前頁面打開
_blank:在空白頁面打開
代碼樣例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>焦點訪談：中國底氣 新思想務(wù)實大國糧倉</title><!-- 方式二：內(nèi)嵌方式 --><style>h1{color: #4D4F53;}#time{/* 顏色 */color: rgb(151,142,144);/* 字體大小 */font-size: 12px;}a{color: black;text-decoration: none;}</style>
</head>
<body><img src="./img/news_logo.png"> <a href="https://gov.sina.com.cn/" target="_self">新浪政務(wù)</a> >正文<!-- 方式一：行內(nèi)樣式 --><!-- <h1 style="color: red;">焦點訪談：中國底氣 新思想務(wù)實大國糧倉</h1> --><h1>焦點訪談：中國底氣 新思想務(wù)實大國糧倉</h1><hr><span class="cis" id="time">2023年03月02日21：50</span><span><a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">央視網(wǎng)</a></span><hr>
</body>
</html>6.視頻標簽：<video>
屬性：
src:規(guī)定視頻的url
controls:顯示播放控件
width:播放器的寬度
height:播放器的高度
<!-- 視頻 --><video src="video/1.mp4" controls width="950px"></video>7.音頻標簽：<audio>
屬性：
src:規(guī)定音頻的url
controls:顯示播放控件
<!-- 音頻 --><audio src="audio/1.mp3" controls></audio>8.段落標簽：<p>
<P>人勤春來早，春耕農(nóng)事忙。立春之后，由南到北，我國春耕春管工作陸續(xù)展開，春天的田野處處生機盎然。</P>9.文本加粗標簽：<b>/<strong>
<b>單純加粗
<strong>有強調(diào)的意思
盒子布局
盒子:頁面中所有的元素(標簽)，都可以看做是一個 盒子，由盒子將頁面中的元素包含在一個矩形區(qū)域內(nèi)，通過盒子的視角更方便的進行頁面布局
盒子模型組成:內(nèi)容區(qū)域(content)、內(nèi)邊距區(qū)域(padding)、邊框區(qū)域(border)、外邊距區(qū)域(margin)
?
10.<div>標簽
特點：
一行只顯示一個(獨占一行)
寬度默認是父元素的寬度，高度默認由內(nèi)容撐開
可以設(shè)置寬高(width、height)
?代碼樣例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子模型</title><style>div {width: 200px;height: 200px;box-sizing: border-box; /* 指定width height為盒子的高寬 */background-color: aquamarine; /* 背景色 */padding: 20px; /* 內(nèi)邊距, 上 右 下 左 */border: 10px solid red; /* 邊框, 寬度 線條類型 顏色 */margin: 30px; /* 外邊距, 上 右 下 左 */}</style>
</head><body><div>A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A </div></body>
</html>11.表格標簽：<table>
場景:在網(wǎng)頁中以表格(行、列)形式整齊展示數(shù)據(jù)，如:班級表。
<th>具有加粗效果
?代碼樣例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML-表格</title><style>td {text-align: center; /* 單元格內(nèi)容居中展示 */}</style>
</head>
<body><table border="1px" cellspacing="0" width="600px"><tr><th>序號</th><th>品牌Logo</th><th>品牌名稱</th><th>企業(yè)名稱</th></tr><tr><td>1</td><td> <img src="img/huawei.jpg" width="100px"> </td><td>華為</td><td>華為技術(shù)有限公司</td></tr><tr><td>2</td><td> <img src="img/alibaba.jpg" width="100px"> </td><td>阿里</td><td>阿里巴巴集團控股有限公司</td></tr></table>
</body>
</html>運行效果：
?12.表單標簽<form>
表單屬性:
action:表單數(shù)據(jù)提交的url地址
method:表單提交方式
get:表單數(shù)據(jù)拼接在url后面，?username=java,大小有限制
post:表單數(shù)據(jù)在請求體中攜帶，大小沒有限制
表單項
<input>:表單項，通過type屬性控制輸入形式。
姓名: <input type="text" name="name"> <br><br>
<select>:定義下拉列表，<option>定義列表項。
學(xué)歷: <select name="degree"><option value="">----------- 請選擇 -----------</option><option value="1">大專</option><option value="2">本科</option><option value="3">碩士</option><option value="4">博士</option></select> <br><br><textarea>:文本域
<textarea name="description" cols="30" rows="10"></textarea> <br><br>-
cols屬性定義了文本輸入框的列數(shù)，即水平方向上的字符數(shù)。一個列相當于一個等寬的字符，但實際上顯示的字符寬度可能會根據(jù)字體而變化。這個屬性的值是一個正整數(shù)，表示文本輸入框的列數(shù)。 -
rows屬性定義了文本輸入框的行數(shù)，即垂直方向上的文本行數(shù)。一個行相當于一行文本，但實際上顯示的行高可能會根據(jù)字體和瀏覽器而變化。這個屬性的值也是一個正整數(shù)，表示文本輸入框的行數(shù)。
代碼樣例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML-表單項標簽</title>
</head>
<body><!-- value: 表單項提交的值 -->
<form action="" method="post">姓名: <input type="text" name="name"> <br><br>密碼: <input type="password" name="password"> <br><br> 性別: <input type="radio" name="gender" value="1"> 男<label><input type="radio" name="gender" value="2"> 女 </label> <br><br>愛好: <label><input type="checkbox" name="hobby" value="java"> java </label><label><input type="checkbox" name="hobby" value="game"> game </label><label><input type="checkbox" name="hobby" value="sing"> sing </label> <br><br>圖像: <input type="file" name="image"> <br><br>生日: <input type="date" name="birthday"> <br><br>時間: <input type="time" name="time"> <br><br>日期時間: <input type="datetime-local" name="datetime"> <br><br>郵箱: <input type="email" name="email"> <br><br>年齡: <input type="number" name="age"> <br><br>學(xué)歷: <select name="degree"><option value="">----------- 請選擇 -----------</option><option value="1">大專</option><option value="2">本科</option><option value="3">碩士</option><option value="4">博士</option></select> <br><br>描述: <textarea name="description" cols="30" rows="10"></textarea> <br><br><input type="hidden" name="id" value="1"><!-- 表單常見按鈕 --><input type="button" value="按鈕"><input type="reset" value="重置"> <input type="submit" value="提交"> <br>
</form></body>
</html>運行效果：
