HTML标签

最新推荐文章于 2024-10-02 17:15:49 发布

Atopos__

最新推荐文章于 2024-10-02 17:15:49 发布

阅读量147

点赞数

文章标签： html 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/Atopos__/article/details/128808577

版权

标题标签

通过<h1>-<h6>等标签进行定义.

<body>
    <h1>h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>
    <h4>h4</h4>
    <h5>h5</h5>
    <h6>h6</h6>
</body>

段落标签

通过<p>标签进行定义.

<body>
   <p>第一个段落</p>
   <p>第二个段落</p>
</body>

超链接标签

通过<a>标签进行定义.

<body>
 <!-- 
链接标签:a
属性:
    href:指定跳转地址(必须带协议http或https)
    target:新窗口打开链接

  -->
  <a href="http://www.baidu.com" target = '_blank'>点击打开百度</a>
</body>

图片标签

网页中插入图片就要使用图片标签,HTML图片是通过<img>标签进行定义.

<body>
<!-- 
    图像标签:img
    属性:
        src:图片路径及文件名
        width:宽
        heigth:高
        title:鼠标悬停在图片上时的提示信息
        alt:图片未加载时提示信息
    路径:
        相对路径:相对当前执行文件所在位置来说
                上一级:../
                同级:./
        绝对路径:不推荐(不同电脑所在文件路径不同)
        测试点:必须有title

 -->
 <img src="/img/111.jpg" width="200px" height="300px" title="百度图片" alt="图片未加载" />
</body>

换行与空格

<!-- 
    空格:&nbsp;
    换行:<br />

 -->

    hello&nbsp;&nbsp;&nbsp;<br />world!
    <!-- 使用p标签进行换行 -->
    <p>hello</p>world

布局标签

页面布局使用,常用div和span

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <image.pngtitle></title>
    <style type="text/css">
        #s1,#d1 {background-color: red;}
        #s2,#d2 {background-color: pink;}
    </style>
</head>
<body>
<!-- 
    布局:
        大盒子:div -> 独占一行
        小盒子:span -> 一行可以放多个

 -->
 <div id="d1">
    div1 
 </div>
 <div id="d2">
    div2
 </div>
 <span id="s1">s1</span>
 <span id="s2">s2</span>
    
</body>   
    
</html>

列表标签

列表标签常用li元素(分为:有序和无序)

<body>
    <!-- 
        列表标签:li
        有序:<ol></ol>
        无序:<ul></ul>
     -->
     <!-- 有序 -->
     <ol>
        <li>北京</li>
        <li>上海</li>
        <li>广州</li>
        <li>深圳</li>
     </ol>
     
     <!-- 无序 -->
     <ul>
     <li>华山</li>
     <li>泰山</li>
     <li>嵩山</li>
     <li>恒山</li>
     </ul>
     
</body>

表单标签

页面提交输入信息需要使用表单标签<form>

<body>
    <!-- 
    type=:
        文本框:text
        密码:password
        单选按钮:radio
        复选框:checkbox
        按钮:
            提交:submit
            重置:reset
            普通:button
     -->

     <!-- 
        action:指定叫数据提交到对应页面
        method:提交方法
            get:
                1.明文提交,所有的参数在url中课件
                2.速度快
                3.提交内容长度有限制
            post:
                1.非明文提交
                2.速度慢
                3.提交内容长度无限制

      -->
    <form action="submit.html" method="get">
        用户名: <input type="text" name="username">
        <br>
        密码框: <input type="password" name="password">
        <br>
        性别:
        <!-- 用name进行分组后就可以实现单选 -->
        <input type="radio" name="one">男
        <input type="radio" name="one">女
        <br>
        您的爱好:
        <input type="checkbox" name="zq">挣钱
        <input type="checkbox" name="cf">吃饭
        <input type="checkbox" name="sj">睡觉
        <br>
        <input type="submit">
        <input type="reset">
        <input type="button" value="帮助">
    </form>

</body>