html基本操作，看了这些你就能做简易网页？

.HTML基本标签

HTML（HyperTextMark-upLanguage）即超文本标记语言或超文本链接标示语言，是WWW的描述语言。

HTML文档的结构

HTML标签由标签、属性、内容组成，属性与内容可选。
包含内容的标签以<…>开始，</…>结束，不包含内容的标签可以是如下格式：<…/>
属性的值尽量用双引号或单引号修饰
标签中的内容可以是其他的标签，称为原标签的子标签，子标签必须在父标签结束之前结束

2.页面背景色或背景图像

<body background="back_image.GIF" >

Hello World！

</body>

（网页背景图像）

<body bgcolor="#FFCCFF">

Hello World!

</body>

（网页背景色彩）

3.文本相关标签

标题标签<h1>－<h6>，<font>标签。

行的控制

段落标签<p>，换行标签<br>。

标题标签

<h#> ... </h#>，#=1, 2, 3, 4, 5, 6 （说明：<h1>到<h6>字体大小依次递减）

<sub>下标文字，<sup>上标文字，<del>删除线。

段落标签<p>，换行标签<br>。

内容分隔<HR>标签

<HR> 标签用于在页面上绘制水平线。

图像标签

图像的基本语法：<img src=“images/adv_2.jpg” width=“300” height=“150” alt=“在线报名” >

页面链接<A>标签

要链接到同一目录 (C:\HTML) 下的页面，可编写 <A HREF = “Doc1.htm”> 或 <A HREF = “C:\html\Doc2.htm”>

链接到本页面：

图像链接

</a>

滚动<marquee>标签

滚动文字或图像

</marquee>

说明：scrolldelay：表示滚动延迟时间，默认值为90；direction：表示滚动的方向，默认为从右向左。

2.HTML/CSS基础

目标：掌握列表的用法
使用表格的基本结构实现简单表格
使用表格相关标签实现跨行、跨列的复杂表格
会使用表单的基本结构制作表单页面
会使用各种表单元素实现注册页面
能理解post和get两种提交方式的区别

无序列表标签<ul>用于页面中没有顺序的列举项。

格式： <ul type=“”>

type属性设置标号的类型，值可以取：

1 disc ：实心圆点

2 circle ：空心圆点

3 square ：实心方块

无序列表

有序列表<ol>用于说明页面中的某些成分，需要按特定的顺序排列。有序列表的每项都有连续的编号。

格式：<ol type=“” start=“”>

type设置标号的类型，值可以取：

1 1：显示数字

2 A：显示大写字母

3 a：显示小写字母

4 I：显示大写罗马数字

5 i：显示小写罗马数字

有序列表

嵌套列表：一个列表作为另一个列表的一部分，即多层列表。

嵌套列表

表格<table>应用场合

门户网站应用表格

表格的基本语法

<table>...</ table >定义表格

如何创建表格

创建表格

表格表现

表头与标题

域名数量报表的创建

域名数量报表

什么是跨行跨列的表格

1.跨多列的表格

2.跨多行的表格

3.如何创建跨行跨列的表格

表格的尺寸和边框

品牌商城表的创建

width用来设置表格的宽度；height用来设置表格的高度；border用来设置表格边框尺寸大小；bordercolor用来设置表格边框颜色。

品牌商城表

背景：background属性用来设置表格的背景图片；bgcolor属性用来设置表格、行、列的背景色。

对其方式：align属性用来设置表格、行、列的对齐方式。

文本框基本语法

文本框的建设

文本框

密码框基本语法

密码框的建设

密码框，22个字符宽度

单选按钮基本语法

单选按钮的建设

单选按钮框

复选框基本语法

列表框基本语法

多行文本框基本语法

按钮基本语法

其他表单元素：<input type=“hidden”/>表单隐藏域
<input type=“image”/>表单图片按钮
<input type=“file”/>文件浏览

<label>标签

<label>标签可以绑定某个表单元素，用于扩展可以相应点击等事件的区域

如：当点击复选框右边的提示文字时，该复选框也可被选中。

内容有限，关于css，div和网页布局的部分就下次在和大家分享吧！

TML，即超文本标记语言Hyper Text Markup Language

在HTML中最重要的概念就是标签，或者说每一个你写的语句都是一个标签。

通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

以下是HTML基本（常用）标签：

<html></html> 定义 HTML

<head></head> 头

<meta> 元信息

<title></title> 标题

<body></body> 页面主体

<h></h> 标题（h1~h6）

<b></b> 加粗

<strong></strong> 加粗(两者效果相同)

<i></i> 斜体

<em></em> 斜体(效果相同)

<u></u> 下划线

<del></del> 删除线

<ul></ul> 无序列表

<ol></ol> 有序列表

<li></li> 列表每一行

<a></a> 超链接（href内容为跳转地址）

<font> 字体

<sub> 下标

<sup> 上标

<br> 换行

<p> 段落

<img> 图像（src内容为资源地址，本地或网络都可以）

<hr> 分割线

<table></table> 定义表格

<th></th> 表头

<tr></tr> 一行数据

<td></td> 一格数据

<form></form> form表单

<frame> 框架

（后两个初学用不到，以后会常用）

高兴铁铁们能来看html网页设计第二期~~~~撒花~~~~~

哎呀呀~实在是抱歉备注标签我记错了QAQ

这个才是备注标签不是//

首先我们先来学习上节课留下的剧透，分别是:

1.标题标签h1~h6

有人就说了标题标签上次剧透不就只有h1标签吗?

嘿嘿，其实他还有兄弟姐妹啦~

看图，代码是从上往下从左往右执行的请记住这个顺序哦~

还有,左边是代码右边是网页上面的效果哦~

源代码:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>1</h1>

<h2>2</h2>

<h3>3</h3>

<h4>4</h4>

<h5>5</h5>

<h6>6</h6>

</body>

</html>

如图所示，h1标签是最大的，h6标签是最小的

是不是很简单呀,现在已经学会了一个知识点了哦~

2.段落标签 p标签

源代码:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>第一条p标签</p>

<p>第二条p标签</p>

<p>第三条p标签</p>

</body>

</html>

3.链接标签 a标签

链接标签是什么?顾名思义就是一个链接看代码：

href是什么东西啊？是a标签的属性啦~里面用来输入你需要跳转到的网页的链接

属性里面的东西是不会出现在网页上面的出现的只有在a标签里面的内容哦

当我点击百度这两个字后就给我跳转到了我们href属性里面的https://www.baidu.com

当然我们也可以跳转到我们自己制作的网页上面但要求是同一个项目下面的网页

是不是很有趣~

看视频:

视频中我们点击链接后就跳转到了山这个网页出现了一张山的图片，是不是有点小意思~

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<a href="new_file3.html">跳转到山的网页</a>

</body>

</html>

4.图像标签 img标签

图像标签标签如其意，就是用来上传图像的一个标签~~

我们这里介绍一下img的两个属性:

src就是用来放图片的地址的，他会根据地址去找图片然后把图片放到网页上面。

alt有什么用啊就是当图片显示失败的时候就会显示alt里面的文字

看视频:

我们把图片的地址破坏后，就会显示一个图片错误的图标和alt里面的内容

怎么拖图片到img文件下，老师~~~我不知道

看视频

嘿嘿就直接把文件拖进来就ok了是不是很简单~

okk，好快啊怎么一下就学完了今天的知识点~~~

嘻嘻今天可是有作业的~

请根据下面的网页仿写一下:

完成后作业发再评论区哦，有什么不懂的可以留言包回答的。

加油呀，每天学一点争取做出属于自己的一个网页~

上一期

在线咨询

上一篇：分享一个大数据可视化大屏看板案例（echarts实现含中国地图）
下一篇：七小时带你入门HTML+CSS网页设计，编写网页代码的思路（三）

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

html基本操作，看了这些你就能做简易网页？

.HTML基本标签

2.HTML/CSS基础

1.标题标签h1~h6

2.段落标签 p标签

3.链接标签 a标签

4.图像标签 img标签

您的项目需求