body标签

标签（空格分隔）： 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

超级链接标记代表一个链接点，是英文anchor（锚点）的简写。它的作用是把当前位置的文本或图片连接到其他的页面、文本或图像

<!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标签的更多相关文章

a标签点击跳转失效--IE6、7的奇葩bug
一般运用a标签包含img去实现点击图片跳转的功能,这是前端经常要用到的东西. 今天遇到个神奇的bug:如果在img上再包裹一层div,而且div设置了width和height,则图片区域点击时,无任何 ...
IE6、7下html标签间存在空白符，导致渲染后占用多余空白位置的原因及解决方法
直接上图:原因:该div包含的内容是靠后台进行print操作,输出的.如果没有输出任何内容,浏览器会默认给该空白区域添加空白符.在IE6.7下,浏览器解析渲染时,会认为空白符也是占位置的,默认其具有字 ...
百度MIP页规范详解 —— canonical标签
百度MIP的规范要求必须添加强制性标签canonical,不然MIP校验工具会报错: 强制性标签<link rel="/^(canonical)$/"> 缺失或错误这 ...
【CSS进阶】伪元素的妙用--单标签之美
最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值 ...
TODO：Laravel 使用blade标签布局页面
TODO:Laravel 使用blade标签布局页面本文主要介绍Laravel的标签使用,统一布局页面.主要用到到标签有@yield,@ stack,@extends,@section,@stop, ...
最新去掉 Chrome 新标签页的8个缩略图
chrome的新标签页的8个缩略图实在让人不爽,网上找了一些去掉这个略缩图的方法,其中很多已经失效.不过其中一个插件虽然按照原来的方法已经不能用了,但是稍微变通一下仍然是可以用的(本方法于2017.1 ...
css-父标签中的子标签默认位置
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
xpath提取多个标签下的text
title: xpath提取多个标签下的text author: 青南 date: 2015-01-17 16:01:07 categories: [Python] tags: [xpath,Pyth ...
多个Img标签之间的间隙处理方法
1.多个标签写在一行 <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> ...
html5标签canvas函数drawImage使用方法
html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...

随机推荐

使用 JavaScript 截屏
经常在微博上看到很多内容使用的什么长微博截图,并且截图上还附加了很多其他的信息.之前对纯前端截图有些研究,正好本博客有这个需求,今天就把这东西实现了下. 需要声明的是,JavaScript 目前还不能 ...
Oracle使用笔记（二）
一.表空间 1.创建表空间 create tablespace db_test --表空间名 datafile 'D:\oracle\product\11.2.0\dbhome_1\oradata\o ...
A Language Modeling Approach to Predicting Reading Difficulty-paer
Volume:Proceedings of the Human Language Technology Conference of the North American Chapter of the ...
python中的列表的嵌套与转换
第一种方法:这行代码的for循环的意识,是先将matrix列表中的每行的第一个元素拿出. matrix =[[1,2,3,4],[5,6,7,8],[9,10,11,12]] transposed_r ...
【HDU5187】contest
真的没有什么会写的东西了QAQ 原题: As one of the most powerful brushes, zhx is required to give his juniors n probl ...
grpc源码分析之域名解析
环境: win7_x64,VS2015.grpc_1.3.1 场景: 在客户端中使用grpc连接服务器,在多次输入非法的地址后,再次输入正确的地址连出现连接超时的现象.侯捷先生说过“源码面前,了无秘密 ...
PythonStudy——如何使输出不换行
python 3.x版本打印不换行格式如下: print(x, end="") # end="" 可使输出不换行.双引号之间的内容就是结束的内容, # 可以是空 ...
使用fpm 软件包打包
安装 sudo gem install --no-ri --no-rdoc fpm 简单使用一个 redis的简单demo % ls src/redis-server redis.conf src/ ...
django 生产环境部署建议
参考django官方建议一种优秀的作法是使用前缀/ws/来区分WebSocket连接和普通HTTP连接,以便修改配置后,使Channels更容易部署到生产环境中. 特别是对于大型站点,可以配置像ng ...
InnoDB存储引擎文件
InnoDB存储引擎文件 MySQL数据库包括数据库本身的文件和存储引擎文件.数据库自身的文件由参数文件(my.cnf).错误日志文件.慢查询日志文件.查询日志文件.二进制日志文件.套接字文件.pid ...