一、基本标签

  1. <body>
  2.     <b>加粗</b>
  3.     <i>斜体</i>
  4.     <u>下划线</u>
  5.     <s>删除线</s>
  6.  
  7.     <!--p段落标签独占一行-->
  8.     <p>段落标签</p>
  9.  
  10.     <h1>标题1格式</h1>
  11.     <h2>标题1格式</h2>
  12.     <h3>标题1格式</h3>
  13.     <h4>标题1格式</h4>
  14.     <h5>标题1格式</h5>
  15.     <h6>标题1格式</h6>
  16.  
  17.     <!--换行br标签-->
  18.     <br>
  19.  
  20.     <!--水平线hr标签，独占一行-->
  21.     <hr>
  22. </body>

二、特殊字符

  1. <body>
  2.     <!-- 空格 -->&nbsp;
  3.     <!-- > -->&gt;
  4.     <!-- < -->&lt;
  5.     <!-- & -->&amp;
  6.     <!-- ￥ -->&yen;
  7.     <!-- 版权商标 -->&copy;
  8.     <!-- 注册商标 -->&reg;
  9. </body>

三、div和span标签

<div></div>           没有默认的样式，独占一行，属与块级标签，方便后续使用css调整样式

<span></span>     没有默认的样式，span不换行，属于行内标签（内联标签），默认在一行显示，方便后续使用css调整样式

块级元素与行内元素的区别：
所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的。

标签支持嵌套：

① 块级标签可以包含内联标签

② p标签不能包含p标签，浏览器会自动补全p标签

③ p标签不能包含div标签，浏览器会自动补全p标签

块级标签（独占一行）：p/div/h1~h6/hr/li/tr

行内标签（内联标签）：（默认都在一行显示,宽度由内容决定的）

四、img标签

  1. <body>
  2. <!--src=图片路径，alt=图片未加载成功时的提示，title=鼠标悬浮时提示信息，width=宽，height=高（宽和高只能用一个自动等比缩放）-->
  3. <img src="./zhouyu.jpg" alt="周瑜加载失败" title="周瑜" width="225">
  4. </body>

五、a标签

超链接标签

所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。

href属性指定目标网页地址。该地址可以有几种类型：

  • 绝对URL - 指向另一个站点（比如 href="http://www.jd.com）
  • 相对URL - 指当前站点中确切的路径（href="index.htm"）
  • 锚URL - 指向页面中的锚（href="#top"）

target：

  • _blank表示在新标签页中打开目标网页
  • _self表示在当前标签页中打开目标网页
  1. <body>
  2. <!--绝对URL,点击后在新页面打开相应的网站-->
  3. <a href="http://www.google.com.hk" target="_blank">谷歌</a>
  4.  
  5. <!--相对URL，点击后在当前页打开网站目录的路径-->
  6. <a href="index.html">首页</a>
  7.  
  8. <!--锚URL，指向当前页面中的锚-->
  9. <a href="#a1">锚点</a>
  10. <h1 id = a1></h1>
  11. </body>

六、列表

① 无序列表

<ul></ul> 标签

  1. <!--无序列表要用ul标签，type=disc实心圆点，默认值，circle空心圆，square实心方块，none无样式-->
  2. <ul type="circle">
  3.     <li>第一项</li>
  4.     <li>第二项</li>
  5.     <li>第三项</li>
  6. </ul>

type属性：

  • disc（实心圆点，默认值）
  • circle（空心圆圈）
  • square（实心方块）
  • none（无样式）

② 有序列表

<ol></ol>标签

type属性：

  • 1 数字列表，默认值
  • A 大写字母
  • a 小写字母
  • Ⅰ大写罗马
  • ⅰ小写罗马
  1. <!--有序列表用ol标签表示，type=1数字列表（默认值），A 大写字母，a 小写字母，I 大写罗马字母， i 小写罗马字母-->
  2. <!--start 表示从第三个字母开始-->
  3. <ol type="A" start="3">
  4.     <li>第一项</li>
  5.     <li>第二项</li>
  6.     <li>第三项</li>
  7. </ol>

③ 标题列表

  1. <!--用dl表示标题列表-->
  2. <dl>
  3.     <dt>标题</dt>
  4.     <dd>内容1</dd>
  5.     <dd>内容1</dd>
  6.     <dt>标题2</dt>
  7.     <dd>内容1</dd>
  8.     <dd>内容1</dd>
  9. </dl>

七、表格

  1. <!--表格格式设置，border表格边框，cellpadding内边距，cellspacing外边距-->
  2. <table border="1" cellpadding="1" cellspacing="1">
  3.     <!--表头-->
  4.     <thead>
  5.     <tr>
  6.         <th>序号</th>
  7.         <th>水果</th>
  8.         <th>产地</th>
  9.     </tr>
  10.     </thead>
  11.     <!--表格-->
  12.     <tbody>
  13.     <tr>
  14.         <td>1</td>
  15.         <td>苹果</td>
  16.         <td>广西</td>
  17.     </tr>
  18.     <tr>
  19.         <td>2</td>
  20.         <td>香蕉</td>
  21.         <td>海南</td>
  22.     </tr>
  23.     </tbody>
  24. </table>

