HTML第一周学习笔记（标题重置版）

---

前 言

博客学习记录于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根目录，在导入图片时注意上级目录查找，防止出现图片显示失败的情况。第四源文件与源图片二者不可随意更改目录，防止加载失败。第五做好简单网页信息也要注意选取的颜色色差，防止出现文字无法清晰显示的情况.
欢迎大家的评论与指正!!