body标签 h、p、a、ul、ol、div、img、 

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

<!DOCTYPE HTML>
<html>
    <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>

浏览器显示如下:

前端开发-3-HTML-body标签

常用标题标签 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>`表示强调

浏览器展示特点:

  1. 跟普通文本一样,但我们可以通过css来设置当前段落的样式
  2. 是否又独占一行呢? 答案是的 块级元素

超链接标签 a,在一行显示,属于行内标签

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

<body>
    <h1>

        <!-- a链接 超链接  
        target:_blank 在新的网站打开链接的资源地址
                _self 在当前网站打开链接的资源地址
        title: 鼠标悬停时显示的标题
        -->
        <a href="http://www.baidu.com" target="_blank" title="路飞学城">路飞学城</a>
        <a href="a.zip">下载包</a>
        <a href="mailto:zhaoxu@tedu.cn">联系我们</a>
        <!-- 返回页面顶部的内容 -->
        <a href="#">跳转到顶部</a>

        <!-- 返回某个id -->
        <a href="#p1">跳转到p1</a>
        <!-- javascript:是表示在触发<a>默认动作时,执行一段JavaScript代码,而 javascript:; 表示什么都不执行,这样点击<a>时就没有任何反应。 -->
        <a href="javascript:alert(1)">内容</a>
        <a href="javascript:;">内容</a>


    </h1>
</body>

-------------------------------------

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

链接其他表现形式:

目标文档为下载资源 例如:href属性值,指定的文件名称,就是下载操作(rar、zip等)
电子邮件链接 前提:计算机中必须安装邮件客户端,并且配置好了邮件相关信息。 例如:<a href="mailto:zhaoxu@tedu.cn">联系我们</a>
返回页面顶部的空链接或具体id值的标签 例如:<a href="#">内容</a>或<a href="#id值">内容</a>
javascript:是表示在触发<a>默认动作时,执行一段JavaScript代码。 例如:<a href="javascript:alert()">内容</a>
javascript:;表示什么都不执行,这样点击<a>时就没有任何反应 例如:<a href="javascrip:;">内容</a

列表标签 ul,ol

网站页面上一些列表相关的内容比如说物品列表、人名列表等等都可以使用列表标签来展示。通常后面跟<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>

前端开发-3-HTML-body标签

ol标签的属性:

type:列表标识的类型

1:数字
a:小写字母
A:大写字母
i:小写罗马字符
I:大写罗马字符
列表标识的起始编号

默认为1
ul标签的属性: type:列表标识的类型

disc:实心圆(默认值)
circle:空心圆
square:实心矩形
none:不显示标识

盒子标签 div

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

分区,类似于android界面开发

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8" >
    <title>常用标签一</title>
</head>
<body>
    <div id="wrap">
        <div class="para">
            <p style="height: 1000px" id="p1">段落</p>
        </div>

        <div class="anchor">
            我是普通的文本
            <h1>

                <a href="http://www.baidu.com" target="_blank" title="路飞学城">路飞学城</a>
                <a href="a.zip">下载包</a>
                <a href="mailto:zhaoxu@tedu.cn">联系我们</a>
                <a href="#">跳转到顶部</a>
                <a href="#p1">跳转到p1</a>

                <a href="javascript:alert(1)">内容</a>
                <a href="javascript:;">内容</a>
            </h1>
        </div>
        <!-- <h2>路飞学城</h2>
        <h3>路飞学城</h3>
        <h4>路飞学城</h4>
        <h5>路飞学城</h4>
        <h6>路飞学城</h6> -->
        <div class="para">
        <!-- 定义段落 通常指文章一段内容 -->
        <p>路飞学城立志帮助有志向的年轻人通过努力学习获得体面的工作和生活!路飞学员通过学习Python ,金融分析,人工智能等互联网最前沿技术,开启职业生涯新可能</p>
        <p>路飞学城立志帮助有志向的年轻人通过努力学习获得体面的工作和生活!路飞学员通过学习Python ,金融分析,人工智能等互联网最前沿技术,开启职业生涯新可能</p>
        <p>路飞学城立志帮助有志向的年轻人通过努力学习获得体面的工作和生活!路飞学员通过学习Python ,金融分析,人工智能等互联网最前沿技术,开启职业生涯新可能</p>
        </div>

        <div class="lists">
            <!-- 无序列表 -->
            <ul type="circle">
                <li>我的账户</li>
                <li>我的订单</li>
                <li>我的优惠券</li>
                <li>我的收藏</li>
                <li>退出</li>
            </ul>
            <!-- 有序列表 -->
            <ol type="a">
                <li>我的账户</li>
                <li>我的订单</li>
                <li>我的优惠券</li>
                <li>我的收藏</li>
                <li>退出</li>
            </ol>
        </div>
    </div>
</body>
</html>
View Code

相关文章: