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中的提示输入的内容

相关文章
|
17天前
|
前端开发 JavaScript 开发工具
【HTML/CSS】入门导学篇
【HTML/CSS】入门导学篇
23 0
|
2月前
|
存储 移动开发 前端开发
HTML新特性【HTML5内联SVG、SVG_矩形、SVG 与 Canvas两者间的区别 、HTML5_MathML 】(三)-全面详解(学习总结---从入门到深化)
HTML新特性【HTML5内联SVG、SVG_矩形、SVG 与 Canvas两者间的区别 、HTML5_MathML 】(三)-全面详解(学习总结---从入门到深化)
48 0
|
12天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
18 1
|
1月前
|
移动开发 前端开发 JavaScript
15.HTML5视频播放器制作教程
15.HTML5视频播放器制作教程
33 0
|
1月前
|
移动开发 前端开发 JavaScript
HTML语言基础知识入门
HTML语言基础知识入门
|
2月前
|
数据采集 数据安全/隐私保护
高效网络采集实践:使用 Haskell 和 html-conduit 下载 www.baidu.com 视频完整教程
网络采集在当今信息时代中发挥着关键作用,用于从互联网上获取数据并进行分析。本文将介绍如何使用 Haskell 进行网络编程,从数据采集到图片分析,为你提供一个清晰的指南。我们将探讨如何使用爬虫代理来确保高效、可靠的数据获取,并使用 Haskell 的强大功能来分析和处理数据。
|
2月前
|
Web App开发
某教程学习笔记(一):04、HTML基础
某教程学习笔记(一):04、HTML基础
14 0
|
2月前
|
前端开发 JavaScript
从零开始学习前端开发:HTML、CSS、JavaScript入门指南
【2月更文挑战第1天】本文将带领读者从零开始学习前端开发,介绍HTML、CSS和JavaScript的基础知识与应用,帮助读者快速入门前端开发领域。
65 1
|
2月前
|
移动开发 前端开发 搜索推荐
html5基础入门
html5基础入门
66 0
|
3月前
|
前端开发 JavaScript 容器
【详细教程】HTML、CSS 和 JS 实现一个任务管理工具-ToDoList
【详细教程】HTML、CSS 和 JS 实现一个任务管理工具-ToDoList
43 1
【详细教程】HTML、CSS 和 JS 实现一个任务管理工具-ToDoList