1、HTML基础之常用标签

一、一个网页的基本结构

<!DOCTYPE html>
<html>
  <head>
  <!--这是一段注释。注释不会在浏览器中显示。-->
    <title>HTML 简介</title>
  </head>
  <body>
    <p>p是段落</p>
  </body>
</html>
  • !DOCTYPE html :文档声明头。告诉了浏览器,本文档处理的是 HTML 文档
  • html标签 : 根标签,表示文档的开始
  • head : 网页的头部,设置网页的相关信息
  • title : 设置网页标题
  • body : 定义文档的主体,文档主内容
  • p : 是段落

二、标签格式

a、双标签

	<标记名></标记名>
  • 常见的标签
<html></html>
<head></head>
<title></title>
<body></body>
<h1></h1>
<p></p>
<div></div>
<span></span>
<a></a>
<ul></ul>

b、单标签

	<标记名/>
  • 常见的标签
<br />
<!--换行-->
<hr />
<!--水平分隔线-->
<meta />
<img />
<!--插入图片-->

三、标签关系

a、嵌套关系

<head>
  <title> </title>
</head>

b、并列关系

head></head>
<body></body>

四、常见标签

a、h标签:标题

 <h1>我是一级标题</h1>
 <h2>我是二级标题</h2>
 <h3>我是三级标题</h3>
 <h4>我是四级标题</h4>
 <h5>我是五级标题</h5>
 <h6>我是六级标题</h6>

b、p标签:一段文字

<p>我是第一段文字,实验楼,做实验,学编程</p>
<p>我是第二段文字,实验楼,做实验,学编程</p>

c、图片标签

<img src="图片地址"/>

d、a标签: 超链接标签

<a href="https://www.baidu.com//">百度</a>

e、div标签: 块级标签

  • 可以设置宽高,是网页的一块位置
<div style="width:520px;height:520px;background:blue">块级元素</div>
  • div布局
<div style="width:100%;border:1px solid #d4d4d4">
  <div style="background-color:pink">底色</div>
  <div style="background-color:skyblue">布局</div>
</div>
  • 与table类似,

f、span标签:块级标签

  • 要与CSS 同时使用才可以为指定文本设置样式属性
<div id="box">这是div标签,自动换行</div>
<div id="box">我们都是块,但是我自动换行</div>
<span>这是span标签,不自动换行</span>
<span>我们都是块,但是我不换行</span>

g、其他

  • 空格标签
 <p>这是一段文字 前面有很多空格但是只显示一个</p>
 <p>这是一段文字&nbsp;&nbsp;&nbsp;&nbsp;用了空格字符</p>
  • 换行
 <p>下面是换行符</p>
 <br />
 <p>上面是换行符</p>
  • 水平分割线
  <hr />

每天进步一点点,体会学习的乐趣

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值