當前位置：首頁 > news >正文

做網(wǎng)站后期維護工資貼吧西安百度推廣外包

news 2025/7/4 1:56:51

做網(wǎng)站后期維護工資貼吧,西安百度推廣外包,網(wǎng)站建設投標ppt模板,游戲開發(fā)需要多少錢JavaWeb HTML 超文本標記語言超文本：文本、聲音、圖片、視頻、表格、連接標記：有許許多多的標簽組成 vscode開發(fā)工具搭建因為我使用的IDEA是社區(qū)版，代碼高亮補全縮進都有些問題，使用vscode是最好的選擇~ 安裝 Visual Stu…

JavaWeb

HTML

超文本標記語言

超文本：文本、聲音、圖片、視頻、表格、連接
標記：有許許多多的標簽組成

vscode開發(fā)工具搭建

因為我使用的IDEA是社區(qū)版，代碼高亮補全縮進都有些問題，使用vscode是最好的選擇~

安裝

Visual Studio Code - Code Editing. Redefined

外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

下載完畢后，一路next即可完成安裝~

插件推薦

外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

編寫第一個html頁面

記事本編寫代碼：效果，在瀏覽器上直接顯示hello world

外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

以上寫法當然不標準

<html><head><title>這是頁面標題</title></head><body>hello world</body>
</html>

html：html文件根標簽
head：編寫相關(guān)頁面的相關(guān)屬性
title：頁面標題
body：頁面內(nèi)容展示信息

DOM樹

所有的標簽都是html的子標簽

head和body是兄弟標簽

head和title是下兄弟標簽

雙標簽：有始有終

單標簽

快速生成代碼框架：！+ enter

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>

html標簽

注釋標簽

<!-->

標題標簽

h1-h6

段落標簽

<p></p>

換行標簽

<br/>

換行后的間隙比段落的小

格式化標簽

加粗：strong 、b

傾斜：em、i

刪除線：del、s

下劃線：ins、u

img標簽

src屬性

img標簽必須搭配src使用（圖片路徑）

相對路徑

./xxx.png
./img/xxx.png
../xxx.png     上一層路徑

絕對路徑

圖片路徑

網(wǎng)絡上的圖片資源

其他屬性

alt：替換文本

_{當圖片加載失敗，就會出現(xiàn)替換文本}
title：提示文本

_{鼠標放在圖片上就會出現(xiàn)文本}
width/height

_{調(diào)整大小}
border

_邊框

a標簽（超鏈接）

href

點擊后就跳到哪個頁面，圖片也可以

target

默認是_self,跳轉(zhuǎn)新頁面，覆蓋原頁面

_blank打開新頁面且跳轉(zhuǎn)

表格標簽

table標簽

表示整個表格

tr

表示表格一行

td

表示一個單元格

th

表示表頭單元鉻，居中加粗

thead

表格的頭部區(qū)域（范圍比th大）

tbody

表格得到主體區(qū)域

表格標簽有一些屬性可以用于設置大小邊框等.但是一般使用CSS方式來設置
這些屬性都要放到table標簽中，

align是表格相對于周圍元素的對濟方式.a1ign="center"(不是內(nèi)部元素的對齊方式)
border表示邊框.1表示有邊框（數(shù)字越大，邊框越粗），"表示沒邊框
cellpadding:內(nèi)容距離邊框的距離，默認1像素
cellspacing:單元格之間的距離.默認為2像素
width/height:設置尺寸

使用

表格頭部+表格主體+單元格合并

thead里的內(nèi)容居中+加粗

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><table border="1" width="500" height="300" cellspacing="0" cellpadding="50" align="center"><thead><tr><th>姓名</th><th>性別</th><th>年齡</th></tr></thead><tr><td>姓名</td><td>性別</td><td>年齡</td></tr><tr><td>張三</td><td>男</td><td>3</td></tr><tr><td>李四</td><td>男</td><td>4</td></tr><tr><td>李四</td><td>女</td><td>5</td></tr></table>
</body></html>

外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

rowspan、colspan

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><table border="1" width="500" height="300" cellspacing="0" cellpadding="50" align="center"><thead><tr><th>姓名</th><th>性別</th><th>年齡</th></tr></thead><!-- <tr><td>姓名</td><td>性別</td><td>年齡</td></tr> --><tr><td>張三</td><td rowspan="2">男</td><td>3</td></tr><tr><td>李四</td><!-- <td>男</td> --><td>4</td></tr><tr><td colspan="2">李四/女</td><!-- <td>女</td> --><td>5</td></tr></table>
</body></html>

列表標簽

