Web开发

首页 » 常识 » 诊断 » 前端学习WebHTML基础入门经典
TUhjnbcbe - 2024/9/10 17:23:00
白癜风康复 http://www.jk100f.com/baidianfengzixun/baidianfengjiankang/m/5184.html
一、HTML简介

什么是HTML?

HTML(HyperTextMarkupLanguage)超文本标记语言,是一种用于创建网页的标准标记语言。

HTML有什么作用?

用于创建网页

1、HTML的特点

HTML不是编程语言,而是标记语言。

HTML使用标签的形式来标识网页的不同组成部分

HTML文档包含了HTML标签和文本

HTML文档又叫做Web页面

HTML文档的后缀:html或htm

2、HTML元素语法

HTML元素以开始标签起始

HTML元素以结束标签终止(双标签)

元素的内容是开始标签与结束标签之间的内容

某些HTML元素具有空内容(单标签)

空元素在开始标签中进行关闭(以开始标签的结束而结束)

大多数HTML元素可拥有属性

、示例

在python编辑器中创建一个HTML文件,下图是新创建HTML文件中自动生成的内容。

然后在HTML文件中写入一些数据,注意:斜杠表示结束的意思

写入数据后,点击运行,会生成一个网页

二、HTML文档注释

html文档代码中可以插入注释﹐注释是对代码的说明和解释﹐注释的内容不会显示在页面上﹐html代码中插入注释的方法是︰

!--注释--

运行结果

三、HTML标签1、HTML的标签的认识

HTML标签是由尖括号包围的关键词,比如html

成对出现的标签就是双标签,单个出现的就是单标签

标签在页面上会显示成一个方块,分为两类:

块元素:在布局中默认会独占一行,块元素后的元素需换行排列。

内联元素:元素之间可以排列在一行,设置宽高无效,它的宽高由内容撑开。

双标签:开始标签和结束标签

例如:h1/h1~h6/h6、p/p、a/a、span/span

单标签:只有开始标签

例如:img

块元素(会进行换行)

例如:h1/h1~h6/h6、p/p、列表标签

行内元素(不会换行)

例如:a/a、span/span、img

2、HTML常用标签的使用

标题标签:

表示文档的标题,除了具有块元素的基本特性外,还含有默认的外边距和字体大小。

在HTML文件中写入标题标签以及内容

运行结果

段落标签:

p/p表示一个文档中的文字段落

运行结果:

换行标签:

换行标签一般和段落标签一起使用:

p第一行br第二行/p

运行结果和解析:

超链接标签:

a/a链接到另一个网页的href

演示如下:

运行结果如下:

鼠标点击”跳转到百度“就会执行页面跳转

通用内联容器标签:

演示如下:

运行结果:

图片标签(单标签):

img在网页中插入图片:src(图片的路径),alt(当图片不存在时,用来说明)

演示如下:

(1)在HTML文件的目录下放置一张图片

(2)在HTML文件中写入内容

()运行结果:

()演示图片不存在时的情况

运行结果:ziyuan.best

、HTML文本格式化

代码如下:

metacharset="UTF-8"titleHTML文本格式化/title

运行结果:

4、HTML列表——无序与有序

HTML列表——无序

无序列表默认属性是disc,disc定义一个实体圆,所以disc不用刻意去设置这些属性都是通过type来定义的。

circle是定义一个空心圆

square定义实体方块

演示如下:

metacharset="UTF-8"titleHTML列表/title

运行结果:

HTML列表——有序

有序列表默认是数字往下计数的

type:规定列表的序号类型(1,A,a,I,i)

演示如下:

metacharset="UTF-8"titleHTML列表/title

运行结果:

1
查看完整版本: 前端学习WebHTML基础入门经典