前端与 HTML | 青训营笔记

树梢还未果
401 阅读2分钟

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

什么是前端，前端具体包括哪些技术栈？

对于我们计算机的同学来说，最常听到的就是后端和前端了，那么什么是前端呢、什么又是后端呢？

后端的工作主要是负责对服务器以及数据库相关的工作和处理前端传输过来的数据等。

前端主要是解决人机交互的问题，以及进行跨端开发，前端主要运行在pc端，移动端等浏览器上展示给用户浏览的，比如我们平常看网页，小程序等,前端应用框架,跨平台响应式网页设计等能够更好的适应各种屏幕分辨率，合适的动态设计，给用户带来极高的用户体验。 前端基础主要有HTML、CSS、JavaScript，也就是我们常说的三件套。

开发环境

那么我们该怎么去创建一个html编辑文件呢，其实很简单一个记事本就可以做到了，但是记事本对于编程员来说太麻烦了，我们可以下载一些专属于程序员的编辑软件：

image.png

HTML标签

HTML取之，HyterText Markup Language，即超文本标记语言，HTML命令可以说明文字、图形、动画、声音、表格、链接等。 常见的标签有:<div></div>、<p></p>、<img/>、<ul><li></li></ul>等。

<div>这是一个div标签</div>
<p>这是一个p标签</p>
<img src="./1673788756406.jpg" style=" width: 100px; height: 50px;" />
<ul>
    <li>这是无序列表标签</li>
    <li>这是无序列表标签</li>
</ul>
<ol>
    <li>这是有序列表标签</li>
    <li>这是有序列表标签</li>
</ol>
<h1>这是标题标签</h1>
<h2>这是标题标签</h2>
<h3>这是标题标签</h3>
<h4>这是标题标签</h4>
<h5>这是标题标签</h5>
<h6>这是标题标签</h6>

image.png

HTML语法

  • 标签和属性不区分大小写，推荐小写
  • 空标签可以不闭合，比如 <input>、<meta charset="UTF-8">
  • 属性值推荐用双引号包裹

什么是语义化

  • HTML中的元素、属性及属性值都拥有某些含义
  • 开发者应该遵循语义来编写出合适的代码，比如有序列表用ol；无序列表用ul等

语义化给我们带来那些好？

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

那么我们该如何做到语义化呢？：

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