HTML常用标签元素

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML常用标签元素相关的知识,希望对你有一定的参考价值。

一、基本概念

1、标签:html用于描述功能的符号称为“标签”,它是用来表现组成HTML文档的最基本的部件--HTML元素的。起始标签和终止标签之间的内容称为元素内容。

2、属性:在元素的起始标签中,可以设置1个或多个属性来控制标签的显示效果,格式为<标签名称 属性名 = “属性值”>

二、基本结构元素

HTML的基本结构元素主要有3个,它们是<html>、<head>和<body>元素,每个网页页面一般都包含这3个元素,而且它们只能出现一次。

1、<html>元素:Html标签:是包裹整个页面元素的根元素,它告诉浏览器整个文件是HTML格式,通常情况下document.documentElement(页面根元素)获取的就是html标签。

2、<head>元素:头部标签,用于定义文档的头部,它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等,主要包含meta标签、title标签、link标签(引入CSS)、script标签(引入CSS)等。

3、body 元素定义文档的主体。body 元素包含文档的所有内容(比如文本(<text>)、段落(<p>)、标题(<h1>)、换行(<br>)、分隔线(<hr>)、超链接(<link>)、图像(<img>)、表格(<table>)和列表(<ul>)等等。)

4、其它标签:

  4.1、<!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前,它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

  4.2、<meat>标签:提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词,<meta> 标签的属性定义了与文档相关联的名称/值对。比如<meta charset="utf-8" />,定义了文档以utf-8编码。

  4.3、<title>标签:页面的标题,设置之后将在浏览器选项卡看到。

5、一个简单的小demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我喜欢的唐诗</title>
</head>
<body>
    <h1>我喜欢的唐诗</h1>
    <div>
        <h2>早发白帝城</h2>
        <p>
            朝辞白帝彩云间,<br>
            千里江陵一日还。<br>
            两岸猿声啼不住,<br>
            轻舟已过万重山。
        </p>
    </div>
    <hr>
    <div>
        <h2>静夜思</h2>
        <p>
            床前明月光,<br>
            疑是地上霜。<br>
            举头望明月,<br>
            低头思故乡。
        </p>
    </div>
</body>
</html>

三、常用标签

1、下边列出部分常见的html4标签

常见标签列表
标签名 含义 属性值 h5中的新属性 备注(说明)
link - href(CSS地址)

属性:size

值:heightxwidth、any

描述:规定被链接资源的尺寸。仅适用于 rel="icon"

1.link 元素是空元素,它仅包含属性

2.此元素只能存在于 head 部分,不过它可出现任何次数 

script - src(JS地址)

属性:async

值:async

描述:规定异步执行脚本(仅适用于外部脚本) 

1.假如此元素内部的代码没有位于某个函数中,那么这些代码会在页面被加载时被立即执行

2.此元素的代码最好写在dom节点之后,否则可能会阻碍节点的渲染加载 

div 分割 - <div> 是一个块级元素,也就是说,浏览器通常会在 div 元素前后放置一个换行符 
table 表格 -
span 范围 -
a href(跳转地址)

属性:download

值:filename

描述:规定被下载的超链接目标。

属性:media

值:media_query

描述:规定被链接文档是为何种媒介/设备优化的

属性:type

值:MIME type

描述:规定被链接文档的的 MIME 类型 

1.如果不使用 href 属性,则不可以使用如下属性:download, hreflang, media, rel, target 以及 type 属性

2.被链接页面通常显示在当前浏览器窗口中,除非您规定了另一个目标(target 属性)

3.需用 CSS 来设置链接的样式 

p 段落 -
form 表单 action(表单提交地址)

属性:autocomplete

值:on/off

描述:规定是否启用表单的自动完成功能

属性:novalidate

值:novalidate

描述:如果使用该属性,则提交表单时不进行验证 

form 元素是块级元素,其前后会产生折行 
h1~h6 标题 -
ul 无序列表 - 用 CSS 来定义列表的类型 
li 列表项 -  - 用 CSS 来定义列表和列表项目的类型 
img 图片 src(显示的图片的地址)

1.从技术上讲,<img> 标签并不会在网页中插入图像,而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间

2.有两个必需的属性:src属性 和 alt属性(alt="文本"如果无法显示图像,浏览器将显示替代文本) 

input 用于搜集用户信息 type(类型)    
iframe 内联框架 Src(显示的文档的地址)

属性:sandbox

值:“”/allow-forms/allow-same-origin/allow-scripts/allow-top-navigation

描述:启用一系列对 <iframe> 中内容的额外限制

属性:seamless

值:seamless

描述:规定 <iframe> 看上去像是包含文档的一部分

 属性:srcdoc

值:HTML_code

描述:规定在 <iframe> 中显示的页面的 HTML 内容

 可以把需要的文本放置在 <iframe> 和 </iframe> 之间,这样就可以应对无法理解 iframe 的浏览器

备注:“-”表示没有改解释。h5中的新属性了解即可,应用还不是很频繁

2、常用的块状元素

块状元素,占行,如div,p,h1~h6,每一个块状标签都独占一行

3、常见的行内元素

行内元素(内联元素),不占行,如input,span,a,将在同一行共同显示

4、常见的列表元素

  4.1、概念

  <ul>(unordered):无序列表,故元素所包含的列表项将以粗点的方式显示

  <ol>(ordered):有序列表,故元素所包含的列表项将以顺序数字的方式显示

  <li>(list item):列表项,<li>元素被包含在<ul>或<ol>元素中

  4.2、demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
        <h2>一个无序列表</h2>
        <ul>
            <li>咖啡</li>
            <li></li>
            <li>牛奶</li>
        </ul>
    <hr>
        <h2>一个有序列表</h2>
        <ol>
            <li>咖啡</li>
            <li></li>
            <li>牛奶</li>
        </ol>
</body>
</html>

 

5、常用的表格元素

  5.1、概念

    表格由<table>标签来定义。每个表格均有若干行(由<tr>标签来定义),每行被分割为若干单元格(由<td>标签定义)

  5.2、demo  

<table border="1">
           <tr>
               <th>海绵宝宝</th>
               <th>柯南</th>
           </tr>
           <tr>
               <td>good boy</td>
               <td>clever boy</td>
           </tr>
 </table>

 

以上是关于HTML常用标签元素的主要内容,如果未能解决你的问题,请参考以下文章

前端开发中最常用的JS代码片段

vscode 常用插件

那些你常用的JSP知识

JS常用代码片段2-值得收藏

JS常用代码片段2-值得收藏

HTML常用标签元素