前端与HTML | 青训营笔记

galaxy_
52 阅读2分钟

image.png

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

前端

什么是前端

前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页

说白了就是用户看到的页面

常见应用前端的方向

  • 解决GUI人机交互问题
  • 跨终端
    • PC/移动浏览器
    • 客户端/小程序
    • VR/AR等

前端技术栈

image.png

  1. html，页面内容的载体，存放着想让用户浏览的信息，比作一只静态的小鸟
  2. css，对页面内容的美化，就像网页的衣服，通过改变css来使得网页获取不同的衣服，比作让小鸟穿上漂亮的衣服
  3. js，实现页面的特效，即实现静态页面与用户的交互，比作让小鸟动起来

HTML

HTML 分为 HyperText 超文本 （图片，标题，链接，表格）和 Markup Language 标记语言 （文章标题）

DOM树

image.png

HTML语法

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

常用的HTML标签

<html>
<!--注释文字 --> 
<head>
1.更改格式要用<style>h{}</style> 
2.标题<title>
<body>
1.<p>段落 
2.使用<span>标签自定义文字样式 
3.<hx>x级标题 
4. 使用<div>标签自定义块 
5.<header>头 <section>区域 <aside>侧栏 <footer>尾 
6.<br> 换行 
7.&nbsp空格 
8.<hr>水平分割线(逐渐不支持)
9.<ul><li>无序 
10.<ol><li>有序
11.<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
12.(1)<a href="目标网址" title="鼠标滑过显示的文本"></a> 
   (2)默认值为*self，代表在当前页面打开链接，* blank代表在新窗口打开链接。 
13.表格<table border=""> </table>标题<caption> <tr>为一行 <th>加粗显示 <td>普通显示
14.交互:<form method="传送方式" action="服务器文件">
15.大段文字时，文本输入域。 <textarea rows="行数" cols="列数">文本</textarea>
16.<input type="radio/checkbox" value="值" name="名称" checked="checked"/>

HTML语义化

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

语义化好处

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

如何做到语义化

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

HTML使用者

  • 开发者 -- 修改维护页面
  • 浏览器 -- 展示页面
  • 搜索引擎 -- 提取关键词
  • 屏幕阅读器 -- 给盲人读页面内容

如何学好HTML

  • 多进行html代码的编写
  • 一开始可以先看一些简单的源代码并自己实现
  • 多向有经验的同学老师请教

总结

本节主要介绍了前端的基本概念和HTML的基本规范以及如何学好HTML

avatar
文章
阅读
粉丝