無序列表

ul、li

disc：瀏覽器默認展示方式
square：方塊
circle：空心圓

有序列表

ol、li

通過type控制序號的樣式

外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

start從哪個序號開始

dl、dt、dd

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h1>這是無序列表</h1><ul><li>這是內(nèi)容1</li><li>這是內(nèi)容2</li><li>這是內(nèi)容3</li></ul><h1>這是有序列表</h1><ol type="A" start="3"><li>這是有序列表1</li><li>這是有序列表2</li><li>這是有序列表3</li><li>這是有序列表4</li></ol><h1>這是自定義列表</h1><dl><dt>自定義列表顯示內(nèi)容<dd>這是自定義列表1</dd><dd>這是自定義列表2</dd><dd>這是自定義列表3</dd><dd>這是自定義列表4</dd></dt></dl>
</body>
</html>

外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

表單標簽

完成服務器的一次交互

表單域

form

<form action="test.html">... [form 的內(nèi)容]
</form>

關(guān)于 form 需要結(jié)合服務器 & 網(wǎng)絡編程來進一步理解. 后面再詳細研究.

表單控件

`input`

各種輸入控件, 單行文本框, 按鈕, 單選框, 復選框.

通過type的取值，來控制input的類型

文本框
```
<input type="text">
```
密碼框
```
<input type="password">
```

單選框

<input type="radio" name="sex">男
<input type="radio" name="sex" checked="checked">女
注意: 單選框之間必須具備相同的 name 屬性, 才能實現(xiàn) 多選一 效果

復選框

愛好:
<input type="checkbox"> 吃飯 <input type="checkbox"> 睡覺 <input type="checkbox">打游戲

普通按鈕

<input type="button" value="我是個按鈕">
當前點擊了沒有反應. 需要搭配 JS 使用(后面會重點研究)

<input type="button" value="我是個按鈕" onclick="alert('hello')">

外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

提交按鈕

<form action="test.html"><input type="text" name="username"><input type="submit" value="提交">
</form>

提交按鈕必須放到 form 標簽內(nèi). 點擊后就會嘗試給服務器發(fā)送

清空按鈕

<form action="test.html"><input type="text" name="username"><input type="submit" value="提交"><input type="reset" value="清空">
</fo

清空按鈕必須放在 form 中. 點擊后會將 form 內(nèi)所有的用戶輸入內(nèi)容重置.

選擇文件
```
<input type="file">
```
點擊選擇文件, 會彈出對話框, 選擇文件.

lable標簽

搭配 input 使用. 點擊 label 也能選中對應的單選/復選框, 能夠提升用戶體驗.

for 屬性 : 指定當前 label 和哪個相同 id 的 input 標簽對應. (此時點擊才是有用的)

<label for="male">男</label> <input id="male" type="radio" name="sex">

select標簽

下拉菜單

<select><option>--請選擇年份--</option><option>1991</option><option>1992</option><option>1993</option><option>1994</option><option>1995</option>
</select>

無語義標簽

沒有固定的用途

div

獨占一行，是一個大盒子

span

不獨占一行，是一個小盒子

案例練習

個人簡歷

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><h1>蔡徐坤</h1><div><h2>基本信息</h2><img src="./ikun.png" alt="" width="500" height="350"><span><p>求職意向：籃球開發(fā)</p></span><span><p>聯(lián)系電話：1008611</p></span><span><p>個人郵箱：niganma_aiyou.com</p></span><span><p><a href="https://gitee.com/jyutao/">厲不厲害你坤哥的Gitee</a></p></span><span><p><a href="https://blog.csdn.net/weixin_45646601/">坤哥的博客</a></p></span></div><div><h2>教育背景</h2><ol><li>1990 - 1996 幼黑子幼兒園 幼兒園</li><li>1996 - 2002 小黑子小學 小學</li><li>2002 - 2005 中黑子中學 初中</li><li>2005 - 2008 高黑子中學 高中</li><li>2008 - 2012 偶像練習生大學 唱跳rap專業(yè) 坤科</li></ol></div><div><h2>專業(yè)技能</h2><ul><li>rap 基礎語法扎實，已經(jīng)刷了 800 道 律師函；</li><li>常見籃球都可以獨立實現(xiàn)并熟練應用；</li><li>熟知跳舞理論，并且可以金雞獨立；</li><li>掌握 唱歌 能力，并且獨立開發(fā)了再看一眼就會爆炸。</li></ul></div><div><h2>個人項目</h2><ol><li><h3>打胎</h3><p>開發(fā)時間：2021年-2023年被發(fā)現(xiàn)</p><p>功能介紹</p><ul><li>觸發(fā)被動律師函</li><li>隱藏技能睡未成年</li></ul></li><li><h3>美國孝隊</h3><p>開發(fā)時間：？？？？年被發(fā)現(xiàn)</p><p>功能介紹</p><ul><li>三分線起跳螺旋扣籃</li><li>觸發(fā)被動律師函</li></ul></li></ol></div><div><h2>個人評價</h2><p>全民制作人大家好，我是練習時長兩年半的個人練習生蔡徐坤。喜歡唱、跳、rap、籃球。</p></div>
</body></html>

