web之HTML入门03

最新推荐文章于 2024-10-11 16:26:01 发布

老杨玩python

最新推荐文章于 2024-10-11 16:26:01 发布

阅读量193

点赞数 2

分类专栏： web前端文章标签： html 前端 html5

本文链接：https://blog.csdn.net/weixin_43079274/article/details/124158096

版权

web前端专栏收录该内容

15 篇文章 10 订阅

订阅专栏

块级元素和内联元素

HTML 标签（元素）可以分为两个类别，分别是块级元素和内联元素（也叫行内元素）

块级元素

块级元素最主要的特点是它们自己独占一行，块级元素中最具代表性的就是<div>此外还有<p>、<nav>、<aside>、<header>、<footer>、<section>、<article>、<ul>、<address>、<h1>~<h6>等。

块级元素一般都具有特定的语义，可以使代码的可读性更强。

块级元素的主要特征如下所示：

不管是否使用换行标签<br>，块级元素总是在新行上开始；
块级元素的宽度、高度以及外边距和内边距等都可以控制；
如果省略块级元素的宽度，那么它的宽度默认为当前浏览器窗口的宽度；
块级元素中可以包含其它的内联元素和块级元素(P标签除外)

内联元素

内联元素也可以称为行内元素，行内元素中最常用的是<span>此外还有<b>、<i>、<u>、<em>、<strong>、<sup>、<sub>、<big>、<small>、<li>、<ins>、<del>、<code>、<cite>、<dfn>、<kbd>和<var>等。

内联元素往往带有某种特殊的显示效果，可以代替部分 CSS 样式，非常实用，例如：

<b>和<i>标签可以修饰字体；
<sub>和<sup>两个标签分别用来定义下标文本和上标文本。

行内元素的主要特征如下所示：

行内元素和其他元素会在同一行上显示；
行内元素的宽、高以及外边距和内边距都不可以改变；
行内元素的宽度就是其中内容的宽度，且不可以改变；
内联元素中只能容纳文本或者其他内联元素。

对于行内元素的使用，需要注意如下几点：

设置宽度 width 无效；
设置高度 height 无效，但可以通过 line-height 来设置行高；
可以设置 margin 外边距，但只对左右外边距有效，上下无效；
设置 padding 内边距时，只有左右 padding 有效，上下则无效，需要注意的是元素范围是增大了，但是对元素周围的内容是没影响的；
可以通过 display 属性将元素在行内元素和块级元素之间进行切换

重点说明两个标签

和分别是最常用的块级元素和内联元素，我们有必要重点说明一下。

`<div>` 标签

<div> 是非常重要的块级标记，在网页布局（Layout）方面发挥着重要的作用，使用<div>

我们可以定义页面的各个部分，通过与 CSS 相结合可以实现各种各样的效果

<div> 标签及其包围的内容可以看做网页的一个板块，<div> 标签本身并没有什么特殊的显示效果，需要借助 CSS 样式对外边距、内边距、背景、边框等进行设置，从而达到对板块布局的目的

`<span>` 标签

HTML 中的<span>标签是一个内联元素，可以对 HTML 文档中的内容进行修饰，此标签不会为文档内容提供任何视觉效果，但可以与 CSS 结合使用来美化网页

<span> 标签本身并没有什么特殊效果，通常需要借助 CSS 来改变内容的样式，比如字体、颜色、大小、边框、背景等。

那些不被推荐的 HTML 内联标签，比如 <font>、<small>、<big> 等，建议使用<span> + CSS 样式来代替；但是那么具有明确语义的内联标签，比如 <strong>、<b>、<code>、<em>、<i>、<s> 等，还是应该坚持使用，这些标签比<span>更加具有语义，更有助于搜索引擎理解页面内容

元素的嵌套

大部分 HTML 元素都可以相互嵌套，并且嵌套深度也没有明确限制，这包括：

块级元素可以嵌套块级元素；
块级元素可以嵌套内联元素；
内联元素可以嵌套内联元素；
内联元素可以嵌套块级元素。

值得注意的是，一般不建议在内联元素中嵌套块级元素，这样不仅不符合开发规范，还会导致内联元素被撑开，独自占据一行

HTML5新特性

HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。

这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性

语义化标签

以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的

