标签(空格分隔): body标签


body标签:

想要在网页上展示出来的内容一定要放在body标签中。 把我们之前那一段HTML代码贴过来,保存到一个HTML格式的文件中。

<!DOCTYPE html>
<html lang="en">
<head>
<!--指定文档的内容类型和编码类型-->
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8"/>
<title>学习文档</title>
</head>
<body>
<h1>海燕</h1>
<p>在苍茫的大海上</p>
<p>狂风卷集着乌云</p>
<p>在乌云和大海之间</p>
<p>海燕像黑色的闪电</p>
<p>在高傲的飞翔</p> </body>
</html>

标题标签 h1~h6

<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。 由于 h 元素拥有确切的语义,因此请您慎重地选择恰当的标签层级来构建文档的结构。因此,请不要利用标题标签来改变同一行中的字体大小。相反,我们应当使用css来定义来达到漂亮的显示效果。 标题标签通常用来制作文章或网站的标题。

h1~h6标签的默认样式:

<!DOCTYPE HTML>
<html>
<head lang='en'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>学习学习</title>
</head>
<body>
<h1>一级标题</h1><h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>
文本样式标签主要用来对HTML页面中的文本进行修饰,比如加粗、斜体、线条样式等...

1. `<b></b>`:加粗
2. `<i></i>`:斜体
3. `<u></u>`:下划线
4. `<s></s>`:删除线
5. `<sup></sup>`:上标
6. `<sub></sub>`:下标 现在如果想在一段文字中特别强调某几个字,这时候就可以用到`<em>`或`<strong>`标签。 这两个标签都是表示强调,但是两者在强调的语气上有区别:`<em>`表示强调,`<strong>`表示更强烈的强调。
在浏览器中`<em>`默认会用斜体表示,`<strong>`会用粗体来表示。两个标签相比,我们通常会推荐大家使用`<strong>`表示强调

段落标签 p

<body>
<p>好好学习天天想上,天天团上想离开路公交啦卡价格了就爱了客观记录卡价格</p>
<p>好好学习天天想上,天天团上想离开路公交啦卡价格了就爱了客观记录卡价格</p> </body>

浏览器展示特点:

跟普通文本一样,但我们可以通过css来设置当前段落的样式

是否又独占一行呢? 答案是的 块级元素

超链接标签 a

<!DOCTYPE HTML>
<html>
<head lang='en'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>路飞学城</title>
</head>
<body>
<p style="height:2000px" id="p1"></p>
<h1>一级标题</h1><h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<p>好好学习天天想上,天天团上想离开路公交啦卡价格了就爱了客观记录卡价格</p>
<p>好好学习天天想上,天天团上想离开路公交啦卡价格了就爱了客观记录卡价格</p>
<!-- _self默认在当前页面打开网站打开新的资源,_blank:在新的网站打开资源-->
<a href="https:/wwwbaidu.com" target="_blank" title="baibai">学习网站</a>
<a href="./a.zip">下载压缩包</a>
<a href="_mailto@111.com">一起学习</a>
<a href="#">跳转到顶部</a>
<!--返回每个ID-->
<a href="#p1">跳转顶部id</a>
<a href="javascript:alert(1)">内容</a>
<a href="javascript:">内容</a>
</body>
</html>

arget:_blank 在新的网站打开链接的资源地址 target:_self 在当前网站打开链接的资源地址 title: 表示鼠标悬停时显示的标题

链接其他表现形式:

目标文档为下载资源 例如:href属性值,指定的文件名称,就是下载操作(rar、zip等)

电子邮件链接 前提:计算机中必须安装邮件客户端,并且配置好了邮件相关信息。 例如:
联系我们

返回页面顶部的空链接或具体id值的标签 例如:内容内容

javascript:是表示在触发默认动作时,执行一段JavaScript代码。 例如:内容

javascript:;表示什么都不执行,这样点击时就没有任何反应 例如:内容</a

列表标签

网站页面上一些列表相关的内容比如说物品列表、人名列表等等都可以使用列表标签来展示。通常后面跟 < li >标签一起用,每条li表示列表的内容

< ul>:unordered lists的缩写 无序列表 < ol>:ordered listsde的缩写 有序列表