属性:

  • border: 表格边框.
  • cellpadding: 内边距
  • cellspacing: 外边距.
  • width: 像素 百分比.（最好通过css来设置长宽）
  • rowspan: 单元格竖跨多少行
  • colspan: 单元格横跨多少列（即合并单元格）

八、form

功能：

表单用于向服务器传输数据，从而实现用户与Web服务器的交互

表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含textarea、select、fieldset和 label标签。

① label标签（与input配合使用）

定义：<label> 标签为 input 元素定义标注（标记）。
说明：

label 元素不会向用户呈现任何特殊效果。

<label> 标签的 for 属性值应当与相关元素的 id 属性值相同。

方式一：

  1. <!--label for的属性值指向input对应id-->
  2. <label for="user">用户名：
  3.     <input id="user" type="text" name="username">
  4. </label>

方式二：

  1. <!--label与input配合，不需使用id-->
  2. <label>密码：
  3.     <input type="password" name="pwd">
  4. </label>

② input标签

  1. <!--form表单，向网站已post的形式提交数据，multipart/form-data是post的一种提交方式-->
  2. <form action="http://127.0.0.1:8080" method="post" enctype="multipart/form-data">
  3. <!--text 单行输入文本-->
  4. <div>
  5. <label >用户名
  6.     <input type="text" name="username">
  7. </label>
  8. </div>
  9.  
  10. <!--password 密码输入框-->
  11. <div>
  12.     <p>
  13.     <label >密码
  14.         <input type="password" name="pwd">
  15.     </label>
  16.     </p>
  17. </div>
  18.  
  19. <!--date 日期输入框-->
  20. <div>
  21.     <p>
  22.     <label >生日
  23.         <input type="date" name="birthday">
  24.     </label>
  25.     </p>
  26. </div>
  27.  
  28. <!--radio 单选框-->
  29. <div>
  30.     <p>
  31.     <label >性别
  32.         <!--显示的与input无关联，定义值，checked设置默认值-->
  33.         <input type="checkbox" name="sex" value="male" checked="checked">男
  34.         <input type="checkbox" name="sex" value="female">女
  35.     </label>
  36.     </p>
  37. </div>
  38.  
  39. <!--checkbox 复选框 checked
  1. 设置默认值
  1. --> <div> <p> <label >爱好 <input type="checkbox" name="hobby" value="basketball">篮球 <input type="checkbox" name="hobby" value="football">足球 <input type="checkbox" name="hobby" value="volleyball">排球 </label> </p> </div> <div> <!--button普通按钮一般用于JS；submit提交按钮，可以提交当前表单；reset 重置按钮--> <p> <input type="button" value="按钮"> </p> <p> <input type="submit" value="提交"> </p> <p> <input type="reset" value="重置"> </p> </div> </form>
type属性值 表现形式 对应代码
text 单行输入文本 <input type=text" />
password 密码输入框 <input type="password"  />
date 日期输入框 <input type="date" />
checkbox 复选框 <input type="checkbox" checked="checked"  />
radio 单选框 <input type="radio"  />
submit 提交按钮 <input type="submit" value="提交" />
reset 重置按钮 <input type="reset" value="重置"  />
button 普通按钮 <input type="button" value="普通按钮"  />
hidden 隐藏输入框 <input type="hidden"  />
file 文本选择框 <input type="file"  />

③ select标签

属性说明：

  • multiple：布尔属性，设置后为多选，否则默认单选
  • disabled：禁用
  • selected：默认选中该项
  • value：定义提交时的选项值
  1. <form action="" method="post">
  2.     <!--单选下拉框-->
  3.     <select name="city" id="city">
  4.         <option value="beijing">北京</option>
  5.         <!--selected设置为默认值-->
  6.         <option value="shenzhen" selected="selected">深圳</option>
  7.         <option value="shanghai">上海</option>
  8.         <option value="guagnzhou">广州</option>
  9.     </select>
  10.  
  11.     <!--复选下拉框-->
  12.     <select name="city2" id="city2" multiple>
  13.         <option value="beijing">北京</option>
  14.         <!--selected设置为默认值-->
  15.         <option value="shenzhen" selected="selected">深圳</option>
  16.         <option value="shanghai">上海</option>
  17.         <option value="guagnzhou">广州</option>
  18.     </select>
  19. </form>

④ textarea多行文本

属性说明：

  • name：名称
  • rows：行数
  • cols：列数
  • disabled：禁用
  1. <!--textarea 多行文本框-->
  2. <label>自我介绍
  3. <textarea name="self_introduction" id="self_introduction" cols="30" rows="10">
  4. </textarea>
  5. </label>

