标签格式

  • 格式：

    • 双边：<标签名 属性1="值1" 属性2='值2' 属性3=值3>内容</标签名>

    • 单边：<标签名 属性1="值1" 属性2='值2' 属性3=值3 />

  • 特点：

    • 标签都是成对出现的，单边标签也不要忘记结尾的'/'

    • 容错性强，但是不要故意写错，故意挑战浏览器的解析能力

    • 标签名已经预定义，不要随便自己起名字

    • 标签统一使用小写，属性值统一使用双引号包括

  • 说明：标签就是HTML文件的骨架，是最重要的组成部分

全局架构标签

  • 示例：

    <html>
        <!--注释-->
        <head>
            <title>页面标题</title>
        </head>
        <body text="red" bgcolor="#00ff00">
            这里是页面内容
        </body>
    </html>

  • 说明

    • html：是文档中最大的标签，所有的标签都有放在该标签中

    • head：头部，里面的内容不会显示在页面上，但是可以设置页面信息，如：标题、字符集

    • body：身体，存放用于显示的页面内容，是页面的主体部分

  • body属性：

    • text：设置字体颜色

    • bgcolor：设置背景颜色

  • 几乎每个标签都有的属性：

    • class、id、style、name

常用标签(文本修饰)

  • 标题：h1~h6，字体从大到小，h1一个页面最多一个，不能为了调整字体大小而使用

  • 加粗：<b></b>、<strong></strong>

  • 斜体：<i></i>、<cite></cite>、<em></em>

  • 下划线：<u></u>

  • 删除线：<s></s>

  • 上标：<sup></sup>

  • 下标：<sub></sub>

  • 字体：<font></font>

    • size：大小

    • color：颜色

    • face：类型

常用标签(格式控制)

  • 换行：<br />，浏览器对任意多个空格、回撤都解析为一个空格

  • 段落：<p></p>，表示一个段落

  • 横线：<hr />，一条顺平横线

  • 滚动：<marquee></marquee>

  • 原样：<pre></pre>，浏览器中显示的文本内容与文本一样

  • 无序列表：<ul></ul>，里面的每个元素都是一个<li></li>

    • type：disc(实心圆，默认)、circle(空心圆)、square(实心方框)

  • 有序列表：<ol></ol>

    • type：1、A、a、I

    • start：起始序号

字符实体

  • 说明：HTML中预留的字符都必须替换为字符实体才可以显示。

  • 提醒：不用刻意记录这些字符实体，用的时候查一下即可。

  • 示例：

    &gt;            >
    &lt;            <
    &nbsp;          空格
    &amp;           &

  • 参考：http://www.w3school.com.cn

URL(重点)

超链接(a)

  • 名称：<a></a>

  • 说明：超链接，可以完成页面的跳转

  • 属性：

    • href：指定跳转地址

    • title：光标放上去的提示信息

    • target：新页面的打开目标

      • _self：当前标签栏，默认设置

      • _blank：新的空白标签栏

      • _parent：覆盖父级标签栏

      • _top：覆盖顶层标签栏

    • name：设置锚点，用于跳转定位

      • 可以在href属性设置时更精准定位跳转地址

      • 如：<a name="p3"></a>，使用：<a href="xxx#p3">xxx</a>

      • 说明：锚点不但可在一个页面内部跳转，还可进行跨越面跳转定位

　　　

多媒体标签

  • 图片：img(重点)

    • src：图片资源位置

    • width：宽度

    • height：高度，单独设置一个时，另一个会等比缩放，若同时设置可能会拉伸或压缩

    • title：光标放上去的提示信息，图片加载失败是也会显示。

  • 音频(audio)

    • src：指定资源

    • controls：显示控制条(值为controls，可以不写值)

    • loop：循环播放(值为loop，可以不写值)

    • autoplay：自动播放(值为autoplay，可以不写值)

  • 视频(video)

    • 音频的属性视频都有，功能也一样

    • 多出来关于尺寸的属性：width、height

    • 单独设置会进行等比缩放，同时设置时会出现留白

