當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端--HTML入门

發(fā)布時間：2023/12/20 HTML 28 豆豆

生活随笔收集整理的這篇文章主要介紹了前端--HTML入门小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

開始學HTML了

第一次寫博客，內容方面可能略顯雜亂，盡本人之所能做到詳略得當，表單部分是重點，需要多方面橫向學習，各項關鍵詞在使用時還需要多查一下拓展用法。

感謝@遇見狂神說
https://www.bilibili.com/video/BV1x4411V75C?p=1
HTML視頻鏈接

文章預覽：

一.網(wǎng)頁基本信息
二.網(wǎng)頁標簽
- 1.網(wǎng)頁基本標簽
- 2.網(wǎng)頁圖像標簽（JPG,GIF,PNG,BMP...）
- 4.列表標簽
- 5.表格標簽
三.媒體元素
四.頁面結構分析
五.內聯(lián)框架
六.表單
七.完結

網(wǎng)頁基本標簽

圖像，超鏈接，網(wǎng)頁布局

列表，表格，媒體元素

表單及表單應用

表單初級驗證

**生成一個簡單的網(wǎng)頁**

一.網(wǎng)頁基本信息

網(wǎng)頁的基本結構

二.網(wǎng)頁標簽

1.網(wǎng)頁基本標簽

標題標簽

段落標簽

換行標簽

水平線標簽

字體樣式標簽

注釋和特殊符號

<!DOCTYPE html> <html lang="en">  <head>  <meta charset="UTF-8"><meta name="keywords" content="養(yǎng)豬專業(yè)戶,養(yǎng)豬大廠"><meta name="description" content="來這個地方養(yǎng)豬"> <title>我的第一個網(wǎng)頁</title> </head> <body> Hellow World! <h1> 一級標簽</h1> <h2> 二級標簽</h2> <h3> 三級標簽</h3> <h4> 四級標簽</h4>  <hr/> <p> 兩只老虎兩只老虎 </p>跑得快跑得快<br/> 一只沒有耳朵一只沒有尾巴<br/> <p> 真奇怪真奇怪</p> <p> 兩只老虎兩只老虎 </p> <p> 跑得快跑得快</p>  兩只老虎兩只老虎<br/> 跑得快跑得快<br/> <h1>字體樣式標簽</h1> 粗體：i love you （strong）<strong>i love you</strong><br> 斜體：i love you （em）<em>i love you</em> <br/>  空格：<br> 空    格 <br/> > 大于符號 gt <br/> < 小于符號 lt <br> ©版權所有寂林 <h2>記不住標簽:</h2> <h3>1.——> 先輸入& 再輸入一個字母 </h3> <h3>2.——> 查百度</h3></body> </html>

span 和 div

2.網(wǎng)頁圖像標簽（JPG,GIF,PNG,BMP…）

1. src：圖片地址（相對地址||絕對地址）
相對地址(推薦使用)，絕對地址(從盤符開始寫)
…/ 代表上一級目錄
2. alt：圖片名字（圖片加載不出來就顯示名字,選填）
==3.title：懸停文字 ==
4.height width：圖片高度寬度

<!DOCTYPE html>  <html lang="en"> <head><meta charset="UTF-8"><title>圖像標簽學習</title> </head> <body>  src：圖片地址（必填） <br>相對地址(推薦使用)，絕對地址(從盤符開始寫)<br>../ 代表上一級目錄 <br/> alt:圖片名字（圖片加載不出來就顯示名字,選填） <br> title：懸停文字(選填) <br> height:圖片高度 <br> width:圖片寬度 <br> <img src="../resources/image/1.jpg" alt="1004" title="懸停文字" width="108" height="100"> <img src="../resources/image/1.jpg" alt="1004" title="懸停文字" width="200" height="300"></body> </html> ```![在這里插入圖片描述](https://img-blog.csdnimg.cn/7b9c33fea75846098ce33cbf0bf4893e.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5a-C5p6XTGlu,size_13,color_FFFFFF,t_70,g_se,x_16)## 3.超鏈接標簽1. 插入鏈接（可以是圖片可以是文字）2. 錨鏈接（可以回到/跳轉到設定位置）3. 功能性鏈接（mailto跳轉到發(fā)郵件聯(lián)系） 4. ==html target屬性==> _blank -- 在新窗口中打開鏈接 > _parent -- 在父窗體中打開鏈接 > _self -- 在當前窗體打開鏈接,此為默認值 > _top -- 在當前窗體打開鏈接，并替換當前的整個窗體(框架頁) 一個對應的框架頁的名稱 -- 在對應框架頁中打開```html <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>鏈接標簽學習</title> </head> <body>  <a href="#top">頂部</a>  a標簽中 <br><em>href必填：表示跳轉到某個頁面</em><br> <em>target:表示窗口在哪里打開</em> <br> target_blank:在新頁面打開 target_self 在自己的網(wǎng)頁中打開<a href="1.我的第一個網(wǎng)頁.html"target="_blank"> 點擊我跳轉到頁面</a> <br> <a href="http://www.baidu.com"> 點擊我跳轉到百度</a> <br><a href="3.鏈接標簽.html"><img src="../resources/image/1.jpg" alt="1004" title="點擊跳轉到第3個網(wǎng)頁" width="108" height="100"></a><p><img src="../resources/image/1.jpg" alt="1004" title="懸停文字" width="108" height="100"> </p><p><img src="../resources/image/1.jpg" alt="1004" title="懸停文字" width="108" height="100"> </p><p><img src="../resources/image/1.jpg" alt="1004" title="懸停文字" width="108" height="100"> </p><p><img src="../resources/image/1.jpg" alt="1004" title="懸停文字" width="108" height="100"> </p><p><img src="../resources/image/1.jpg" alt="1004" title="懸停文字" width="108" height="100"> </p><p><img src="../resources/image/1.jpg" alt="1004" title="懸停文字" width="108" height="100"> </p>  1.需要一個錨標記 <br>2.跳轉到標記 <br><a href="#top">回到頂部</a> <a href="2.圖片標簽.html#return">回到網(wǎng)頁2</a> <a href="2.圖片標簽.html#down">跳轉</a>  郵箱鏈接：mailto <br> <a href="mailto:248789758@qq.com"><img src="../resources/image/1.jpg" alt="圖片丟失" title="點擊聯(lián)系我" width="108" height="100"></a> <a href="mailto:248789758@qq.com">點擊聯(lián)系我</a> </body> </html>

