前端HTML | 青训营笔记

小鱼仔子
110 阅读3分钟

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

课堂笔记

课堂重点

简单了解前端的基本概念
学习了HTML的一些基础标签
HTML的语义化

关于前端

首先，前端的基础技术分为三层，分别是负责页面结构和内容的HTML、负责页面样式的CSS和使用JavaScript来定义前端用户使用的行为。三层都是在浏览器运行，通过http协议与服务器交。

其次，人机交互的问题，前端要关注除功能外，还要关注页面美化、用户信息安全、技术兼容、性能及用户体验。

前端也使用node.js来实现与后端的交互，可以通过Ajax进行同步异步请求；也可以使用ELECTRON实现与客户端进行交互等等。

前端在课上学习的编辑器有：VSCode、Vim、WebStorm；
我自己用过的编辑器除了课上学习的，还有HBuilder X，对比我觉得webstorm配合node.js，再使用Ajax进行同步异步请求，写项目比较方便。

HTML介绍和一些标签的使用情况

介绍

HTML（hypertext Markup language）包含了图片、标题、链接、表格等格式，使用标签来表示内容，在标签上改变格式的属性。
语法：
1. 标签和属性不区分大小写，建议是小写
2. 有些标签是可以不闭合的，比如 input、meta
3. 标签的属性值推荐用双引号包裹
4. 有一些属性是可以省略的

基础框架如下

`

<!doctype html>                // 标记以什么方式渲染前端
<html>
<head> 
<meta charset = "UTF-8"> 
<title>页面标题</title> 
</head> 
<body>                         // 主要内容
<h1>一级标题</h1> 
<p>段落内容</p> 
</body>
</html>

`

标签使用

标题h1~h6
h1到h6标题标签从一到六字体逐渐变小，并且只能有一个h1标签

<h1> 一级标签 </h1>
<h2> 二级标签 </h2>
<h3> 三级标签 </h3>
<h4> 四级标签 </h4>
<h5> 五级标签 </h5>
<h6> 六级标签 </h6>
有序&无序&基层列表
有序列表：显示数字序号
<ol>
    <li> </li>
    <li> </li>
</ol>

无序列表：显示小圆点
<ul>
    <li> </li>
    <li> </li>
</ul>

基层列表：分级展示，如花朵里有玫瑰、月季等
<dl>
    <dt> 花朵: </dt>
    <dd> 玫瑰 </dd>
    <dd> 月季 </dd>
    <dt> 节日: </dt>
    <dd> 春节 </dd>
    <dd> 中秋 </dd>
</dl>
链接标签
链接标签可以使字体变蓝，可以通过这些字体进入新的界面。
<a href="https://www.bytedance.com/" target="_blank">
多媒体标签
图片标签
<img src="https://lf3-static.bytednsdoc.com/obj/movable_type.jpg" alt="Metal movable type" width="400"/>
音频标签
<audio src="/obj/music.ogg" controls></audio>
视频标签
<video src="/obj/video.mp4" controls></video>
输入标签
input标签可以通过type的类型不同展示不同的输入框，如date日期选择框等。
<input placeholder=“请输入密码”> //输入框
<input type="range"> //范围滑动条

HTML的语义化

语义化是什么？
    HTML中的元素、标签和属性都具有某种含义，这种含义就是语义。
好处：
    1. 代码的可读性；
    2. 可维护性
    3. 搜索引擎优化
    4. 提升无障碍性
如何做到：
    首先，得了解每一个标签、属性的含义；然后尽量不用可视化工具生成代码。

学习内容和自己的理解如上，若是不对，欢迎指正。

avatar
文章
阅读
粉丝