鴻興網(wǎng)站建設(shè)公司百度allin 人工智能
html 文件結(jié)構(gòu)
html 標(biāo)簽是整個 html 文件的根標(biāo)簽(最頂層標(biāo)簽)
head 標(biāo)簽中寫頁面的屬性.
body 標(biāo)簽中寫的是頁面上顯示的內(nèi)容
title 標(biāo)簽中寫的是頁面的標(biāo)題
<html><head><title>這是一個標(biāo)題</title></head><body></body>
</html>
html 的代碼顯示的結(jié)果我們可以通過瀏覽器觀察得到。
標(biāo)簽的層次關(guān)系：
head 和 body 是 html 的子標(biāo)簽(html 就是 head 和 body 的父標(biāo)簽)
title 是 head 的子標(biāo)簽。 head 是 title 的父標(biāo)簽.
head 和 body 之間是兄弟關(guān)系
html 快速入門
作為后端人員，我們只需要知道即可，這些內(nèi)容是為了項目做鋪墊的。
在 VScode 上敲擊一個 ！ 然后回車就可以生成一個基本的 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></body>
</html>
我們可以通過瀏覽器的開發(fā)者模式會代碼進(jìn)行調(diào)試。
titile 標(biāo)簽
titile 是給網(wǎng)頁命名的
<title>這是一個標(biāo)題</title>
標(biāo)題標(biāo)簽 h1-h6
標(biāo)題標(biāo)簽一共有六個，字體大小從大到小排列。
<h1>一級標(biāo)題</h1><h2>二級標(biāo)題</h2><h3>三級標(biāo)題</h3><h4>四級標(biāo)題</h4><h5>五級標(biāo)題</h5><h6>六級標(biāo)題</h6>
段落標(biāo)簽 p
在HTML中，段落，換行符，空格都會失效，如果需要分成段落，需要使用專門的標(biāo)簽
p標(biāo)簽描述的段落，前面沒有縮進(jìn)
自動根據(jù)瀏覽器寬度來決定排版。
html 內(nèi)容首尾處的換行，空格均無效。
在 html 中文字之間輸入的多個空格只相當(dāng)于一個空格。
html 中直接輸入換行不會真的換行，而是相當(dāng)于一個空格。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>這是一個標(biāo)題</title>
</head>
<body><p>這是一個段落。</p><p>這還是一個段落。</p><p>這又是一個段落。</p><p>這又是一個段落。</p>
</body>
</html>
換行標(biāo)簽 <br/>
br 是 break 的縮寫. 表示換行。
br 是?個單標(biāo)簽(不需要結(jié)束標(biāo)簽)
br 標(biāo)簽不像 p 標(biāo)簽?zāi)菢訋в?個很大的空隙
<br/> 是規(guī)范寫法
這是?個br標(biāo)簽<br/>這是?個br標(biāo)簽<br/>這是?個br標(biāo)簽<br/>
br 標(biāo)簽和 p 標(biāo)簽的區(qū)別：
圖片標(biāo)簽 img
img 標(biāo)簽必須帶有 src 屬性，表示圖片的路徑
這個路徑可以是我們電腦的相對路徑或者如果是網(wǎng)絡(luò)圖片那就是網(wǎng)絡(luò)路徑，不推薦使用絕對路徑，因?yàn)檫@份代碼在別人的電腦上就運(yùn)行不了了。
還可以設(shè)置寬度高度，一般改一個就行，另外?個會等比例縮放。否則就會圖片失衡
border 是邊框，一般通過 CSS 設(shè)置
<img src="" width="" height="" border="">
超鏈接 a
<a href="" target=""></a>
href：必須具備，表示點(diǎn)擊后會跳轉(zhuǎn)到哪個頁面
target：不是一定要寫的，默認(rèn)是 _selef，如果是 _blank 則用新的頁面打開
連接分為三種：
外部鏈接：跳轉(zhuǎn)到別的網(wǎng)站
內(nèi)部鏈接：跳轉(zhuǎn)到本網(wǎng)站的別的頁面
空鏈接：這是當(dāng)后端還沒寫好的時候，前端把這個與后端鏈接的先置為空
<a href="https://www.baidu.com/index.htm" target="_blank">百度</a><a href="Demo1.html" target="_blank">Demo1.html</a><a href="#">空鏈接</a>
表格標(biāo)簽
table 標(biāo)簽：表示整個表格
tr：表示表格的一行
td：表示一個單元格
<table style="width: 500px; height: 400px;" border="1px red" cellspacing="0"><tr><td>cat</td><td>dog</td></tr><tr><td>baitang</td><td>402</td></tr><tr><td>314</td><td>1024</td></tr></table>
表單屬性
表單是讓用戶輸入信息的重要途經(jīng)。分成兩個部分：
表單域：包涵表單元素的區(qū)域，重點(diǎn)是 form 標(biāo)簽
表單控件：輸入框，提交按鈕等等，重點(diǎn)是 input 標(biāo)簽。
form標(biāo)簽
action：表示表單提交時數(shù)據(jù)發(fā)送到哪個URL
method：表示表單提交時使用的 http 方法，通常是 get 和 post
input 標(biāo)簽
各種輸入控件，單行文本框，按鈕，單選框，復(fù)選框
? type(必須有)，取值種類很多，button，checkbox，text，file，image，password，radio 等。
? name: 給 input 起了個名字。尤其是對于單選按鈕，具有相同的 name 才能多選?。
? value: input 中的默認(rèn)值.
? checked：默認(rèn)被選中.(用于單選按鈕和多選按鈕)
文本框：
<input type="text" size="30" name="username"><br/>
密碼框：
密碼：<input type="password" name="password"><br/>
單選框：
性別：<input type="radio" name="gender">男<input type="radio" name="gender">女
注意單選框只有當(dāng)有相同的name 屬性的時候，才能實(shí)現(xiàn)單選的效果。
復(fù)選框：
興趣愛好：<input type="checkbox">玩游戲<input type="checkbox">打球<input type="checkbox">唱歌
要想實(shí)現(xiàn)點(diǎn)擊字體也能實(shí)現(xiàn)選擇，那么就要設(shè)置號 id 屬性，然后通過 label 標(biāo)簽包裹 字體，label 對應(yīng) id 值
興趣愛好：<input type="checkbox" name="hobby" id="1" value="1"><label for="1">玩游戲</label><input type="checkbox" name="hobby" id="2" value="2"><label for="2">打球</label><input type="checkbox" name="hobby" id="3" value="3"><label for="3">唱歌</label>
普通按鈕：
<input type="button" value="我是一個按鈕">
提交按鈕：
<input type="submit" value="提交">
提交按鈕必須放在 form 標(biāo)簽內(nèi)部，并且提交的數(shù)據(jù)只會提交 form 標(biāo)簽包裹的數(shù)據(jù)。
下拉菜單標(biāo)簽 select
select 標(biāo)簽內(nèi)部搭配 option 標(biāo)簽，可以做出下拉菜單的效果：
專業(yè)：<select><option>計算機(jī)科學(xué)與技術(shù)</option><option>軟件工程</option><option>物聯(lián)網(wǎng)</option><option>通信工程</option><option>電子信息</option>
</select>
如果你想默認(rèn)先顯示哪個專業(yè)，你可以加上selected="selected"
專業(yè)：<select><option>計算機(jī)科學(xué)與技術(shù)</option><option>軟件工程</option><option>物聯(lián)網(wǎng)</option><option selected="selected">通信工程</option><option>電子信息</option>
</select>
文本框標(biāo)簽 textarea
說明你的優(yōu)點(diǎn)：<textarea rows="10" cols="50"></textarea>
無語義標(biāo)簽 div 與 span
div 標(biāo)簽獨(dú)占一行，是一個大盒子
span 不獨(dú)占一行，是一個小盒子
這兩個標(biāo)簽的作用是用于網(wǎng)頁的布局。
<div>hello world!</div>
<div>hello world!</div>
<div>hello world!</div>
<span>java </span><span>java </span><span>java </span>
實(shí)踐
寫出對應(yīng)的 html 代碼
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>登錄頁面</title>
</head>
<body><h1>用戶注冊</h1><table><tr><td>用戶名</td><td><input type="text" placeholder="請輸入用戶名"></td></tr><tr><td>手機(jī)號</td><td><input type="text" placeholder="請輸入手機(jī)號"></td></tr><tr><td>密碼</td><td><input type="text" placeholder="請輸入密碼"></td></tr></table><div><button>注冊</button> <span>已有賬號？</span> <a href="#">登錄</a></div>
</body>
</html>