前端与HTML | 青训营笔记

用户2252297298707
83 阅读1分钟

前端与HTML

这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天

前端技术栈

  • JavaScript 行为
  • css 样式
  • HTML 内容

前端关注的方面

  • 美观
  • 功能
  • 无障碍
  • 兼容
  • 体验
  • 安全

常用的标签

标题

h1-h6

列表

有序 ol->li

有序 ul->li

自定义 dl->dt[标题]->dd[值]

链接

<a href="#" targrt="_blank"></a>

多媒体

图片

<img src="" alt="图片未显示时展示" width=""/>

音频

<audio src="" controls></audio>

视频

<video src="" controls></video>

输入

input 表单输入标签

  • placeholder 文本提示
  • type 内容
    • checkbox 多选
    • radio 单选
      • name 名字
    • range 滚动条
    • number 数字
    • data 日期
  • min 最小值
  • max 最大值
  • list 可用datalist标签配合作为输入提示

textarea 多行文本标签

select 下拉选择标签

  • option 可选择内容

文本

p 行标签

blockquote 长引用

  • cite 源地址

cite 短引用 章节

q 短引用 内容

code 代码引用

pre->code 代码多行引用

strong 加粗 重点强调

em 语气强调

内容的划分

header

  • nav

main

  • article
  • article
  • ...

aside

footer

注意

注意语义化

  • 许多标签具有语义 书写时要注意

传达内容而不是样式

实践练习例子

表格

<!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">
    <title>Document</title>
    <style>
        table {
            width: 500px;
            height: 149px;
        }
        table,td,th {
            border: 1px solid red;
            /* 折叠相邻的边框 */
            border-collapse: collapse;
            font-size: 14px;
            /* 文本对齐 */
            text-align: center;
        }
    </style>
</head>
<body>
    <!-- cellspacing 边框间距 -->
    <table align="center" cellspacing="0">
        <thead>
            <tr>
                <th>排名</th>
                <th>关键词</th>
                <th>趋势</th>
                <th>进入搜索</th>
                <th>最近七日</th>
                <th>相关链接</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>01</td>
                <td>鬼吹灯</td>
                <td>up</td>
                <td>456</td>
                <td>123</td>
                <td><a href="#">贴吧</a></td>
            </tr>
            <tr>
                <td>01</td>
                <td>鬼吹灯</td>
                <td>down</td>
                <td>456</td>
                <td>123</td>
                <td><a href="#">贴吧</a></td>
            </tr>
            <tr>
                <td>01</td>
                <td>鬼吹灯</td>
                <td>up</td>
                <td>456</td>
                <td>123</td>
                <td><a href="#">贴吧</a></td>
            </tr>
            <tr>
                <td>01</td>
                <td>鬼吹灯</td>
                <td>down</td>
                <td>456</td>
                <td>123</td>
                <td><a href="#">贴吧</a></td>
            </tr>
        </tbody>
    </table>
</body>
</html>
avatar
文章
阅读
粉丝