学习目标:
一周掌握HTML入门知识;
一周后自己可以制作简单的网页。
学习内容:
1、了解网页
网页总结:
- 网页生成制作:有前端人员书写HTML文件,然后浏览器打开,就能看到了网页
- 网页是图片、链接、文字、声音、视频等元素组成其实就是一个html文件(后缀名为html)
- .HTML:超文本标记语言,用来制作网页的一门语言.有标签组成的.比如图片标签链接标签视频标签等。
2、Web标准
主要包括结构(Structure )、表现(Presentation )和行为(Behavior )三个方面。
标准 | 说明 |
---|---|
结构 | 结构用于对网页元素进行整理和分类,现阶段主要学的是HTML。 |
表现 | 表现用于设置网页元素的版式、颜色、大小等外观样式,主要指的是CSs |
行为 | 行为是指网页模型的定义及交互的编写,现阶段主要学的是Javascript |
结构类似于鸟的身体(HTML),表现类似于外观装饰(CSS),行为类似于行为动作(JS)。
相比较而言,三者中结构最重要。
3、HTML基本的结构标签(骨架标签)
标签名 | 定义 | 说明 |
<html></html> | HTML标签 | 页面中最大的标签,我们称为根标签 |
<head></head> | 文档的头部 | 注意在head标签中我们必须要设置的标签是title |
<titile></title> | 文档的标题 | 让页面拥有一个属于自己的网页标题 |
<body></body> | 文档的主题 | 元素包含文档的所有内容,页面内容基本都是放到body里面的 |
4、下载安装VScode,并学会使用。
- 双击打开软件→新建文件(Ctrl+N)→保存(Ctrl+S)注意要保存为.html文件.
- <!DOCTYPE html>文档类型声明标签,告诉浏览器这个页面采取htm15版本来显示页面.
- <html lang= “en”>告诉浏览器或者搜索引擎这是一个英文网站.本页面采取英文来显示.
- <meta charset="UTF-8”/>必须写.采取UTF-8来保存文字.如果不写就会乱码.
- VScode插件的使用
5、标签
- 标题标签:<h1>—<h6> 例:<h1>我是一级标题</h1>
- 段落标签:可以把HTML文档分割为若干段落。段落与段落之间保有空隙。 例:<p>我是一个段落标签</p>
- 换行标签:强制换行。 例:我是一个换行标签<br />
- <div>和<span>标签:
<div>和<span>是没有语义的,它们就是一个盒子,用来装内容的。
特点:1.<div>标签用来布局,但是现在一行只能放一个<div>。大盒子
2.<span>标签用来布局,一行上可以多个<span>。小盒子
语义 | 标签 | 说明 |
加粗 | <strong></strong>或者<b></b> | 更推荐使用<strong>标签加粗语义更强烈 |
倾斜 | <em></em>或者<i></i> | 更推荐)用<em>标签加粗语义更强烈 |
删除线 | <del></del>或者<s></s> | 更推荐使用<del>标签加粗语义更强烈 |
下划线 | <ins></ins>或者<u></u> | 更推荐使用<ins>标签加粗语义更强烈 |
属性 | 属性值 | 说明 |
src | 文本 | 必须属性 |
alt | 文本 | 替换文本。图像不能显示的文字 |
title | 文本 | 提示文本。鼠标放到图像上,显示的文字 |
width | 像素 | 设置图像的宽度 |
height | 像素 | 设置图像的高度 |
border | 像素 | 设置图像的边框粗细 |
学习时间:
1、每天上午8:30-11:30.
2、每天下午14:30-17:30.
学习产出:
今天做了一个简单的网页: