HTML

一、 HTML语言介绍
(一)、什么是HTML

HTML称为超文本标记语言,是一种标识性的语言。
它包括一系列标签.通过这些标签可以将网络上的文档格式统一,
使分散的Internet资源连接为一个逻辑整体。
HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,
图形、动画、声音、表格、链接等。 [1] 超文本是一种组织信息的方式,
它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。
这些相互关联的信息媒体可能在同一文本中,也可能是其他文件,
或是地理位置相距遥远的某台计算机上的文件。
这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接,
为人们查找,检索信息提供方便。

HBuilderX
网页一般由三个部分组成,html+css+javascript,统称网页三剑客。

(二)、为什么要学HTML

用户的好处:通过html,用户可以更加方便的了解所需要的的咨询。
仅仅需要浏览器即可。浏览器是每台电脑、手机、平板都自带的。
程序员的好处:因为大家都有浏览器,因此只需要开发一次html页面即可。
可以大大的减轻开发的压力。

(三)、第一个HTML

注意事项:
1.标签都是成对出现。  有开标签、也有闭合标签  <html>   </html>
2.标签的命名都是已经定义好的。  如果想要有标签的效果,应该要
使用已经定义好的标签
3.标签名都是小写的
4.标签不能随便嵌套
5.标签最好有缩进,可读性更强
6.文件的后缀名为 .html 或者 .htm
<html>
	<head>
			<title>入门案例</title>
	</head>

	<body>
			第一个html
	</body>
</html>

(四)、HTML编辑工具

开发中,代码本身就比较多,如果格式还需要程序时刻注意,对开发而言难度
更大。
有一款良好的编辑工具,可以大大减轻开发压力。 
hbuilder 对代码的格式、插件的兼容都比较好。

在这里插入图片描述
二、 html常用标签
(一)、标题、水平线标签

  1. 标题标签

    标题标签 一共有 6个 h1-h6 具体的区别就是 字号大小
    字号最大是h1,字号最小的是h6.

共性:

  1. 都有加粗的效果
  2. 都有独占一行的效果
  3. 标题标签都有相同的行距

区别:
标签名数字越大,字号就越小

代码
在这里插入图片描述
运行效果
在这里插入图片描述
2.水平线

水平线


从左到右一直延伸的一条线。hr水平线可以设置一些参数,改变这条线的形态

参数:
width: 控制水平线的长度,单位是px,也可以是百分比,参考浏览器宽度进行缩放
align: 控制水平线的对齐方向,默认是center,居中。 常用值:left、center、right
color: 控制水平线的颜色 英文单词 色号
size: 控制水平线的粗细情况

特点:

  1. hr水平线也会独占一行
  2. hr是一个单标签,自闭和

代码
在这里插入图片描述
案例效果
在这里插入图片描述
(二)、字体格式化标签
1.字体标签
font 用于调整字体的颜色、大小等等

参数:
color:用于调整字体的颜色
size: 用于调整字体的大小 ,有既定值,1最小,7最大。超过7没有效果

代码
在这里插入图片描述
效果图
在这里插入图片描述
2.加粗标签

strong 、b 标签对标签内部的文本,作出强调作用。
在浏览器上的效果是以加粗呈现

代码
在这里插入图片描述
效果图
在这里插入图片描述
斜体标签
斜体标签, em 、 i 对标签内部的元素进行倾斜展示.

代码
在这里插入图片描述
效果图
在这里插入图片描述
(三)、段落标签
在这里插入图片描述
代码
在这里插入图片描述
案例效果
在这里插入图片描述
(四)、实体字符
在这里插入图片描述
代码
在这里插入图片描述
效果图
在这里插入图片描述
三、 图片标签

代码
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
四、 列表标签
在这里插入图片描述
(一)、 有序、无序列表
代码
在这里插入图片描述
效果
在这里插入图片描述
(二)、超链接标签
在这里插入图片描述
代码
在这里插入图片描述
效果图
在这里插入图片描述
五、 表格标签
在这里插入图片描述
案例介绍
在这里插入图片描述
案例标签(table、tr、td)
在这里插入图片描述
代码
在这里插入图片描述
效果图
在这里插入图片描述
案例标签(th)
在这里插入图片描述
代码
在这里插入图片描述
效果图
在这里插入图片描述
六、 表单
在这里插入图片描述
案例标签

  1. form

在这里插入图片描述
2. input输入框控件
在这里插入图片描述
在这里插入图片描述
value
在这里插入图片描述
默认选中效果
在这里插入图片描述
3. select
在这里插入图片描述
在这里插入图片描述
4. 文本域-textarea
在这里插入图片描述
在这里插入图片描述
代码
在这里插入图片描述
七、 html布局框架
在这里插入图片描述
在这里插入图片描述
介绍
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 黑客帝国 设计师:白松林 返回首页