前端与HTML ｜ 青训营

用户5504333019194
80 阅读3分钟

什么是前端

使用web技术栈解决多端图形用户交互问题

前端技术栈：HTML，CSS，JavaScript

前端关注的方面：美观，功能，无障碍，安全，性能，兼容，体验

什么是HTML

HyperText Markup Language

HyperText，如图片、标题、链接、表格；Markup Language，如<h1>文章标题</h1>

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>页面标题</title>
    </head>
    <body>
        <h1>一级标题</h1>
        <p>段落内容</p>
    </body>
</html>

<!doctype html>指定页面所使用的HTML的版本，从而来让浏览器决定用哪种方式来渲染界面。

浏览器会将HTML代码解析为DOM树。

也可以在标签上设置一些属性 <!doctype html>标记当前在使用的html文件是什么版本，决定浏览器使用何种渲染模式

浏览器会将html代码解析为一棵dom树

image.png

HTML语法

  • 标签和属性不区分大小写，推荐小写
  • 空标签可以不闭合，比如 input，meta
  • 属性值推荐用双引号包裹
  • 某些属性值可以忽略，比如required，readonly

HTML标签

  • 标题h1~h6

  • 列表：

    ol有序列表；

    ul无序列表；

    dl定义列表(dt描述列表中的标题，dd具体值)

  • 链接 a：

    href跳转地址

    target="_blank"新页面打开

    可以插入多媒体 img，audio，video (src指定路径；controls规定浏览器为视频或音频提供播放控件；alt用于图片描述，当图片无法显示时，页面会显示alt中的文字)

  • 输入：

    input（placeholder占位符；type决定不同类型，如range、number、date、checkbox复选框、radio单选框、list）

    textarea定义多行文本输入控件

    <select>与<option>结合的下拉列表

  • 文本：

    <blackquote>长引用，如引用一段话 (有cite属性)

    <cite>短引用，如引用书名等

    <q>一般也是短引用

    <code>代码标签

    <strong>强调内容

    <em>强调语气，重音

内容划分

image.png

<nav>导航；<main>主要内容；<aside>侧边栏；<footer>页尾

语义化

  • HTML中的元素、属性及属性值都拥有某些含义
  • 开发者应该遵循语义来编写HTML
    • 有序列表用ol；无序列表用ul
    • lang属性表示内容所使用的语言

语义化的好处：

  • 代码可读性
  • 可维护性
  • 搜索引擎优化
  • 提升无障碍性

如何做到语义化：

  • 了解每个标签和属性的含义
  • 思考什么标签最适合描述这个内容
  • 不使用可视化工具生成代码

学习心得：

前端是负责构建用户界面的技术领域，它关注着如何让网页界面变得美观、功能丰富、安全、高性能、兼容各种设备和提供优质用户体验。掌握前端技术能够让开发者更好地与用户交互，实现各种复杂的图形用户界面，使网站、Web应用程序等在不同终端上都能良好运行。

HTML作为基础，通过标签和属性描述网页结构。语义化是HTML编写中一个重要的指导原则，合理运用语义化标签和属性能够更好地描述网页内容的结构，使其更符合直觉和逻辑，提升代码的可读性和可维护性，并且对搜索引擎优化和无障碍性也有积极影响。

avatar
文章
阅读
粉丝