web学习笔记——一个简单的HTML

为了更好的做web安全测试,最近开始学习web相关知识。先从最简单的一个html页面开始:

<!DOCTYPE html>
<html>
    <head>
        <title>这是个标题</title>
    </head>
    <body>
        <h1>这是一个一个简单的HTML</h1>
        <p>Hello World!</p>
    </body>
</html>

首行 是一个声明,让浏览器知道我以下代码的格式是基于HMTL的哪个版本,当前为 HTML5。
head 元素可认为是头部元素的容器,在head中,可使用标签:base,link,meta,script,style,title
title标签用于定义文档的标题。如果把网页加入用户的链接列表或者收藏夹、书签列表,title 元素的内容将成为该网页链接的默认名称。
body 元素可认为是我们页面上看到的东西,是文档的主题。
h1元素标记的内容是一个标签标题的意思。
p 元素是一个段落的意思。
看一下程序的页面效果:
01
可以看出body里面的h1p标签是有不同的,h1标签是粗体,并且字体大,p是常规字体,字体略小。我们设置的title标签体现在哪里了呢?1、页面的标题;2、保存书签时浏览器也会以此为默认名。
02
h1类似的标签总共有6个,剩余几个为: h2,h3,h4,h5,h6。其中h1字体最大,h6字体最小。
改动一下代码:

<!DOCTYPE html>
<html>
    <head>
        <title>这个是标题</title>
    </head>
    <body>
        <h1>这是一个一个简单的HTML</h1>
        <h2>这是一个一个简单的HTML</h2>
        <h3>这是一个一个简单的HTML</h3>
        <h4>这是一个一个简单的HTML</h4>
        <h5>这是一个一个简单的HTML</h5>
        <h6>这是一个一个简单的HTML</h6>
        <p>Hello World!</p>
    </body>
</html>

效果如下:
03

再改动下代码:

<!DOCTYPE html>
<html>
    <head>
        <title>这个是标题</title>
    </head>
    <body>
        <h1>这是一个一个简单的HTML,h1
            <p>Hello World!</p>
        </h1>
        <h2>这是一个一个简单的HTML,h2</h2>
        <h3>这是一个一个简单的HTML,h3</h3>
        <h4>这是一个一个简单的HTML,h4</h4>
        <h5>这是一个一个简单的HTML,h5
            <p>Hello World!</p>
            <p>Hello World!</p>
            <h6>这是一个一个简单的HTML,h6</h6>
            <p>Hello World!</p>
            <p>Hello World!</p>
        </h5>
    </body>
</html>

效果如下:
04
在标签标题h1~**h6**下加段落元素p,此时的p其实是样式为标签标题的段落。当p元素与h1~**h6**同结构下时,才是为真正的段落表现形式。

初学乍道,多多关照。

  • 40
    点赞
  • 141
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值