生活随笔
收集整理的這篇文章主要介紹了
前端--HTML入门
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
開始學HTML了
第一次寫博客，內容方面可能略顯雜亂，盡本人之所能做到詳略得當，表單 部分是重點，需要多方面橫向學習，各項關鍵詞在使用時還需要多查一下拓展用法。
感謝@遇見狂神說
https://www.bilibili.com/video/BV1x4411V75C?p=1
HTML視頻鏈接
文章預覽：
- 一.網頁基本信息
- 二.網頁標簽
- 1.網頁基本標簽
- 2.網頁圖像標簽（JPG,GIF,PNG,BMP...）
- 4.列表標簽
- 5.表格標簽
- 三.媒體元素
- 四.頁面結構分析
- 五.內聯框架
- 六.表單
- 七.完結
網頁基本標簽
圖像，超鏈接，網頁布局
列表，表格，媒體元素
表單及表單應用
表單初級驗證
**生成一個簡單的網頁**
一.網頁基本信息
網頁的基本結構
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><meta name="keywords" content="養豬專業戶,養豬大廠"><meta name="description" content="來這個地方養豬">
<title>我的第一個網頁
</title>
</head>
<body>
Hellow World!
</body>
</html>
二.網頁標簽
1.網頁基本標簽
標題標簽段落標簽換行標簽水平線標簽字體樣式標簽注釋和特殊符號
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><meta name="keywords" content="養豬專業戶,養豬大廠"><meta name="description" content="來這個地方養豬">
<title>我的第一個網頁
</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.網頁圖像標簽（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>
```## 3.超鏈接標簽1. 插入鏈接（可以是圖片 可以是文字）2. 錨鏈接（可以回到/跳轉到設定位置）3. 功能性鏈接（mailto跳轉到發郵件聯系）
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 在自己的網頁中打開
<a href="1.我的第一個網頁.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個網頁" 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">回到網頁2
</a>
<a href="2.圖片標簽.html#down">跳轉
</a>
郵箱鏈接：mailto
<br>
<a href="mailto:248789758@qq.com"><img src="../resources/image/1.jpg" alt="圖片丟失" title="點擊聯系我" width="108" height="100"></a>
<a href="mailto:248789758@qq.com">點擊聯系我
</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>
應用范圍：公司網站底部
<br>
<dl><dt>學科
</dt><dd>java
</dd><dd>python
</dd><dd>C
</dd><dt>位置
</dt><dd>四川
</dd><dd>重慶
</dd>
5.表格標簽
- table 建表
- border:給表格加邊框
- 行 tr
- 列 td
<tr>
<td colspan="5">1-1
</td>
</tr><tr>
<td rowspan="2">2-1
</td><td>2-2
</td><td>2-3
</td><td>2-4
</td></tr><td>3-1
</td><td>3-2
</td><td>3-3
</td>
三.媒體元素
要加 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網頁底部
<header><h1>網頁頭部--Tencent--
</h1>
</header>
<section><h2>網頁主體--
</h2>
</section>
<footer><h2>網頁底部
</h2>
</footer>
效果
五.內聯框架
<body>
src:地址
<br>
width height
-->
<iframe src="" name="hello" frameborder="0" width="500" height="500"></iframe>
<a href="1.我的第一個網頁.html" target="hello">點擊跳轉
</a>
</body>
運行前
點擊跳轉打開frame的內聯窗口
六.表單
-
需要一個form框架
1.action:表單提交的位置，可以是網站，也可以是一個請求處理地址
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： 正則表達式（用于自定義驗證,正則表達式可以上網查）
-------------type---------
input type=" xxx "
button 普通按鈕
submit: 提交按鈕
reset：重置按鈕
image 圖像按鈕
radio: 選項 (需要name命名 相同name分為一組 才可以多選一，checked默認勾選)
checkbox：多選框(加入 checked 默認勾選)
file -------文件域（提交文件）
textarea- 文本域(比較特殊，用textarea創建一行，不在input內)
range-------滑塊
search------搜索框
————常用關鍵詞————
get：可以在URL中看見提交的信息，不安全，但是高效
post：相對安全，可以傳輸大文件，提交信息可以在審查元素中找到
type---->
七.完結
（完整筆記–轉自狂神說）
前端為體，飾以華物，予以交互，終未善用之站；后端為靈，百家之言匯集，數據應運而存，致以站點精魄，遂成活物；IT之路，艱險愈西行之徑，途中艱險bug。無理需求，尤勝洪水猛獸，遠超九九之數。然我輩當持之以本心，守之以熱忱。 勤習代碼編寫之力，精研數據解構之魂，通曉設計模式之體。待華發落盡之時，當成全棧大羅金仙之體，持鍵盤以登天門。此時意氣風發，腹中豪邁氣魄，當視天下甲方皆為草莽，產品經理皆為窮寇。斜睨世間，口出豪言:"還有誰?"。 嗚呼哀哉，此情此景當浮一大白~~~
總結
以上是生活随笔為你收集整理的前端--HTML入门的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