行內元素和塊元素

塊元素
無論內容多少，該元素獨占一行 (p h1-h6…)

...

行內元素(a strong em …)
內容撐開寬度，左右都是行內元素的可以排在一行里面

…

4.列表標簽

有序列表

無序列表

自定義列表

應用范圍：試卷，問答... <br> <ol> order list <br><li>java</li><li>C#</li><li>python</li><li>C++</li><li>Php</li> </ol> <hr> <hr>  應用范圍：導航，側邊欄... <br> <ul> unordered lsit <br><li>java</li><li>C#</li><li>python</li><li>C++</li><li>Php</li> </ul>  dl:標簽 <br> dt:列表名稱 <br> dd:列表內容 <br> 應用范圍：公司網(wǎng)站底部 <br> <dl><dt>學科</dt><dd>java</dd><dd>python</dd><dd>C</dd><dt>位置</dt><dd>四川</dd><dd>重慶</dd>

5.表格標簽

table 建表
border:給表格加邊框
行 tr
列 td

三.媒體元素

視頻元素
video
音頻元素
audio

要加 controls 才能控制播放（進度條）加 autoplay （自動播放）

<video src="../resources/video/人生苦短%20-%20副本.mp4" controls autoplay></video> <audio src="../resources/audio/那些你很冒險的夢%20-%20林俊杰.mp3" controls autoplay></audio>

四.頁面結構分析

header頭
section主體
footer網(wǎng)頁底部

<header><h1>網(wǎng)頁頭部--Tencent--</h1> </header> <section><h2>網(wǎng)頁主體--</h2> </section> <footer><h2>網(wǎng)頁底部</h2> </footer>

效果

五.內聯(lián)框架

iframe 在一個網(wǎng)頁中嵌入其他頁面用法如下圖

<body>  src:地址 <br> width height --> <iframe src="" name="hello" frameborder="0" width="500" height="500"></iframe> <a href="1.我的第一個網(wǎng)頁.html" target="hello">點擊跳轉</a> </body>

運行前

點擊跳轉打開frame的內聯(lián)窗口

六.表單

需要一個form框架
1.action:表單提交的位置，可以是網(wǎng)站，也可以是一個請求處理地址

2.method (提交方式): post / get
get方式提交：我們可以在url中看見我們提交的信息，不安全,高效。
post方式提交：比較安全，可以傳輸大文件。
3.value: 默認初始值
4.size: 文本框的長度
5.maxlenth: 最長能寫幾個字符
6.readonly：只讀
7.disabled：禁用
8.hidden：隱藏
--------------表單初級驗證--------------
9.placeholder: 輸入提示
10.required：不能為空
11.pattern：正則表達式（用于自定義驗證,正則表達式可以上網(wǎng)查）

-------------type---------
input type=" xxx "
button 普通按鈕
submit: 提交按鈕
reset：重置按鈕
image 圖像按鈕
radio: 選項 (需要name命名相同name分為一組才可以多選一，checked默認勾選)
checkbox：多選框(加入 checked 默認勾選)
file -------文件域（提交文件）
textarea- 文本域(比較特殊，用textarea創(chuàng)建一行，不在input內)
range-------滑塊
search------搜索框

————常用關鍵詞————

get：可以在URL中看見提交的信息，不安全，但是高效

post：相對安全，可以傳輸大文件，提交信息可以在審查元素中找到

type---->

七.完結

（完整筆記–轉自狂神說）

前端為體，飾以華物，予以交互，終未善用之站；后端為靈，百家之言匯集，數(shù)據(jù)應運而存，致以站點精魄，遂成活物；IT之路，艱險愈西行之徑，途中艱險bug。無理需求，尤勝洪水猛獸，遠超九九之數(shù)。然我輩當持之以本心，守之以熱忱。勤習代碼編寫之力，精研數(shù)據(jù)解構之魂，通曉設計模式之體。待華發(fā)落盡之時，當成全棧大羅金仙之體，持鍵盤以登天門。此時意氣風發(fā)，腹中豪邁氣魄，當視天下甲方皆為草莽，產(chǎn)品經(jīng)理皆為窮寇。斜睨世間，口出豪言:"還有誰?"。嗚呼哀哉，此情此景當浮一大白~~~

總結

以上是生活随笔為你收集整理的前端--HTML入门的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。

html
入门