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脚 ...
随机推荐
- Python动态构造类：借助强悍的内建 type()
内建的 type() 函数带三个参数时, 将作为强悍的动态类构造器. 如下: type(name, bases, dict) 返回一个新的type对象. 基本上是 class 语句的动态形式. 参数: ...
- LeetCode_234. Palindrome Linked List
234. Palindrome Linked List Easy Given a singly linked list, determine if it is a palindrome. Exampl ...
- 一个命令永久禁用Win10驱动程序强制签名
https://blog.csdn.net/xiaodingqq/article/details/80093888
- 【分布式一致性】etcd
etcd: https://jimmysong.io/kubernetes-handbook/concepts/etcd.html 什么是 分布式一致性: http://thesecretliveso ...
- 【Leetcode_easy】922. Sort Array By Parity II
problem 922. Sort Array By Parity II solution1: class Solution { public: vector<int> sortArray ...
- docker 之网络配置
Docker 网络实现 首先,要实现网络通信,机器需要至少一个网络接口(物理接口或虚拟接口)来收发数据包:此外,如果不同子网之间要进行通信,需要路由机制. Docker 中的网络接口默认都是虚拟的接口 ...
- 解释张量及TF的一些API
张量的定义 张量(Tensor)理论是数学的一个分支学科,在力学中有重要应用.张量这一术语起源于力学,它最初是用来表示弹性介质中各点应力状态的,后来张量理论发展成为力学和物理学的一个有力的数学工具.张 ...
- Linux 指令表
Linux简介(了解) Linux介绍 Linux是类UNIX计算机的统称 Linux操作系统的内核也是Linux Linux是由芬兰大学生Linux Torvalds于1991年编写的 Linux这 ...
- springcloud【基于springboot1.x】的简单发布服务和使用
1.新建一个springboot 1.x项目[2.x之上有bug,就没测试] 就是新建一个注册中心 2.等下载完,注册中心配置application.yml server: port: 8761 eu ...
- 浅谈PHP随机数安全的分析
之前在身边有很多学PHP的朋友写一些小程序的时候,很多时候会使用PHP随机数函数rand()和mt_rand()函数去生成随机数 可是,随机数真的随机吗?这篇文章讲从多个实例中探讨随机数,当然,有写作 ...