前端HTML

秦朝胖子得加钱

已于 2023-07-09 20:50:34 修改

阅读量218

点赞数

分类专栏：前端文章标签： flask python 前端

于 2022-05-24 23:04:33 首次发布

本文链接：https://blog.youkuaiyun.com/qq_20427967/article/details/124955150

版权

前端专栏收录该内容

8 篇文章

订阅专栏

本文介绍了HTML、CSS和JavaScript的基础知识，包括HTML的常见标签如标题、段落、图片、超链接，CSS用于元素样式设置，JavaScript处理页面交互。还提及了Vue框架如何封装这三者，以及表单、列表、输入框等元素的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

HTML：页面结构：可以把他看成一个文档，定义展示页面的内容结构。
CSS：页面表现：元素大小、颜色、位置、隐藏或显示、部分动画效果。
JavaScript：页面行为：部分动画效果、页面与用户的交互、页面功能。
VUE：对以上三个进行封装，可以直接调用。

HTML

常见的HTML标签

<!-- 注释标签的内容，不会在页面展示 -->

标题标签

段落-斜线-加粗-换行标签

div块级标签

一个div占一行，圈地为王，没有其他含义。HTML5支持其自定义命名，格式一致即可。

span行内标签/内联标签

自己多长就占多长

img图片

可以使用外网地址，但要防备防盗链，可以使用本地图片。
src属性：图片地址
设置图片宽高 style="width: 100px; height: 20%"

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>我的联通</title>
  </head>
  <body>
    <img src="http://pic1.win4000.com/wallpaper/a/589bfbe772392.jpg" alt="" style="width: 300px; height: 100px">
    <img src="/static/a.jpeg" alt="" style="width: 30%; height: 20%"> <! img也是行内标签，百分比设置图片宽高 >
  </body>
  </html>

alt属性是图片加载失败时的提示文案。

a超链接

默认当前页打开
可以引用本地地址
设置 target="_blank" 新Tab页打开
设置无下划线 style="text-decoration: none"

列表

实心列表
有序列表

表单/表格

thead：表头 tbody：表格主题部分 tfoot：表格尾部
tr：一行那就写一个 td：一列那就写一个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>用户列表</h1>
    <table border="1">
        <thead>
            <tr>
                <th>ID</th>
                <th>头像</th>
                <th>姓名</th>
                <th>邮箱</th>
                <th>更多信息</th>
                <th>操作</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>
                    <img src="http://pic1.win4000.com/wallpaper/a/589bfbe772392.jpg" alt="" style="height: 50px">
                </td>
                <td>武沛齐</td>
                <td>休息@live.com</td>
                <td>
                    <a href="http://www.chinaunicom.com.cn/about/leaders.html" target="_blank">查看详细</a>
                </td>
                <td>
                    编辑
                    删除
                </td>
            </tr>
             <tr>
                <td>1</td>
                <td>
                    <img src="/static/a1.jpeg" alt="" style="height: 50px">
                </td>
                <td>武沛齐</td>
                <td>休息@live.com</td>
                <td>
                    <a href="http://www.chinaunicom.com.cn/about/leaders.html" target="_blank">查看详细</a>
                </td>
                 <td>
                    编辑
                    删除
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>