标签的分类
单标签和双标签 单标签:<标签>
双标签:<标签><标签>
行内标签和块标签
块内标签:独占一行,不和其他标签并排排列 。如:div ul li ol p h1-h6
行内标签:和其他便签并排。设置宽高无效 ,上下外边距无效左右有效, 内边距有效, 上下内边距不占位,左右内边距占位。 如:span b u i a
行内块:一行排列设置宽高有效 img
常用的标签
<head> :用于定义文档的头部,它是所有头部元素的容器。<head> 中的元素可以引用脚本、 指示浏览器在哪里找到样式表、提供元信息等等。文档的头部描述了文档的各种属性和 信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头 部包含的数据都不会真正作为内容显示给读者。可用在 head 部分的标签:<base>, <link>, <meta>, <script>, <style>, 以及 <title>。
<link> :定义文档与外部资源的关系。最常见的用途是链接样式表。
<title> :定义文档的标题,它是 head 部分中唯一必需的元素。
<div>: 用来实现大区域排版,可定义文档中的分区或节,把文档分割为独立的、不同的部分。 它可以用作严格的组织工具,并且不使用任何格式与其关联。
<h1> - <h6> :可定义标题文字。<h1> 定义最大的标题。<h6> 定义最小 的标题。h1是一级 标题,h2是二级标题,以此类推。
<p>:定义段落文字,p 元素会自动在其前后创建一些空白。浏览器会自 动添 加这些空间, 也可以在样式表中规定。
<a>:标签定义超链接,用于从一张页面链接到另一张页面。
属性:href=”url”,url跳转的页面地址(默认在当前页面打开)
target=”_blank” 在新页面打开被链接文档,还有其它的值,
_self默认。在相同的框架中打开被链接文档;
_parent在父框架集中打开被链接文档;
_top在整个窗口中打开被链接文档;
framename在指定的框架中打开被链接文档。
<ol><li>:定义有序的HTML列表,ol列表默认是升序。
属性:reversed=“reversed” 规定类表的顺序为降序。
start=”number” 规定有序列表的起始值
type=”1” 默认值数字有序列表。(1、2、3、4);
a 按字母顺序排列的有序列表,小写。(a、b、c、d);
A按字母顺序排列的有序列表,大写。(A、B、C、D);
i罗马字母,小写。(i, ii, iii, iv);
I罗马字母,大写。(I, II, III, IV);
<ul><li>:定义无序的HTML列表,结构类似的布局,注意:ul的子级只能是 li ,li的父级只能是 ul、ol <span><b><u><i>:用来实现小元素。
<b>:规定粗体文本
<u>:定义下滑线文本
<i>:显示斜体文本效果
<br>:可插入一个简单的换行符。
<img>:向网页中嵌入一幅图像。如:<img src=”images/赵丽颖.jpg”>
属性:src=”url”,url图片的地址;
alt=”要提示的文字” 图片不能正常显示的时候,提示文字;
title=“提示的文字” 鼠标移入提示文字;
width 设置图像的宽度;
height 设置图像的高度
<audio>:向网页中嵌入一个音频。比如音乐和其他音频流
属性:src=”url”,url音频的地址
autoplay="autoplay" ,设置音频自动播放
loop="loop",循环播放音频。
<video>:向网页中嵌入一个视频。
属性:src=”url”,url视频的地址
autoplay="autoplay" ,设置视频自动播放
height ,设置视频播放器的高度。
width,设置视频播放器的宽度。
loop="loop",循环播放视频。
<button>: 定义一个按钮。在 button 元素内部,可以放置内容,比如文本或图像。这是该元素 与使用 input 元素创建的按钮之间的不同之处。
<input>:用于搜集用户信息。根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以 是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。该标签没有结束标签
查看更多的标签:https://www.w3school.com.cn/tags/tag_input.asp
h5新标签
<!-- header nav section main footer aside article用法和div一样,只是语义更重了 -->
<header>头部</header>
<nav>导航</nav>
<section>大区域内容</section>
<main>主要的内容</main>
<footer>底部</footer>
<aside>侧边栏</aside>
<artice>文章</artice>