HTML的BODY内标签介绍
一、基本标签
<body>
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s> <!--p段落标签独占一行-->
<p>段落标签</p> <h1>标题1格式</h1>
<h2>标题1格式</h2>
<h3>标题1格式</h3>
<h4>标题1格式</h4>
<h5>标题1格式</h5>
<h6>标题1格式</h6> <!--换行br标签-->
<br> <!--水平线hr标签，独占一行-->
<hr>
</body>
二、特殊字符
<body>
<!-- 空格 -->
<!-- > -->>
<!-- < --><
<!-- & -->&
<!-- ￥ -->¥
<!-- 版权商标 -->©
<!-- 注册商标 -->®
</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标签
<body>
<!--src=图片路径，alt=图片未加载成功时的提示，title=鼠标悬浮时提示信息，width=宽，height=高（宽和高只能用一个自动等比缩放）-->
<img src="./zhouyu.jpg" alt="周瑜加载失败" title="周瑜" width="225">
</body>
五、a标签
超链接标签
所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。
href属性指定目标网页地址。该地址可以有几种类型：
- 绝对URL - 指向另一个站点（比如 href="http://www.jd.com）
- 相对URL - 指当前站点中确切的路径（href="index.htm"）
- 锚URL - 指向页面中的锚（href="#top"）
target：
- _blank表示在新标签页中打开目标网页
- _self表示在当前标签页中打开目标网页
<body>
<!--绝对URL,点击后在新页面打开相应的网站-->
<a href="http://www.google.com.hk" target="_blank">谷歌</a> <!--相对URL，点击后在当前页打开网站目录的路径-->
<a href="index.html">首页</a> <!--锚URL，指向当前页面中的锚-->
<a href="#a1">锚点</a>
<h1 id = a1></h1>
</body>
六、列表
① 无序列表
<ul></ul> 标签
<!--无序列表要用ul标签，type=disc实心圆点，默认值，circle空心圆，square实心方块，none无样式-->
<ul type="circle">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
type属性：
- disc（实心圆点，默认值）
- circle（空心圆圈）
- square（实心方块）
- none（无样式）
② 有序列表
<ol></ol>标签
type属性：
- 1 数字列表，默认值
- A 大写字母
- a 小写字母
- Ⅰ大写罗马
- ⅰ小写罗马
<!--有序列表用ol标签表示，type=1数字列表（默认值），A 大写字母，a 小写字母，I 大写罗马字母， i 小写罗马字母-->
<!--start 表示从第三个字母开始-->
<ol type="A" start="3">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
③ 标题列表
<!--用dl表示标题列表-->
<dl>
<dt>标题</dt>
<dd>内容1</dd>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容1</dd>
</dl>
七、表格
<!--表格格式设置，border表格边框，cellpadding内边距，cellspacing外边距-->
<table border="1" cellpadding="1" cellspacing="1">
<!--表头-->
<thead>
<tr>
<th>序号</th>
<th>水果</th>
<th>产地</th>
</tr>
</thead>
<!--表格-->
<tbody>
<tr>
<td>1</td>
<td>苹果</td>
<td>广西</td>
</tr>
<tr>
<td>2</td>
<td>香蕉</td>
<td>海南</td>
</tr>
</tbody>
</table>
属性:
- border: 表格边框.
- cellpadding: 内边距
- cellspacing: 外边距.
- width: 像素 百分比.（最好通过css来设置长宽）
- rowspan: 单元格竖跨多少行
- colspan: 单元格横跨多少列（即合并单元格）
八、form
功能：
表单用于向服务器传输数据，从而实现用户与Web服务器的交互
表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea、select、fieldset和 label标签。
① label标签（与input配合使用）
定义：<label> 标签为 input 元素定义标注（标记）。
说明：
label 元素不会向用户呈现任何特殊效果。
<label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
方式一：
<!--label for的属性值指向input对应id-->
<label for="user">用户名：
<input id="user" type="text" name="username">
</label>
方式二：
<!--label与input配合，不需使用id-->
<label>密码：
<input type="password" name="pwd">
</label>
② input标签
<!--form表单，向网站已post的形式提交数据，multipart/form-data是post的一种提交方式-->
<form action="http://127.0.0.1:8080" method="post" enctype="multipart/form-data">
<!--text 单行输入文本-->
<div>
<label >用户名
<input type="text" name="username">
</label>
</div> <!--password 密码输入框-->
<div>
<p>
<label >密码
<input type="password" name="pwd">
</label>
</p>
</div> <!--date 日期输入框-->
<div>
<p>
<label >生日
<input type="date" name="birthday">
</label>
</p>
</div> <!--radio 单选框-->
<div>
<p>
<label >性别
<!--显示的与input无关联，定义值，checked设置默认值-->
<input type="checkbox" name="sex" value="male" checked="checked">男
<input type="checkbox" name="sex" value="female">女
</label>
</p>
</div> <!--checkbox 复选框 checked
设置默认值
--> <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：定义提交时的选项值
<form action="" method="post">
<!--单选下拉框-->
<select name="city" id="city">
<option value="beijing">北京</option>
<!--selected设置为默认值-->
<option value="shenzhen" selected="selected">深圳</option>
<option value="shanghai">上海</option>
<option value="guagnzhou">广州</option>
</select> <!--复选下拉框-->
<select name="city2" id="city2" multiple>
<option value="beijing">北京</option>
<!--selected设置为默认值-->
<option value="shenzhen" selected="selected">深圳</option>
<option value="shanghai">上海</option>
<option value="guagnzhou">广州</option>
</select>
</form>
④ textarea多行文本
属性说明：
- name：名称
- rows：行数
- cols：列数
- disabled：禁用
<!--textarea 多行文本框-->
<label>自我介绍
<textarea name="self_introduction" id="self_introduction" cols="30" rows="10">
</textarea>
</label>
HTML的BODY内标签介绍的更多相关文章
- css块级标签，行内标签，行内块标签的转换（2）
css块级标签,行内标签,行内块标签的转换 版权声明 本文原创作者:雨点的名字 作者博客地址:https://home.cnblogs.com/u/qdhxhz/ 在基础1中,我详细讲 ...
- WEB学习-基础知识：列表、表单、div和span、注释、字符实体、HTML废弃标签介绍
列表 无序列表 无序列表,用来表示一个列表的语义,并且每个项目和每个项目之间,是不分先后的. ul就是英语unordered list,“无序列表”的意思. li 就是英语list item , “列 ...
- html 不常用标签介绍
文本元素 <wbr> 如果单词太长,或者您担心浏览器会在错误的位置换行,那么您可以使用 <wbr> 元素来添加 Word Break Opportunity(单词换行时机).英 ...
- java web学习总结(二十七) -------------------JSP标签介绍
一.JSP标签介绍 JSP标签也称之为Jsp Action(JSP动作)元素,它用于在Jsp页面中提供业务逻辑功能,避免在JSP页面中直接编写java代码,造成jsp页面难以维护. 二.JSP常用标签 ...
- 块级标签包含行内标签底部出现3px间隔的解决办法
当块级标签(如div)内包含了行内标签(如img),则外层元素与内层元素底部会出现3px的间隔: 代码如下: <!doctype html> <html lang="en& ...
- html常用标签介绍
常用标签介绍 文本 最常用的标签可能是<font>了,它用于改变字体,字号,文字颜色. 点击查看效果 <font size="6">6</font&g ...
- css块级标签、行内标签、行内块级标签
<html><head lang="en"> <meta charset="UTF-8"> <title>< ...
- html:常见行内标签，常见块级标签,常见自闭合标签
本文内容: 常见行内标签 常见块级标签 常见自闭合标签 首发日期:2018-02-12 修改: 2018-04-25:删除了不常用的标签 常见行内标签: 什么是行内标签: 行内标签就是在页面内只占据刚 ...
- 一、JSP标签介绍,自定义标签
一.JSP标签介绍 1. 标签库有什么作用 自定义标签库是一种优秀的表现层技术,之前介绍的MVC模式,我们使用jsp作为表现层,但是jsp语法嵌套在html页面,美工还是很难直接参与开发,并且jsp脚 ...
随机推荐
- HTML布局排版之制作个人网站的文章列表
文章列表.博文列表,一般是有文章名字和时间构成的,文章名字后面是时间,点击文章的名字,可进入该文章.为了美观,一般文章名字都有一定的最大字数限制,长宽对齐,等长宽的统一格式比较美观,这种用表格来做比较 ...
- Rust零碎总结
1.Rust里没有null的概念,但是实际上有很多地方是需要null的概念的,这个时候就可以用Option来代替,它是泛型T的一个包装类,就是C#里的int?或Java里的Optional: [但反序 ...
- LeetCode 230. 二叉搜索树中第K小的元素(Kth Smallest Element in a BST)
230. 二叉搜索树中第K小的元素 230. Kth Smallest Element in a BST 题目描述 给定一个二叉搜索树,编写一个函数 kthSmallest 来查找其中第 k 个最小的 ...
- jar 常用操作
查看 jar 包中的文件列表,并进行重定向 jar -tvf a.jar > a.txt 更新文件到 jar 中,目录需对应 jar -uf a.jar com/a.class a.class ...
- [转帖]14-使用glusterfs做持久化存储
14-使用glusterfs做持久化存储 https://www.cnblogs.com/guigujun/p/8366558.html 使用glusterfs做持久化存储 我们复用kubernete ...
- 关于String Json 与其他类型数据转换的总结：
一:关于自己遇到的坑: 跨域请求获取到 String Json(GSON处理) 数据后处理转换为实体类进行存储: 跨域 return Gson.toJson(map): 通过Http等方法获取请求结果 ...
- MATLAB 求一个点周围 voronoi 边的顶点的坐标
本代码在[MATLAB 2015b] 下编写运行成功,不保证所有版本适用. x=[0 -.5 1 1 -1]; y=[0 -1 -.5 1 1]; voronoi(x,y);axis([-2 2 -2 ...
- stm32之中断响应优先级
1)中断响应分为:自然优先级.抢占优先级.响应优先级. 2)抢占优先级和响应优先级,其实是一个中断所包含的两个优先级,其中前者是抢占优先级之间的级别划分,后者是相同抢占优先级的优先级别的划分. 中断A ...
- 面向对象分析与设计—OOA部分
第二部分 面向对象分析 2.1 面向对象分析(OOA)的定义? OOA——面向对象的分析,就是运用面向对象方法进行系统分析,对问题域(问题所涉及的范围)和系统责任(所开发的系统应具备的职能)进行分析与 ...
- PAT(B) 1051 复数乘法（Java）
题目链接:1051 复数乘法 (15 point(s)) 参考博客:1051 复数乘法(PAT 乙级 C++实现)-guangjinzheng 题目描述 复数可以写成 (A+Bi) 的常规形式,其中 ...