前端与HTML | 青训营笔记

用户1616688579688
466 阅读2分钟

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

本堂课重点内容：

了解前端
HTML简介

详细知识点介绍：

  • HTML简介：HyperText（超文本） Markup（标签） Language（语言）
  • 基本结构： 
    <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>
</head>
<body>

</body>
</html>
    第一行不写浏览器会使用老版本来渲染网页

HTML语法

  1. 标签和属性不分大小写，推荐小写

  2. 空标签可以不闭合，例如input, meta

  3. 属性值推荐用双引号包裹

  4. 某些属性值可以省略，比如required、readonlly

一些标签介绍

  • h1 ~ h6 标题标签，内置大小属性 h1-一级标签字号最大，h2-二级标签，以此类推

  • 有序列表： ol>li ,li会添加数字

  • 列表：dl>dt, dd dt属性名，dd属性值（相当于另起一行再tab），dt和dd是多对多的关系

  • 链接:a
    href： URL，可以是绝对路径或相对路径，也可以是网址
    target: blank-表示开一个新的网页，网页的URL是href的内容

  • 图片：img
    src: 图片的URL
    alt: alternative text，图片预加载文本，当图片加载失败时在图片区域显示的文字

  • 音频和视频：**audio / video **
    src: 音视频的URL
    controls： 显示音视频控件

  • 输入：**input **
    placeholder： 占位符，用户未输入时展示的文本信息
    type： 控制输入类型

    text值的含义input text=""
    range控制用户输入范围，让input变成一个滑动条
    number限制用户只能输入数字
    date选择日期
    textarea文本编辑框，可由用户调整大小
    date选择日期
    date选择日期

  • select 下拉选择标签
    option 下拉选项

  • 文本类标签
    blockquote： 引用标签 cite属性值表示引用的URL或网址
    ctie： 短引用
    q： 和cite差不多，但cite一般表示章节或标题，q是表示具体内容
    code： 代码，可长可短
    strong： 很重要，强调
    em： 语气强调

三、课后个人总结：

  • 本章记忆性的东西较多，很多标签没有细讲和涉及到，建议去MDN看看html5的标准
avatar
文章
阅读
粉丝