填寫信息

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><table><thead><h3>請?zhí)顚懞啔v信息</h3></thead><tr><td><label for="name">姓名</label></td><td><input type="text" name="" id="name"></td></tr><tr><td>性別</td><td><input type="radio" name="sex" id="female" checked="checked"><label for="female"><img src="./女.png" alt="" width="20" height="20">女</label><input type="radio" name="sex" id="male"><label for="male"><img src="./男.png" alt="" width="20" height="20">男</label></td></tr><tr><td>出生日期</td><td><select name="" id=""><option value="">--請選擇年份--</option><option value="">2000</option><option value="">2001</option><option value="">2002</option><option value="">2003</option><option value="">2004</option></select><select name="" id=""><option value="">--請選擇月份--</option><option value="">1</option><option value="">2</option><option value="">3</option><option value="">4</option><option value="">5</option><option value="">6</option><option value="">7</option><option value="">8</option><option value="">9</option><option value="">10</option><option value="">11</option><option value="">12</option></select><select name="" id=""><option value="">--請選擇日期--</option><option value="">2</option><option value="">3</option><option value="">4</option><option value="">5</option><option value="">6</option><option value="">7</option><option value="">8</option><option value="">9</option><option value="">10</option><option value="">11</option><option value="">12</option><option value="">13</option><option value="">14</option><option value="">15</option><option value="">16</option><option value="">17</option><option value="">18</option><option value="">19</option><option value="">20</option><option value="">21</option><option value="">22</option><option value="">23</option><option value="">24</option><option value="">25</option><option value="">26</option><option value="">27</option><option value="">28</option><option value="">29</option><option value="">30</option></select></td></tr><tr><td><label for="school">就讀學校</label></td><td><input type="text" name="" id="school"></td></tr><tr><td>應聘崗位</td><td><input type="checkbox" name="" id="server"><label for="server">后端開發(fā)</label><input type="checkbox" name="" id="fe"><label for="fe">前端開發(fā)</label><input type="checkbox" name="" id="test"><label for="test">測試開發(fā)</label><input type="checkbox" name="" id="all"><label for="all">全棧開發(fā)</label></td></tr><tr><td>掌握的技能</td><td><textarea name="" id="" cols="30" rows="10"></textarea></td></tr><tr><td>項目經(jīng)歷</td><td><textarea name="" id="" cols="30" rows="10"></textarea></td></tr><tr><td></td><td><input type="checkbox" name="" id="read"><label for="read">我已經(jīng)閱讀公司的招聘要求</label></td></tr><tr><td></td><td><a href="#">查看我的狀態(tài)</a></td></tr><tr><td></td><td><h3>請應聘者確認：</h3></td></tr><tr><td></td><td><ul><li>以上信息有效</li><li>可以盡早就職</li><li>可以接受加班</li></ul></td></tr></table>
</body></html>

特殊字符

空格&nbsp

小于號&lt

大于號&gt

按位與&amp

網(wǎng)站推薦

HTML特殊字符編碼對照表

MDN介紹

HTML（超文本標記語言） | MDN (mozilla.org)

HTML 只是描述了頁面的骨架結(jié)構(gòu).

查看全文

http://www.risenshineclean.com/news/1979.html

中文亚洲精品无码_熟女乱子伦免费_人人超碰人人爱国产_亚洲熟妇女综合网

JavaWeb

HTML

vscode開發(fā)工具搭建

安裝

插件推薦

編寫第一個html頁面

html標簽

注釋標簽

標題標簽

段落標簽

換行標簽

格式化標簽

img標簽

src屬性

相對路徑

絕對路徑

其他屬性

a標簽（超鏈接）

href

target

表格標簽

table標簽

tr

td

th

thead

tbody

使用

列表標簽

無序列表

有序列表

表單標簽

表單域

表單控件

input

lable標簽

select標簽

無語義標簽

div

span

案例練習

個人簡歷

填寫信息

特殊字符

網(wǎng)站推薦

相關(guān)文章：

`input`