<!-- 无序列表 type可以定义无序列表的样式-->
<ul type="circle">
<li>我的账户</li>
<li>我的订单</li>
<li>我的优惠券</li>
<li>我的收藏</li>
<li>退出</li>
</ul>
<!-- 有序列表 type可以定义有序列表的样式 -->
<ol type="a">
<li>我的账户</li>
<li>我的订单</li>
<li>我的优惠券</li>
<li>我的收藏</li>
<li>退出</li>
</ol>

ol标签的属性:

type:列表标识的类型

1:数字

a:小写字母

A:大写字母

i:小写罗马字符

I:大写罗马字符

列表标识的起始编号

默认为1

ul标签的属性: type:列表标识的类型

disc:实心圆(默认值)

circle:空心圆

square:实心矩形

none:不显示标识

盒子标签:

< div>可定义文档的分区 division的缩写 译:区 < div> 标签可以把文档分割为独立的、不同的部分,请看下面代码我们将他们进行分区

<!DOCTYPE HTML>
<html>
<head lang='en'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>学习</title>
</head>
<body> <p style="height:2000px" id="p1"></p>
<h1>一级标题</h1><h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<div class="p1">
<p>好好学习天天想上,天天团上想离开路公交啦卡价格了就爱了客观记录卡价格</p>
<p>好好学习天天想上,天天团上想离开路公交啦卡价格了就爱了客观记录卡价格</p>
</div>
<div>
<!-- _self默认在当前页面打开网站打开新的资源,_blank:在新的网站打开资源-->
<a href="https:/wwwbaidu.com" target="_blank" title="baibai">学习网站</a>
<a href="./a.zip">下载压缩包</a>
<a href="_mailto@111.com">一起学习</a>
<a href="#">跳转到顶部</a>
<!--返回每个ID-->
<a href="#p1">跳转顶部id</a>
<a href="javascript:alert(1)">内容</a>
<a href="javascript:">内容</a>
</div>
<!--有序列表-->
<div>
<ul>
<li>我的账户></li>
<li>我的订单></li>
<li>我的优惠卷></li>
<li>我的收藏></li>
</ul>
<!--无序列表-->
<ol>
<li>我的账户></li>
<li>我的订单></li>
<li>我的优惠卷></li>
<li>我的收藏></li> </ol>
</div> </body>
</html>

我们将文档放在一个父级的区(div)中,它里面包含四块区(div)域,浏览器查看效果,你会发现每小块区域都是独占一行的,所以div是块级元素。另外,每块区域表示独立的一块,id属性和class属性其实很简单,你可以看成给这个区域起个名字。id是唯一的,一个页面中不能有两个重复的id,跟身份证号码一样,class可以设置同样的属性值,并且可以设置多个,例如class=’para n1‘

图片标签

一个网页除了有文字,还会有图片。我们使用

< img/>标签在网页中插入图片。

语法:

<img src="图片地址" alt="图片加载失败时显示的内容" title = "提示信息" />

注意:

src设置的图片地址可以是本地的地址也可以是一个网络地址。

图片的格式可以是png、jpg和gif。

alt属性的值会在图片加载失败时显示在网页上。

还可以为图片设置宽度(width)和高度(height),不设置就显示图片默认的宽度和高度

<div>
<span>与行内元素展示的标签<span>
<span>与行内元素展示的标签<span>
<img src="./machine-right.png" alt="金融量化分析" style="width:200px;height:200px">
<img src="./finance-right.png" alt="人工智能实战" style="width: 200px;height: 200px">
</div>

浏览器查看效果:行内块元素

与行内元素在一行内显示

可以设置宽度和高度

span标签可以单独摘出某块内容,结合css设置相应的样式

其他标签

换行标签 < br>

< br>标签用来将内容换行,其在HTML网页上的效果相当于我们平时使用word编辑文档时使用回车换行。

分割线 < hr>

< hr>标签用来在HTML页面中创建水平分隔线,通常用来分隔内容

特殊符号

浏览器在显示的时候会移除源代码中多余的空格和空行。 所有连续的空格或空行都会被算作一个空格。需要注意的是,HTML代码中的所有连续的空行(换行)也被显示为一个空格。