HTML的BODY内标签介绍的更多相关文章

  1. css块级标签，行内标签，行内块标签的转换（2）

            css块级标签,行内标签,行内块标签的转换 版权声明 本文原创作者:雨点的名字 作者博客地址:https://home.cnblogs.com/u/qdhxhz/ 在基础1中,我详细讲 ...

  2. WEB学习-基础知识：列表、表单、div和span、注释、字符实体、HTML废弃标签介绍

    列表 无序列表 无序列表,用来表示一个列表的语义,并且每个项目和每个项目之间,是不分先后的. ul就是英语unordered list,“无序列表”的意思. li 就是英语list item , “列 ...

  3. html 不常用标签介绍

    文本元素 <wbr> 如果单词太长,或者您担心浏览器会在错误的位置换行,那么您可以使用 <wbr> 元素来添加 Word Break Opportunity(单词换行时机).英 ...

  4. java web学习总结(二十七) -------------------JSP标签介绍

    一.JSP标签介绍 JSP标签也称之为Jsp Action(JSP动作)元素,它用于在Jsp页面中提供业务逻辑功能,避免在JSP页面中直接编写java代码,造成jsp页面难以维护. 二.JSP常用标签 ...

  5. 块级标签包含行内标签底部出现3px间隔的解决办法

    当块级标签(如div)内包含了行内标签(如img),则外层元素与内层元素底部会出现3px的间隔: 代码如下: <!doctype html> <html lang="en& ...

  6. html常用标签介绍

    常用标签介绍 文本 最常用的标签可能是<font>了,它用于改变字体,字号,文字颜色. 点击查看效果 <font size="6">6</font&g ...

  7. css块级标签、行内标签、行内块级标签

    <html><head lang="en"> <meta charset="UTF-8"> <title>< ...

  8. html:常见行内标签，常见块级标签,常见自闭合标签

    本文内容: 常见行内标签 常见块级标签 常见自闭合标签 首发日期:2018-02-12 修改: 2018-04-25:删除了不常用的标签 常见行内标签: 什么是行内标签: 行内标签就是在页面内只占据刚 ...

  9. 一、JSP标签介绍,自定义标签

    一.JSP标签介绍 1. 标签库有什么作用 自定义标签库是一种优秀的表现层技术,之前介绍的MVC模式,我们使用jsp作为表现层,但是jsp语法嵌套在html页面,美工还是很难直接参与开发,并且jsp脚 ...

随机推荐

  1. Bmp格式图片与16进制的互相转换简解 Python

    BMP TO HEX 首先介绍Github上一个简单的Bmp转成16进制的py: https://github.com/robertgallup/bmp2hex 网上这种例子很多.思路也简单:将bmp ...

  2. npm publish 一直报错 404

    在封装 zswui  react ui 组件库的时候,尝试了下 github的 packages 包设置,然后就给自己挖坑了. zswui   这是一个从零开始配置,实现组件开发测试的项目. 因为设置 ...

  3. Swift4.0复习控制流语句

    1.do语句块: Swift编程语言中可使用 do 语句块作为类似C语言中的一般语句块进行使用.与C语言的语句块类似,Swift中的 do 语句块单独作为一个作用域,该语句块中声明的局部对象在其外部将 ...

  4. 推荐一款好用的 office word 的markdown插件 - Writage

    软件地址:http://www.writage.com/

  5. class类名在webpack项目中的两种引用方式

    一.问题描述 在项目工程中,我们通常既用到css module,也用到普通的less文件引用方式,代码及webpack配置如下,运行时,发现只有css module起作用,如何让两者都起作用呢? // ...

  6. Centos 更改MySQL5.7数据库目录位置

    原文地址:https://blog.csdn.net/zyw_java/article/details/78512285 Centos7.3 安装Mysql5.7并修改初始密码 基于 CentOS M ...

  7. C++标准模板库Stand Template Library(STL)简介与STL string类

    参考<21天学通C++>第15和16章节,在对宏和模板学习之后,开启对C++实现的标准模板类STL进行简介,同时介绍简单的string类.虽然前面对于vector.deque.list等进 ...

  8. Linux 下 安装 Jmeter

    Linux下安装jmeter 1.1 下载JMeter 官方网站下载最新版本: http://jmeter.apache.org/download_jmeter.cgi    两个只是解压方式不一样而 ...

  9. transform-transition-animation（1）

    网布就是我们的屏幕,x轴沿屏幕平行的水平方向,y轴沿屏幕平行的垂直方向,z轴沿与屏幕垂直方向. rotateX(angle), rotateY(angle), rotateZ(angle), rota ...

  10. vmware linux 硬盘空间不足时增加硬盘并挂载

    不同的版本的vmware在设置界面中可能稍有不同,基本是一致的. 还有一种方式是扩展,这里没有记录,扩展时需要在虚拟机关机状态下. 1.选择在vmware中点击设置并打开,将光标定位在hard Dis ...