H5(HTML)网页制作基础

HTML网页
HTML（Hyper Text Markup Language）的全称为超文本标记语言，是一种标记语言。
它包括一系列标签。

双击桌面《此电脑》或者Win键+E键
或者右击《开始》菜单，找文件资源管理器

让计算机显示文件的扩展名

打开记事本程序
开始菜单—搜索：记事本

保存一个文件，文件名是index.html

在记事本里面，输入如下内容：

内容（任意字符）

备注：是一个标记，告诉计算机，这个是网页文件，是一个标记，告诉计算机网页到这里结束了

是一个标记，告诉计算机，这里开始是网页的内容正文，告诉计算机内容结束。

文字的标题标记

我和我的祖国，一级标题

我和我的祖国，二级标题

我和我的祖国，三级标题

备注：写完保存文件，浏览器测试看效果 h1是一级标题，h2是二级标题,以此类推,有6级标题.

段落标记例子

你好北京

hello world

测试段落效果

备注：

和

是一个段落标记

准备一个图片素材
搜索 *.jpg 或者 *.png

找到自己满意的图片，复制到桌面
改文件名为a或b（方面后面使用）

HTML链接标记

测试下链接效果

点我啊 戳我啊 备注:通过 和标记这里是一个链接 href定义点击链接后要打开谁

图片标记例子

我的靓照 备注：这里的 标记告诉计算机这里是图片,src后面写图片的文件名

控制图片的大小：

我的靓照 备注：width宽度，height高度

文字的视觉效果例子：

欢迎来到我的网页

备注：和括起来的所有内容，有动画效果，bgcolor定义背景颜色 颜色可以使用英文或者颜色代码

欢迎来到我的网页

如果我的工作，经常需要修改html文件，纯手动改代码有困难，可以安装notepad++,或者其他能自动补齐的工具！

HTML样式–背景颜色例子：

我和我的祖国

我的一段新文字

备注：在body,h1,p里面都加style样式，background-color定义背景颜色

HTML样式–字体颜色、字体大小例子：

我和我的祖国

我和我的祖国

+++++++++++++++++++++++++++++++++++

我和我的祖国

我和我的祖国

备注：color定义字体颜色，分号分隔font-size定义字体大小,20px代表20像素

HTML样式–边框例子

这里是网页内容（任意输入） 备注：margin-left是左边距，margin-right是右边距，border是定义边框,2px是粗细,dashed是边框用线做边框

HMTL表格

第一行，第一列	第一行，第二列
第二行，第一列	第二行，第二列

备注：和 表格的标记，告诉计算机这里有表格 border边框，和是行，和是列

HTML无序列表

脑黄金

• 聪明
• 美颜驻容
• 延年益寿

备注：

• 和

定义无序列表，里面的每个

• 是一个列表内容

• HTML有序列表

  脑黄金

  1. 聪明
  2. 美颜驻容
  3. 延年益寿
  备注：
  1. 和
  定义无序列表，里面的每个
• 是一个列表内容

• HMTL下拉菜单

  你喜欢什么汽车品牌
  大众 长城 奥拓 小鹏 蔚来 备注：
  代表回车 , 和是下拉菜单的标签 里面的option就是下拉菜单的每个选项

  HTML文本框例子1

  给我留言: 备注：和定义表单，表单type样式可以是"text","radio","submit" text是文本框，radio是选择框，submit是提交框 input让别人在网页里面输入内容，size就是大小

  HTML文本框例子2

  请登录...

  账户:
  密码:

  HTML文本框例子2

  请登录...

  账户:
  密码:
  

  HTML选择框例子

  请选择性别:
  男
  女
  

  菜单

  电子产品
  女士衣服
  男士衣服