发展到了HTML5后，新增了一些语义化标签，这样的话更加有利于浏览器的搜索引擎搜索，也方便了网站的seo（Search Engine Optimization，搜索引擎优化），下面就是新增的一些语义化标签

<header> 头部标签
<nav> 导航标签
<article> 内容标签
<section> 定义文档某个区域
<aside> 侧边栏标签
<footer> 尾部标签

在这里插入图片描述

多媒体标签

多媒体标签分为音频 audio 和视频 video 两个标签使用它们，我们可以很方便的在页面中嵌入音频和视频，而不再去使用落后的flash和其他浏览器插件了。

因为多媒体标签的属性、方法、事件比较多，因此我们需要什么功能的时候，就需要去查找相关的文档进行学习使用。

视频标签- video

当前元素支持三种视频格式：尽量使用 mp4格式

 <video src="media/mi.mp4"></video>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OZhwOqPv-1649855493795)(前端html.assets/1649852639401.png)]

由于各个浏览器的支持情况不同，所以我们会有一种兼容性的写法，这种写法了解一下即可

<video  controls="controls"  width="300">
    <source src="move.ogg" type="video/ogg" >
    <source src="move.mp4" type="video/mp4" >
    您的浏览器暂不支持 <video> 标签播放视频
</ video >

上面这种写法，浏览器会匹配video标签中的source，如果支持就播放，如果不支持往下匹配，直到没有匹配的格式，就提示文本

video 常用属性

属性	值	描述
autoplay	autoplay	视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题）
controls	controls	向用户显示播放控件
width	像素	设置播放器宽度
height	像素	设置播放器高度
loop	loop	循环播放
preload	auto(预先加载视频) none(不加载视频)	规定是否预加载视频(如果有了autoply就忽略该属性)
src	url	视频url地址
poster	Imgurl	加载等待的画面图片
muted	muted	静音播放

音频标签- audio

当前元素支持三种视频格式：尽量使用 mp3格式

<audio src="media/music.mp3"></audio>

在这里插入图片描述

由于各个浏览器的支持情况不同，所以我们会有一种兼容性的写法，这种写法了解一下即可

< audio controls="controls"  >
    <source src="happy.mp3" type="audio/mpeg" >
    <source src="happy.ogg" type="audio/ogg" >
    您的浏览器暂不支持 <audio> 标签。
</ audio>

上面这种写法，浏览器会匹配audio标签中的source，如果支持就播放，如果不支持往下匹配，直到没有匹配的格式，就提示文本

audio 常用属性

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放
controls	controls	如果出现该属性，则向用户展示控件，比如播放按钮
loop	loop	如果出现该属性，则每当音频结束重新开始播放
src	src	要播放音频的url

<audio src="media/music.mp3" autoplay="autoplay" controls="controls"></audio>

小结

音频标签和视频标签使用方式基本一致
浏览器支持情况不同
谷歌浏览器把音频和视频自动播放禁止了
我们可以给视频标签添加 muted 属性来静音播放视频，音频不可以（可以通过JavaScript解决）
视频标签是重点，我们经常设置自动播放，不使用 controls 控件，循环和设置大小属性

新增的表单元素

在H5中，帮我们新增加了很多类型的表单，这样方便了程序员的开发

<!-- 我们验证的时候必须添加form表单域 -->
<form action="">
    <ul>
        <li>邮箱: <input type="email" /></li>
        <li>网址: <input type="url" /></li>
        <li>日期: <input type="date" /></li>
        <li>时间: <input type="time" /></li>
        <li>数量: <input type="number" /></li>
        <li>手机号码: <input type="tel" /></li>
        <li>搜索: <input type="search" /></li>
        <li>颜色: <input type="color" /></li>
        <!-- 当我们点击提交按钮就可以验证表单了 -->
        <li> <input type="submit" value="提交"></li>
    </ul>
</form>

常见输入类型

text password radio checkbox button file hidden submit reset image

新的输入类型

属性值	说明
email	限制用户输入必须为email类型
url	限制用户输入必须为URL类型
date	限制用户输入必须为日期类型
time	限制用户输入必须为时间类型
month	限制用户输入必须为月类型
week	限制用户输入必须为周类型
number	限制用户输入必须为数字类型
tel	手机号码
search	搜索框
color	生成一个颜色选择表单