HTML | 青训营笔记

90 阅读1分钟

这是我参加「第四届青训营」笔记创作活动的第1天

我自己是一个准大三刚刚入门前端的菜鸟,学了三件套目前在学习es6的部分算是零基础吧,今天总结一下上课复习HTML的内容。

什么是前端

  • 解决GUI人机交互问题
  • 跨终端
  • Web技术栈
    • HTML
    • CSS
    • JavaScript

前端关注的方面

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

语法部分

之前没关注过<!doctype html>的作用渲染方式不同从来都是!提示输入

标题标签

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

列表

    <h4>有序列表</h4>
    <ol>
        <li></li>
    </ol>
    <h4>无序列表</h4>
    <ul>
        <li></li>
    </ul>
    <h4>自定义列表</h4>
    <dl>
        <dt></dt>
            <dd></dd>
    </dl>

链接

<a></a> href属性是跳转网页url,target是跳转方式

图片 视频 音频

<img> src属性是存放位置,alt是加载失败时显示的文本。自身是行内元素,跟文本对齐的时候CSS使用vertical-align属性。

<video> src属性是存放位置,autoplay字面含义bool属性,controls属性在提供进度条的控制面板,loop循环,muted静音。

<audio> 属性类似 <video>

表单

<input>不同type内容不同,用时可查MDN

引用

  • <blockquote>引用段
  • <cite>作品名字
  • <q>短引用
  • <code>代码部分

页面内容

image.png 在写网页时可以用上述标签,HTML结构更清晰。

语义化

为什么语义化

  • 为了开发者更好维护
  • 给浏览器展示页面
  • 搜索引擎会抓取html页面,提取关键词
  • 无障碍可能的需求,不同环境的需求

做到语义化,课上内容讲的比较精炼,总结自己用的时候去查MDN。