表格(table)

  • 说明：就是类似于excel的形式

  • table：表格标签，所有的表格内容都要放在该标签中

    • border：边框尺寸

    • bordercolor：边框颜色

    • width：宽度

    • height：高度

    • bgcolor：背景色

    • align：水平对齐方式(left默认、center、right)

  • tr：表格中的一行

    • bgcolor：背景色

    • align：水平对齐方式(left默认、center、right)

    • valign：垂直对齐方式(top、middle默认、bottom)

  • td：一行的一列

    • colspan：列合并，合并一行的若干列

    • rowspan：行合并，合并一列的若干行

  • th：功能与td相同，只不过样式不同，进行了着重强调，用于设置表头

  • caption：表格标题，通常用于描述表格的作用

分帧(iframe)

  • 说明：就是一个页面中包含另一个页面

  • 属性：

    • src：加载的资源地址

    • width：宽度

    • height：高度

    • frameborder：是否显示边框(1/0)

    • scrolling：滚动条控制(yes、no、auto)

    • name：标识窗口的名字，可以用于a标签的打开目标地址

分帧(frameset)

  • 说明：替代body定义网页框架，而且可以根据需要指定尺寸或比例进行划分

  • 属性：

    • rows：垂直方向的尺寸划分，可以使用像素、也可以使用百分比，*表示其他

    • cols：水平方向的尺寸划分

    • noresize：禁止调整尺寸

    • frameborder：是否显示边框

    • border：边框宽度

    • bordercolor：边框颜色

  • frame：frameset中的一帧内容，也就是一个页面

  • noframes：浏览器不支持frameset时使用，兼容设置显示内容

表单(form)(非常重要)

  • 说明：服务器收集用户信息，如：登录、注册等场景

  • form：表单，所有提交的数据都需要放在该标签中

    • action：指定提交地址，默认提交到当前地址

    • method：请求方法，get、post

      • get：提交的数据会出现在URL中

      • post：提交的数据不会出现在URL中，经常用于登录、注册、上传文件等

  • input：输入框，是表单中最重要的组成部分

    • name：指定名字，没有名字是无法提交的(即使能提交，数据也没有意义)

    • value：文本框的内容，一般用于不可输入的文本框

    • placeholder：占位内容，通常用于提示

    • size：设置尺寸(宽度)

    • maxlength：限制最大输入字符个数

    • readonly：只读状态，不可更改

    • disabled：禁用状态

    • type：设置输入框类型

      • text：可见文本，默认属性

      • submit：是提交按钮

      • password：密文文本

      • radio：单选框，注意事项：

        • 多个单选项的name属性要一样

        • 因为无法输入内容，所以需要书写value属性进行选项的区分，不必非要与提示信息一致

        • checked属性可以用于默认选择状态的设置

        • 想让提示信息关联单选框，可以通过label标签结合id属性完成

      • checkbox：复选框，注意事项与radio相同

      • hidden：隐藏字段，不可见的，可以传递特定不公开信息

      • file：上传文件字段，需要对表属性进行配套设置

        • 表单提交方法只能是post：method="post"

        • 指定编码类型：enctype="multipart/form-data"

  • select：下拉选择框

    • 属性name需要设置

    • 属性size可以控制显示的选项个数

    • 每一个选项通过option标签体现，必须指定其value属性，默认选中使用selected

  • textarea：文本域，多行文本

    • 说明：input是单行文本，textarea是多行文本

    • 属性：

      • rows：设置行数

      • cols：设置列数

    • 注意：不要在输入区域书写任何多余的内容

  • 表单提交

    • <input type="submit" />，标准的提交按钮，可以提交按钮本身的值

    • <button></button>，可以提交，但是不能提价按钮的值

    • <input type="button" />，长的跟按钮一样，但是不能提交，后面可以结合JS使用

head标签

  • 说明：一般存放对网页进行说明的内容，不会显示在页面上

  • 示例：

    <!--设置字符集-->
    <meta charset="utf-8" />
    <!--设置标题-->
    <title>表单内容</title>
    <!--设置网页关键字-->
    <meta name="keywords" content="PYTHON培训,PYTHON开发培训" />
    <!--设置网页描述-->
    <meta name="description" content="教育第一" />
    <!--设置文件类型-->
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <!--加载CSS文件-->
    <link rel="stylesheet" type="text/css" href="xxx.css">
    <!--定时刷新页面-->
    <meta http-equiv="refresh" content="5;url=http://www.baidu.com">

　　

　　　　　

