认识HTML

学习目标:

一周掌握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.


学习产出:

今天做了一个简单的网页:

HTML代码

 

 

查看网页

 

  • 4
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值