前言

博客学习记录于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第一周学习笔记（标题重置版）相关推荐

机电传动控制课程第一周学习笔记
机电传动课程第一周学习笔记本周的学习内容主要是第一章绪论和第二章机电传动系统的动力学基础,结合课程学习和预习复习回顾内容如下: 1.绪论:学习了机电传动控制目的与任务.发展历程和我们该如何学习这门课 ...
机电传动控制第一周学习笔记
机电传动控制第一周学习笔记: 1 这一周主要讲述了概论和机电传动控制系统动力学基础两个章节内容. 2 绪论中说明了<机电传动控制>课程主要内容为下图所示: 3机电传动控制系统动力学基础章节 ...
20135320赵瀚青LINUX内核分析第一周学习笔记
赵瀚青原创作品转载请注明出处<Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 一.概述第一周的学习内容主 ...
吴恩达深度学习 | (20) 序列模型专项课程第一周学习笔记
课程视频第一周PPT汇总吴恩达深度学习专项课程共分为五个部分,本篇博客将介绍第五部分序列模型专项的第一周课程:循环序列模型. 目录 1. 为什么选择序列模型? 2. 数学符号 3. 循环神经网络模 ...
吴恩达机器学习公开课第一周学习笔记
Octave是一种编程语言,旨在解决线性和非线性的数值计算问题.Octave为GNU项目下的开源软件,早期版本为命令行交互方式,4.0.0版本发布基于QT编写的GUI交互界面.Octave语法与Mat ...
大一下第一周学习笔记
新的学期 ACM依然是我的热爱怀着一颗热爱的心去学习,去训练周一 3.1(KMP+Manacher) 回归编程我一位很优秀的同学说如果你做的事情是你热爱的,那么你就不会觉得累 acm就是我热爱 ...
机器学习基础-吴恩达-coursera-（第一周学习笔记）----Introduction and Linear Regression
课程网址:https://www.coursera.org/learn/machine-learning Week 1 -- Introduction and Linear Regression 目录 ...
面向对象高级编程（上）-- 第一周学习笔记（Boolan）
培养正规的.大气的编程习惯一.C++简介 1,分类 C++分为基于对象和面向对象两种基于对象是指简单的类定义,数据封装,没有类与类的联系,面对的是单一class的设计.又可细分为不带指针的类和带指 ...
Linux内核分析——第一周学习笔记
20135313吴子怡.北京电子科技学院 chapter 1 知识点梳理第一节存储程序计算机工作模型 1.冯诺依曼体系结构:即具有存储程序的计算机体系结构.目前大多数拥有计算和存储功能的设备(智能 ...

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

适合新手小白的HTML网页编辑

前言

一、HTML简介基本元素组成

二、实操重点信息

1.引入链接

2.定义数据

3.图片插入

总结

HTML第一周学习笔记（标题重置版）相关推荐

最新文章

热门文章

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

适合新手小白的HTML网页编辑

前 言

一、HTML简介基本元素组成

二、实操重点信息

1.引入链接

2.定义数据

3.图片插入

总结

HTML第一周学习笔记（标题重置版）相关推荐

最新文章

热门文章

前言