爱陪小樱桃

导航

 
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

<!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>
posted on 2019-01-13 19:51  cherry小樱桃  阅读(318)  评论(1)  编辑  收藏  举报
 
Powered by:
博客园
Copyright © 2024 cherry小樱桃
Powered by .NET 8.0 on Kubernetes