【JavaWeb】HTML常用标签

p_fly

已于 2023-03-04 18:19:42 修改

阅读量707

点赞数

分类专栏： JavaWeb 文章标签： html 前端

于 2023-03-03 20:03:56 首次发布

本文链接：https://blog.csdn.net/p_fly/article/details/129325578

版权

JavaWeb 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

HTML标签结构

HTML语言主要都是由标签构成的。

标签名在 <> 中如<body>

标签大部分成对出现，代表开始和结束如 <body>标签中的内容</body>

少部分单个出现，叫单标签 </br> 代表换行

标签中可以加属性，多个属性之间使用空格隔开

HTML文件结构

<html>

    <head>

        <title>Document</title>

    </head>

    <body>
    
    </body>

</html>

<html> </html> 是整个html文件的顶层标签(根标签)

<head> </head> 整个页面的属性

<title> </title> 页面的标题

<body> </body> 页面的内容

HTML常见标签

注释标签

    <!--  -->
    <!-- 上面这个标签就是注释 -->
    <!-- 编译器中按 Ctrl + / 快速生成 -->
    <!-- 在浏览器查看源码时可以看到注释 -->

标题标签

    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <!-- 总共有六级标题 -->

段落标签

    <p>
        一个p标签之间就是一个段落
    </p>
    <p>
        这是另外一个段落
    </p>

换行标签

    一个p标签之间就是一个段落</br>换行了，使用这个比<br>更为标准

格式化标签

    <b>加粗</b>
    <strong>这也可以加粗</strong>
    </br>
    <i>倾斜</i>
    <em>这也可以倾斜</em>
    </br>
    <del>删除线</del>
    <s>这也是删除线</s>
    </br>
    <ins>下划线</ins>
    <u>这也是下划线</u>

图片标签

    <!-- 测试图片标签 -->
    <!-- src 图片的路径 -->
    <!-- 路径可以是相对路径，也可以是绝对路径  表示方法都一样 -->
    <!-- alt 当图片不能正确显示的时候显示alt中的内容 -->
    <!-- width  图片的大小(只设置width 长和宽会按比例缩放) -->
    <!-- border 图片的边框 -->
    <!-- title 鼠标悬停出来的文字 -->
    <!-- 属性可以有多个，之间用空格或回车分隔 -->
    <img src="picture1.png" alt="宇航员" width="500px" border="5px"
    title="宇航员">

超链接标签

    <!-- a 超链接 点击后可以跳转到那个界面 -->
    <!-- >< 中间的文字会显示到网页上 -->
    <a href="https://www.bilibili.com/">点我跳到b站</a>
    <!-- 点击目录中的html文件 -->
    <a href="Test2.html">点我跳到Test2</a>
    <!-- # 用这个符号占位 -->
    <a href="#">我是一个空链接</a>
    <!-- 内容还可以是文件，这样就可以下载 -->
    <a href="picture1.png">点我查看宇航员图片</a>
    <a href="picture1.7z">点我下载压缩包</a>
    <!-- 链接中加图片 图片=链接 -->
    <a href="https://www.bilibili.com/">
        <img src="picture1.png" width="100px">
    </a>
    <!-- 点击链接后会生成一个新的标签页，而不是覆盖 -->
    <a href="https://www.bilibili.com/" target="_blank">点我增加新的标签页</a>

表格标签

    <!-- 表格标签 -->
    <!-- table 整个表格的开始和结束 -->
    <!-- 表格中可以设置边框的属性，一般用CSS来设置 -->
    <table align="ceter" border="1" cellpadding="20" cellspacing="0" 
    width="500" height="500">

        <!-- tr 表示一行 -->
        <tr>
            <!-- th 表示表头中的一个单元格 -->
            <th>姓名</th>
            <th>学号</th>
        </tr>

        <tr>
            <!-- td 表示一个单元格 -->
            <td>张三</td>
            <td>10001</td>
        </tr>

        <tr>
            <td>李四</td>
            <td>10002</td>
        </tr>

        <tr>
            <td>王五</td>
            <td>10003</td>
        </tr>

    </table>

列表标签

    <!-- 列表标签 -->

    <!-- ul unordered list 无序列表 -->
    <ul>
        <!-- li 列表项 -->
        <li>C语言</li>
        <li>Java</li>
        <li>大学物理</li>
        <li>高等数学</li>
    </ul>

    <!-- ol ordered list 有序列表 -->
    <ol>
        <li>C语言</li>
        <li>Java</li>
        <li>大学物理</li>
        <li>高等数学</li>
    </ol>

    <!-- dl 自定义列表 -->
    <dl>
        <!-- dt 小标题 -->
        <dt>课程</dt>
        <!-- dd 列表项 -->
        <dd>C语言</dd>
        <dd>Java</dd>
        <dd>大学物理</dd>
        <dd>高等数学</dd>
    </dl>

表单标签

表单标签是用户输入的重要途径.

input标签

    <!-- 表单标签 -->
    <!-- text 输入文本 -->
    <input type="text">
    <br/>
    <!-- password 输入密码 -->
    <input type="password">
    <br/>
    <!-- radio 单选框(默认可以多选) -->
    <!-- name 必须相同才能实现多选一的效果 -->
    <!-- checked 默认初始值选哪个 -->
    <input type="radio" name="sex"> 男
    <input type="radio" name="sex" checked="checked"> 女
    <br/>
    <!-- checkbox 多选框 -->
    <input type="checkbox"> A
    <input type="checkbox"> B
    <input type="checkbox"> C
    <input type="checkbox"> D
    <br/>
    <input type="button" value="这是个按钮"
     onclick="alert('按了按钮的结果')">
     <br/>
     <input type="file">
     <br/>

select标签

     <!-- select 选择 -->
     <select>
        <!-- option 选择的选项 -->
        <option>请选择年份</option>
        <option>2001</option>
        <option>2002</option>
        <option>2003</option>
        <option>2004</option>
        <option>2005</option>
     </select>

textarea标签

    <textarea cols="30" rows="10">
        写点内容
    </textarea>

无语义标签

    <div>
        div标签独占一行
        div标签除了表单标签不能模拟之外，剩下所有的标签基本上都可以模拟
        <span>
            aaa
        </span>
        <span>
            bbb
        </span>
    </div>
    <div>
        另一个div
        <span>
            ccc
        </span>
        <span>
            ddd
        </span>
    </div>