鴻興網(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>