html元素

<!DOCTYPE html>
<!-- 笔记文件  -->
<!-- 第一行说明这是 html 类型的文件,这是套路 -->
<!--
html 是根元素
head 里面放辅助信息
body 里面放显示的内容
这个结构是一个基础套路
-->

<!--
尖括号里面的是标签
一般说来 标签成对出现 但也有一些例外比如图片标签 <img>

标签可以有属性,例如下面这个标签 src 就是一个属性
doge.gif 是属性的值, 值用 单引号或者双引号 包含
很多情况下也可以不用引号(不推荐)
<img src="doge.gif">
-->
<html>
<head>
    <!-- 注释是会被忽略的内容 -->
    <!--
    meta 这一句是指定文件的编码
    通过 charset 属性指定了编码为 utf-8
    -->
    <meta charset="UTF-8">
    <!-- title 是浏览器的标题 -->
    <title>标题</title>
</head>
<body>
    <!-- 以下是常用的标签 -->
    <!-- 内容可以放在标签里 -->
    <!-- h1 - h6 是标题 -->
    <h1>标题</h1>
    <h2>标题</h2>
    <h3>标题</h3>
    <h4>标题</h4>
    <h5>标题</h5>
    <h6>标题</h6>

    <!-- div 和 p -->
    <div>这是 div 里面的内容</div>
    <p>这是 div 里面的内容</p>

    <!-- 文本标签 -->
    <!-- strong em span -->
    <strong>strong 加粗</strong>
    <em>em 斜体</em>
    <span>span 什么效果也不会有</span>

    <!-- html 里面是没有回车的,换行用 br -->
    <strong>br 可以换行<br>被换行了</strong>

    <!-- 图片标签 -->
    <!-- src 属性指定了图片的地址 -->
    <!-- alt 标签指定了图片的说明 -->
    <img src="doge.gif" alt="图片替代文案"/>

    <!-- 超链接标签 -->
    <!--
    href 是链接指向的地址
    -->
    <a href="https://123.sogou.com/">指向论坛的超链接</a>

    <!-- 表单相关标签 -->
    <!-- 下面几个标签是输入数据用的 -->
    <button>这是一个按钮</button>
    <textarea rows="8" cols="40"></textarea>
    <!-- type 属性决定了 input 的行为和样式 -->
    <input type="text" name="name" value="">

    <!-- 列表标签 -->
    <!-- ol 是有序列表 ordered list -->
    <!-- li 是列表中的一个元素  list item -->
    <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ol>

    <!-- ul 是有序列表 unordered list -->
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</body>
</html>

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值