HTML入门级别教程(持续更新)

简介: HTML入门级别教程(持续更新)


目录

目录

1.行内标签。

2块级标签

3.form标签

4HTML5新特性

1.行内标签。
1.1a标签

_blank 在新窗口中打开被链接文档。
_self 在相同的框架中打开被链接文档。
_top 在整个窗口中打开被链接文档。
_parent 在父框架集中打开被链接文档。

//跳转到书签的位置
熊猫的生活习惯

 //定义书签
<a name="habit">生活习惯</a>

1.2span标签
span 标签是用来组合文档中行内元素的,比如你在文档中写入一些文字,页面会以默认样式输出这些文字,若我们想给这段话中的某些词语添加不一样的字体颜色,这时我们可以用 span 标签去包裹这些词语,然后通过 span 标签去设置字体颜色。span 标签就像一个透明的盒子,我们可以把多个盒子放在架子的同一行。

1.3strong标签
可以给字体起到加粗的效果。

1.4img标签

src 属性定义了图像的链接地址。
alt 属性则当图像无法显示时,替代显示的文本。
title 属性当鼠标悬停到图片上面时候会出现title设置的信息仅仅作为了解即可

1.5align
大家都发现图片的加载顺序是从左上方开始加载的,我们想要让图片居中或者居右显示就要使用到align标签。

<!DOCTYPE html>












2块级标签
2.1 div标签
它主要是用来布局的,如果不加任何样式的话,预览页面看不到任何效果。

在 HTML 中,div 标签是最重要的一个块级元素,div元素会独占一行即使是设置了width。它可以是组合其他 HTML 元素的容器,相当于是个透明的盒子,可以把其他标签放在里面。

2.2列表标签
无序列表
有序列表
自定义列表
2.2.1有序列表
属性值 说明
A 用大写字母作为排序符号
a 用小写字母作为排序符号
I 用大写罗马字符作为排序符号
i 用小写罗马字符作为排序符号
1 用数字作为排序符号
type指定有序列表的类型,是大写古罗马字符作为排序符号,start指的是从4开始


  1. 项目一

  2. 项目二

  3. 项目三

2.2.2无序列表的使用
在 HTML 文档中,所谓无序列表,是指以实心圆 ●(默认)、空心圆 ○、实心方块 ■ 开头的,没有顺序的列表项目。

比如,有时候我们会用无序列表的形式来做一个总结,这样会让内容看起来更加清晰,

属性值 说明
disc 实心圆 ●
circle 空心圆 ○
square 实心方块 ■
3.form标签
form标签有两个重要的属性

action:表单提交的地址

method:表单提交的方法一般是get或者post请求

3.1input标签
type:type属性给text是文本类元素

3.2选择类表单元素
有单选框和复选框两种元素,

单选框指定type=“radio",复选框指定type=”checkbox“,type指定为reset属性可以将表单中属性全部重置。

但是要注意想要达到单选或者复选的条件就必须将name属性设置为一样的。

3.3下拉列表
在html中可以使用select和option来实现下拉列表select标签可以用于用户下拉列表,其中每个选项都由option标签标识。

select 有两个常用属性,如下所示:

属性 描述
multiple 设置下拉列表可以选择多项。
size 设置下拉列表选择几个表项。
option 有两个常用属性,如下所示:

属性 描述
selected 设置是否被选中。
value 设置列表项的默认值。
4HTML5新特性
audio 标签
在 HTML5 中,使用 audio 标签来播放声音文件或者音频流,该标签支持 Ogg、MP3、WAV 等音频格式。

其使用格式如下:


参数说明:

src 属性用于指定要播放的声音文件。
controls 是 controls="controls" 简写形式,用于提供播放、暂停和音量控件。
除了上面两种属性,audio 标签还有以下属性可用:

autoplay 属性:音频自动播放。
loop 属性:音频自动重复播放。
preload 属性:用来缓冲 audio 标签的大文件,它有三个属性值 none(不缓冲)、auto(缓冲音频文件)、metadata (缓冲文件的元数据)。

video标签
使用video标签可以向页面中嵌入媒体播放器




新表单类型email
当输入不是email格式的时候提交表单会提醒你不是复合的格式


新属性-placeholder
用于指定text中的提示输入的内容

相关文章
|
3月前
|
前端开发 程序员
【前端web入门第二天】01 html语法实现列表与表格_合并单元格
本文介绍了HTML中的列表与表格的使用方法。列表包括无序列表(`&lt;ul&gt;`嵌套`&lt;li&gt;`)、有序列表(`&lt;ol&gt;`嵌套`&lt;li&gt;`)和定义列表(`&lt;dl&gt;`嵌套`&lt;dt&gt;`和`&lt;dd&gt;`)。
71 19
|
3月前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
60 13
|
2月前
|
移动开发 前端开发 JavaScript
HTML入门(详细)
HTML入门(详细)
30 0
|
3月前
|
前端开发 程序员 C++
【前端web入门第一天】01 开发环境、HTML基本语法文本标签
本文档详细介绍了HTML文本标签的基础知识。首先指导如何准备开发环境,包括安装VSCode及常用插件;接着全面解析HTML的基本结构与标签语法,涵盖从基本骨架搭建到注释的使用,以及标题、段落、换行和平行线、文本格式化等标签的具体应用,适合初学者循序渐进地掌握HTML。
|
4月前
|
缓存 Java 应用服务中间件
SpringMVC入门到实战------七、SpringMVC创建JSP页面的详细过程+配置模板+实现页面跳转+配置Tomcat。JSP和HTML配置模板的差异对比(二)
这篇文章详细介绍了在SpringMVC中创建JSP页面的全过程,包括项目的创建、配置、Tomcat的设置,以及如何实现页面跳转和配置模板解析器,最后还对比了JSP和HTML模板解析的差异。
SpringMVC入门到实战------七、SpringMVC创建JSP页面的详细过程+配置模板+实现页面跳转+配置Tomcat。JSP和HTML配置模板的差异对比(二)
|
4月前
|
移动开发 开发者 HTML5
构建你的首个个人网站:HTML基础入门
【8月更文挑战第29天】在数字化时代,拥有一个个人网站是展示自我、分享知识和技能的窗口。本文将引导你通过简单的步骤,使用HTML构建你的第一个个人网站。我们将探索HTML的基础标签,页面结构,以及如何将这些元素融合在一起创建一个简单的网页。无论你是编程新手还是希望扩展你的技术工具箱,这篇文章都提供了一条清晰的路径,帮助你开始你的网站开发之旅。
|
6月前
杨老师课堂之网页制作HTML的学习入门-含有案例1
杨老师课堂之网页制作HTML的学习入门-含有案例
48 3
|
6月前
|
存储 移动开发 API
HTML5本地存储:从入门到精通
HTML5本地存储:从入门到精通
85 1
|
5月前
|
人工智能 前端开发 JavaScript
HTML 【实用教程】(2024最新版)
HTML 【实用教程】(2024最新版)
57 0
|
6月前
|
前端开发
前端基础学习(一)HTML入门
前端基础学习(一)HTML入门
35 0
前端基础学习(一)HTML入门