举个例子:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>学习xuexi </title>
</head>
<body> <p>安科技风科技大路口附近多啦 埃里克积分两块大姐夫了
大大 大看的 贷 大大!</p>
</body>
</html>
  • 连续空格在代码中会显示一个空格;

html:特殊对照表

html:特殊对照表

表格标签 table

表格由

标签来定义。每个表格均有若干行(由 < tr> 标签定义),每行被分割为若干单元格(由< td>标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<!--表格-->
<table border="1" cellspacing="0">
<thead>
<tr>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<tbody> <tr> <td>语文</td>
<td>数学</td>
<td>英语</td>
<td>化学</td>
<td>生物</td> </tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>化学</td>
<td>生物</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>化学</td>
<td>生物</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>化学</td>
<td>生物</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>化学</td>
<td>生物</td>
</tr> </tbody> </table> </body>
</html>

表格行和列的合并

  • rowspan 合并行(竖着合并)

    colspan 合并列(横着合并)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<div class="table">
<table border="1" cellspacing="0">
<!--表格头-->
<thead>
<!--表格行-->
<tr>
<!--表格列,【注意】这里使用的是th-->
<th></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<!--表格主体-->
<tbody>
<!--表格行-->
<tr>
<td rowspan="3">上午</td>
<!--表格列,【注意】这里使用的是td-->
<td>语文</td>
<td>数学</td>
<td>英文</td>
<td>生物</td>
<td>化学</td>
</tr>
<tr>
<!--表格列,【注意】这里使用的是td-->
<td>语文</td>
<td>数学</td>
<td>英文</td>
<td>生物</td>
<td>化学</td>
</tr>
<tr>
<!--表格列,【注意】这里使用的是td-->
<td>语文</td>
<td>数学</td>
<td>英文</td>
<td>生物</td>
<td>化学</td>
</tr>
<tr>
<td rowspan ="2">下午</td>
<!--表格列,【注意】这里使用的是td-->
<td>语文</td>
<td>数学</td>
<td>英文</td>
<td>生物</td>
<td>化学</td>
</tr>
<tr>
<!--表格列,【注意】这里使用的是td-->
<td>语文</td>
<td>数学</td>
<td>英文</td>
<td>生物</td>
<td>化学</td>
</tr>
</tbody>
<!--表格底部-->
<tfoot>
<tr>
<td colspan="6">课程表</td>
</tr>
</tfoot>
</table>
</div>
</body> </html>

form 表单

表单是一个包含表单元素的区域

表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、输入框(input)、单选框()

表单的作用

表单用于显示、手机信息,并将信息提交给服务器

1.语法:

<form>允许出现表单控件</form>
  • 1.常见属性:

    action :定义表单被提交的时候发生的动作,提交给服务器处理程序的地址

method:

作用:定义表单提交数据时的方式:

取值:get:默认值,明文提交,所提交的数据时可以显示在地址上,安全性低,提交数据大小有限制,最大为2KB

post:隐士提交,所提交的内容,不会显示在地址栏上,安全性高,无大小限制;

enctype:编码类型,即表单数据进行编码的时候方式,允许表单将什么样的数据提交给服务器;

1.取值:1.application/x-www-form-urlencoded

默认允许将普通的字符,特殊字符,都提交给服务器,不允许提价文件;

2.multipart/form-data,允许将文件提交给服务器;

3.text/plain 只允许提交普通的字符,特殊字符,文件等无法提交;

  • 注意:

    如果有文件需要提交给服务器,method必须为post,enctype必须为multipart/form-data

表单控件的分类:

textarea文本域:作用:允许用户录入多行数据到表单控件中

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单控件</title>
</head>
<body>
<div class="form"></div>
<!--form是快级别的标签-->
<form action="https://www.baidu.com" method="get"> <p>
<!--行内元素-->
<lable>用户名</lable>
<!--行内块元素-->
<input type="text" name="username" id="user"> </p>
<p>
<!--行内元素-->
<lable>密 码</lable>
<!--行内块元素-->
<input type="password" name="password" id="password"> </p>
<p>
<!--紧紧显示普通的提交按钮-->
<input type="button" name="btn" value="提交">
<input type="submit" name="btn" value="submit"> </p>
</form> </body>
</html>

body标签的更多相关文章

  1. a标签点击跳转失效--IE6、7的奇葩bug

    一般运用a标签包含img去实现点击图片跳转的功能,这是前端经常要用到的东西. 今天遇到个神奇的bug:如果在img上再包裹一层div,而且div设置了width和height,则图片区域点击时,无任何 ...

  2. IE6、7下html标签间存在空白符,导致渲染后占用多余空白位置的原因及解决方法

    直接上图:原因:该div包含的内容是靠后台进行print操作,输出的.如果没有输出任何内容,浏览器会默认给该空白区域添加空白符.在IE6.7下,浏览器解析渲染时,会认为空白符也是占位置的,默认其具有字 ...

  3. 百度MIP页规范详解 —— canonical标签

    百度MIP的规范要求必须添加强制性标签canonical,不然MIP校验工具会报错: 强制性标签<link rel="/^(canonical)$/"> 缺失或错误 这 ...

  4. 【CSS进阶】伪元素的妙用--单标签之美

    最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值 ...

  5. TODO:Laravel 使用blade标签布局页面

    TODO:Laravel 使用blade标签布局页面 本文主要介绍Laravel的标签使用,统一布局页面.主要用到到标签有@yield,@ stack,@extends,@section,@stop, ...

  6. 最新 去掉 Chrome 新标签页的8个缩略图

    chrome的新标签页的8个缩略图实在让人不爽,网上找了一些去掉这个略缩图的方法,其中很多已经失效.不过其中一个插件虽然按照原来的方法已经不能用了,但是稍微变通一下仍然是可以用的(本方法于2017.1 ...

  7. css-父标签中的子标签默认位置

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  8. xpath提取多个标签下的text

    title: xpath提取多个标签下的text author: 青南 date: 2015-01-17 16:01:07 categories: [Python] tags: [xpath,Pyth ...

  9. 多个Img标签之间的间隙处理方法

    1.多个标签写在一行 <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> ...

  10. html5标签canvas函数drawImage使用方法

    html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...

随机推荐

  1. SQLI DUMB SERIES-8

    (1)在id后加单引号.无回显,加双引号跟正常输入是一样的回显,既然不会回显出错信息,只能进行盲注. (2)盲注的方法同less5

  2. day07 深浅拷贝

    今日概要 深浅拷贝(重点) 文件操作 详细内容 直接赋值: 直接将对象的引用赋值给另一个对象 v1=1000 v2=v1 #v1 v2指向同一个内存地址 print(id(v1),id(v2))#相等 ...

  3. angular6新建项目

    mkdir  angular6project cd angular6project ng new demo      新建一个普通项目 ng new demo --routing  新建一个带路由的项 ...

  4. SpringMVC 的<mvc:resources>使用映射路径展示文件服务器上的图片

    <servlet> <servlet-name>springMVC</servlet-name> <servlet-class>org.springfr ...

  5. EBS打补丁参考

    EBS Application打补丁参考:http://blog.csdn.net/cunxiyuan108/article/details/6009784 整体步骤: 0. 停止应用(注意确认FND ...

  6. windows添加永久静态路由

    添加路由最好在命令行管理员模式下操作 添加临时路由命令,重启后失效 route add 172.16.1.0 mask 255.255.255.0 10.0.10.19 其中,172.16.1.0 是 ...

  7. day01-计算机原理与操作系统

  8. pre-commit 钩子,代码质量检查:在 vue-cli 3.x 版本中,已经使用尤大改写的yorkie,yorkie实际是fork husky,然后做了一些定制化的改动,使得钩子能从package.json的 "gitHooks"属性中读取

    pre-commit 钩子,代码质量检查:在 vue-cli 3.x 版本中,已经使用尤大改写的yorkie,yorkie实际是fork husky,然后做了一些定制化的改动,使得钩子能从packag ...

  9. react学习笔记1一基础知识

    1.React 是一个用于构建用户界面的 JAVASCRIPT 库2.React 特点: a.声明式的设计 b.采用虚拟dom,最大限度的减少dom操作 C.组件化,可以复用 D.单向响应的数据流,减 ...

  10. linux下误删目录文件后恢复神器extundelete

    原文链接:https://blog.51cto.com/wzlinux/2052835 参考:https://blog.csdn.net/cwg_1992/article/details/463100 ...