適合新手小白的HTML網頁編輯

• 前 言
• 一、HTML簡介基本元素組成
• 二、實操重點信息
• • 1.引入鏈接
  • 2.定義數據
  • 3.圖片插入
• 總結

---

前 言

博客學習記錄于3月4日星期四完成上傳編輯，作為剛剛新手小白的我們，在網頁實操過程中會遇到這樣那樣的問題，下面就第一周的學習進行分享記錄，包括實操網頁的的形成過程，發現的問題以及解決方法

一、HTML簡介基本元素組成

!DOCTYPE html 聲明為 HTML5 文檔
html元素是 HTML 頁面的根元素
head 元素包含了文檔的元（meta）數據
如 meta charset=“utf-8” 定義網頁編碼格式為 utf-8。
title 元素描述了文檔的標題
body 元素包含了可見的頁面內容
h1 元素定義一個大標題
p 元素定義一個段落

列出基本組成，幫助我們加深記憶

二、實操重點信息

1.引入鏈接

代碼如下（示例）：

<p> <a href="https://blog.csdn.net/Malfoid?spm=1000.2115.3001.5343">個人SCND</a> 歡迎前來評論指正！</p><iframe src="demo_iframe.htm" name="iframe_a"></iframe> <p><a href="https://blog.csdn.net/Malfoid?spm=1000.2115.3001.5343" target="iframe_a">個人SCND快速窗口</a></p> 注意：標簽a作為引入鏈接的標志，href作為屬性用于描述鏈接 另外一種在以frame為框架下的鏈接，該種鏈接以小窗口的方式快速預覽鏈接頁面

2.定義數據

代碼如下（示例）：

<div id="container" style="width:400px"> <div id="header" style="background-color:#B0C4ED;"> <h1 style="margin-bottom:0;">個人信息</h1></div> <div id="menu" style="background-color:#DCDCDC;height:200px;width:400px;float:left;">姓 名:某某某<br> 別 名:某某某<br> 愛 好:what<br> 言 語：words<br>

div作為布局元素，該處分別定義了框架大小、表頭背景顏色，以及表頭信息
b作為內聯元素，幫助引入實際內容數據

3.圖片插入

代碼如下（示例）：

<p><img src="./img/bbce19f73f1909a10c40bb4d947df54.jpg" alt="SCDN CHAT" style="float:right" width="80" height="80"> </p>

這里我們利用img引用圖片地址信息，并調整圖片位置以及尺寸大小
！注意在實際操作過程中，我們需要提前將預選圖片置于img根目錄下
在實操中出現圖片加載不出的情況，是因為在引入圖片位置時信息錯誤
我們應使用./…/向上查詢目錄，切記不可隨意更改圖片或文件源目錄

---

總結

關于HTML網頁的簡易編輯，有幾個值得注意的點，最基礎的是定義好內容的分區后，不要弄混內容的標題、主體、表頭等位置。其次在設置外觀以及圖片位置大小時，注意根據container的大小合理預留布局位置。第三引入圖片時需要提前將圖片導入img根目錄，在導入圖片時注意上級目錄查找，防止出現圖片顯示失敗的情況。第四源文件與源圖片二者不可隨意更改目錄，防止加載失敗。第五做好簡單網頁信息也要注意選取的顏色色差，防止出現文字無法清晰顯示的情況.
歡迎大家的評論與指正!!

總結

以上是生活随笔為你收集整理的HTML第一周学习笔记（标题重置版）的全部內容，希望文章能夠幫你解決所遇到的問題。

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