HTML常用标签及属性的更多相关文章

  1. HTML初学者常用标签及属性

    1.HTML5头部结构   [DOCTYPE html] 声明文档类型为HTML5文件. 文档声明在HTML5文档必不可少,且必须放在文档的第一行.   [meta标签] 1-charset属性:单独 ...

  2. HTML之常用标签及属性

    标签 标签分类 标签名 英文 英文含义 标签类型 备注 HTML页面结构 < html> HyperText Markup Language 超文本标记语言 < head> h ...

  3. html常用标签及属性,常用英语单词

    目录 html常用标签 html常用标签属性 前端常用英语单词表(未完待续) 欢迎评论点赞交流,转发请添加原博客连接谢谢! Ctrl键+F 可以查找你想要的内容哦! html常用标签 htmi结构 & ...

  4. Web前端——Html常用标签及属性

    html 常用的标题等标签就不记录了,只记录一下比较少见的标签以及属性 表格 table td 单元格 tr 表的行 th 表头 td或th可以下面的两个属性达到跨行或跨列 表格跨行 rowspan ...

  5. css常用标签及属性

    css样式表常用的形式有三种,一.行内样式表.二.内部样式表.三.外部样式表 一. <p style="color:red;">nice to meet you< ...

  6. html中一些常用标签及属性

    html中标签分为块级标签和行级标签 块级标签常用的有 <div> <p> <h1><hr><pre><table><ul ...

  7. 4.HTML 常用标签及属性

    1. 链接 标签: <a></a> 属性: href:链接地址 target:打开方式 _blank:新标签页打开 _self:当前页面打开(默认) title:链接提示 2. ...

  8. HTML常用标签和属性大全

    html标签< <marquee>...</marquee>普通卷动 <marquee behavior=slide>...</marquee>滑 ...

  9. Html 常用标签及属性

    <html>…</html>      定义 HTML 文档<head>…</head>   文档的信息<meta>             ...

随机推荐

  1. 【算法python实现】 -- 不同路径II

    原题:https://leetcode-cn.com/problems/unique-paths-ii/ 思路 与上题相同,不过是加了路障.地图上每一格都有两个状态,有路障或无路障,分别以1和0表示其 ...

  2. 牛客JS编程大题（一）

    1.找出元素 item 在给定数组 arr 中的位置 function indexOf(arr,item){ return arr.indexOf(item);} 2.计算给定数组 arr 中所有元素 ...

  3. 从零开始学习渗透Node.js应用程序

    本文来源于i春秋学院,未经允许严禁转载 0x01 介绍 简单的说 Node.js 就是运行在服务端的 JavaScript.Node.js 是一个基于Chrome JavaScript 运行时建立的一 ...

  4. Java-大数据方向学习和已掌握知识点整理

    现在的项目是大数据相关项目,一路走来从最初的 C 开发到 Java 再到 大数据,不容易 大数据方向知识点太多,优先掌握了主流的一些技术并运用到了现在的项目中 另外也整理了一份java开发和项目管理方 ...

  5. Telerik for AJAX RadGrid控件

    作为一名.net小白,今天分享一下telerik知识的学习.熟悉ASP.NET Web Form的都知道Grid View或者是List View等表格控件,所以今天和大家分享一下telerik Ra ...

  6. PHP画图的基本步骤GD库

    一:PHP新建一个图片步骤: :创建画布: $im=imagecreatetruecolor(300,80) 2:定义颜色: $black=imagecolorallocate($im, 0, 0, ...

  7. Java线程池(ThreadPoolExecutor)原理分析与使用

    在我们的开发中"池"的概念并不罕见,有数据库连接池.线程池.对象池.常量池等等.下面我们主要针对线程池来一步一步揭开线程池的面纱. 使用线程池的好处 1.降低资源消耗 可以重复利用 ...

  8. javascript中的LHS和RHS

    最近在拜读<你不知道的javascript>,接触到一个比较陌生的概念,LHS查询和RHS查询. 简单的一句话来讲,当变量出现在赋值操作符的左侧时进行LHS查询,出现在右侧时进行RHS查询 ...

  9. sql server 备份与恢复系列六 文件组备份与还原

    一. 概述 文件备份是指备份一个或多个文件或文件组中的所有数据.使用文件备份能够只还原损坏的文件,而不用还原数据库的其余部份,从而加快恢复速度.例如,如果数据库由位于不同磁盘上的若干文件组成,在其中一 ...

  10. 理解express中的中间件

    express是轻量灵活的node.js Web应用框架”.它可以帮助你快速搭建web应用.express是一个自身功能极简,完全是由**路由**和**中间件**构成的一个web开发框架,本质上说,一 ...