HTML5：简介与常用标签

最新推荐文章于 2023-04-20 07:34:24 发布

李鴻耀同學

最新推荐文章于 2023-04-20 07:34:24 发布

阅读量1.7k

点赞数

分类专栏： HTML 文章标签： html5 标签文档结构

本文链接：https://blog.csdn.net/Hierarch_Lee/article/details/54236380

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

HTML 文档结构

HTML（Hyper Text Markup Language 超文本标记语言）基本文档结构是指组成一个基本的HTML页面所必须的元素标签。它的根节点是由一个文档声明 “<!doctype html>” 和一个“<html>”标签组成的，而<html>标签下级（又称“子节点”）又包含“<head>”和“<body>”两个主要的标签，具体编写格式如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

HTML 标签

HTML标签是由标签名、属性名、属性值和内容组成。

这里写图片描述

HTML 元素类别

html 元素分为块级元素（block）、行内元素（inline）以及行内块元素（inline-block）。

display：block

block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素的宽度。block元素可以设置width、height属性。块级元素及时设置了宽度，仍然会独占一行。block元素可以设置margin、padding属性。

display：inline

inline元素不会独占一行，多个相邻的行内元素会排在同一行里，直到一行排列不下，才会新换行，其宽度随元素的内容而变化。inline元素设置width、height属性无效。inline元素的margin和padding属性，水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果，但竖直方向的padidng-top、padding-bottom、margin-top以及margin-bottom不会产生边距效果。

display：inline-block

简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其具有block的宽度高度特性又具有inline的同行特性。

HTML 常用标签

文本标签

标题：h1~h6
文本：span
段落：p
强调：em
粗体：b
斜体：i
删除线：s
上标：sup
下标：sub

语义化标签

头部：header
尾部：footer
导航：nav
文章：article
章节：section
侧栏：aside
地址：address
时间：time
标记：mark
布局：div
引用：blockquote
文档主要内容：main （块级标签）
详细信息：details，一般与 summary 标签一起使用，summary 作为details的第一个子标签使用

格式化标签

换行：br
水平分割线：hr

HTML 常用转义字符

"："
&：&
<：<
>：>
©：©
®：®;
¥：¥
空格：

HTML 图片 ‘img’

html 图片使用 ‘img’标签

常用属性

src：指定图片链接地址（必须）
width/height：设置宽度/高度
title：设置图片标题，鼠标悬浮在图片上时显示
alt：设置提示，当图片加载失败时会显示

HTML 超链接 ‘a’

a 标签是一个行内元素

常用属性

href：指定链接地址
target：规定“href”属性中指定的网页或文件以何种方式行进跳转或打开，其值包括：_blank、_self、_parent、_top以及iframe的name属性的值

利用超链接跳转到本页锚点

将a标签的“href”属性设置为“#”+“指定元素的ID值”后，该超链接不再是进行页面间的跳转或是文件的打开了，而是将页面滚动到本页面中ID属性值和“href”属性值“#”后的值所对应的值的地方，页面滚动的目标元素的上边缘将和浏览器内容窗口上边缘重合。

<div id="anchor"></div>
<a href="#anchor">点击跳转到锚点</a>

利用超链接下载指定文件

加上“download”属性，并指定一个文件下载后的名称即可。

超链接的回到顶部按钮

将href属性值设置为‘#top’即可。

嵌入式框架 iframe

常用属性

name：设置iframe的名称
width：设置iframe的宽度，值可以为像素（不用添加“px”单位）和百分数
height：设置iframe的高度，值可以为像素（不用添加“px”单位）和百分数
src：设置iframe元素内需要显示页面或文件的URL地址，该属性的值可以由与之关联的a标签点击设置（通过将a标签的“target”属性的值设置为该iframe的“name”属性的值进行关联）
frameborder：设置是否显示边框（0 表示不显示边框/ 1 表示要显示边框）
scrolling：设置是否允许滚动（quto/yes/no）

HTML 列表

html 列表包括无序列表、有序列表以及定义列表，其显示类型为块级元素。

无序列表 ul

常用属性

type：列表项目符号类型（disc（默认）/circle/square）

使用示例

<ul>
    <li>无序列表01</li>
    <li>无序列表02</li>
    <li>无序列表03</li>
</ul>

有序列表 ol

常用属性

type：列表项目符号类型（1（默认）/A/a/I/i）
reversed：倒序
start：起始值

使用示例

<ol>
    <li>有序列表01</li>
    <li>有序列表02</li>
    <li>有序列表03</li>
</ol>

定义列表 dl

定义列表分为两层：第一层为定义的列表dl；第二层分为两个部分，即dt和dd，dt用于定义列表中的项目，dd用于描述定义的项目，它们的显示类型都为“块级元素（block）”。相对于“无序列表”和“有序列表”，这种列表由于其自身的结构原因，对需要进行名词性描述的列表更为适用。

使用示例

<dl>
    <dd>HTML</dd>
    <dt>创建Web页面</dt>

    <dd>CSS</dd>
    <dt>设置页面样式</dt>

    <dd>JavaScript</dd>
    <dt>让页面动态起来</dt>
</dl>

列表嵌套使用

无序列表与有序列表嵌套使用方式一致，这里以无序列表为例:

<ul>
    <li>Web前端工程师
        <ul>
            <li>HTML</li>
            <li>CSS
                <ul>
                    <li>Bootstrap</li>
                    <li>LESS</li>
                    <li>SASS</li>
                </ul>
            </li>
            <li>JS
                <ul>
                    <li>JavaScript</li>
                    <li>jQuery</li>
                    <li>AngularJS</li>
                    <li>...</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>其他开发工程师</li>
</ul>

运行效果

这里写图片描述

HTML 表格

html 表格使用 ‘<table>’标签

表格常用属性

width/height：设置宽度/高度
border：设置边框
align：设置表格对齐方式（left/center/right）
cellspacing：设置单元格与单元格之间的间距
cellpadding：设置单元格与内容之间的间距
bgcolor：设置表格背景颜色
background：设置背景图片
colspan：跨列 ‘<td colspan="2"></td>’
rowspan：跨行 ‘<td rowspan="2"></td>’

李鴻耀同學

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
HTML5：简介与常用标签

HTML 文档结构HTML（Hyper Text Markup Language 超文本标记语言）基本文档结构是指组成一个基本的HTML页面所必须的元素标签。它的根节点是由一个文档声明 “<!doctype html>” 和一个“<html>”标签组成的，而<html>标签下级（又称“子节点”）又包含“<head>”和“<body>”两个主要的标签，具体编写格式如下：<!DOCTYPE html>
复制链接

扫一扫