前端学习笔记_HTML

基本页面框架

<!DOCTYPE html> <!-- 文档类型声明标签 -->
<html lang="zh-cn"> 
<!-- 当前网页语言基础,'en':英文网页 'zh-cn':中文网页 -->
    <head>
        <title>网页标题</title>
        <meta charset="UTF-8"> <!-- 设置字符编码 -->
    </head>
    <body> <!--body标签的属性:bgcolor表示背景颜色,text表示文本颜色-->
    网页主体内容
    </body>
</html>

标签的分类

1.根据标签是否关闭:关闭型、非关闭型

关闭型:head、body、title、p、div…(有结束标签)
非关闭型:br、meta、hr、input、image…(没有结束标签)

2.根据标签是否独占一行:块级标签、行级标签

块级标签:h1-h6、p、div…(显示为块状,独占一行)
行级标签:span、i、em、strong…(在行内显示,可以与其他内容在同一行显示)

实体字符

代码 实体字符名称
&lt; <
&gt; >
&amp; &
&quot; "
&copy; ©
&reg; ®
&Lt;
&Gt;
&yen; ¥

常用标签

标题标签h1-h6

<!-- 标题标签:按照h1-h6逐渐变小,独占一行,加粗显示,有明显的间隔 -->
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

效果图

段落标签和换行标签

段落标签p

p标签不能嵌套h1、div等块级标签

<!-- p:段落标签,独占一行,块级标签,并且每个段落之间有明显的间隔 -->
<p>段落一</p>
<p>段落二</p>

在这里插入图片描述

换行标签br

br标签是非关闭型标签,使用后段落的间隔没有p标签大

<!-- br标签:换行标签 --> 
        段落一
        <br>
        段落二

在这里插入图片描述

水平线标签hr(块级标签)

hr : horizontal 水平线

常用属性:
color

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值