这是我参与「第五届青训营 」伴学笔记创作活动的第1天
前端与HTML
课堂笔记
本堂课重点内容：
1.前端的概念、发展以及开发环境
2.HTML的概念、语法以及用法
3.HTML的常用标签
1.前端可以用来做什么？
- 解决GUI人机交互问题
- 跨终端
- PC/移动浏览器
- 客户端/小程序
- VR/AR等
- Web技术栈
2.前端技术栈
- JavaScript->（行为）
- CSS->（样式）
- HTML->（内容）
3.前端应关注的方面有：
兼容、美观、性能、功能、安全、体验、无障碍
4.HTML语法
- 标签和属性不区分大小写，推荐小写。
- 空标签可以不闭合.
- 属性值推荐用双引号包裹。
- 某些属性值可以忽略。
5.HTML语义化是什么
- HTML中的元素、属性及属性值都拥有某些含义
- 开发者应该遵循语义来编写HTML
- 有序列表用ol；无序列表用ul
- lang属性表示内容所使用的语言
6.如何做到语义化
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
7.HTML常用标签
<1>文本标签
- 标题标签：
<h1>-<h6> - 斜体
<i>...</i>,<em>...</em> - 加粗
<b>...</b>,<strong>...</strong> - 标题（引用）
<cite>...</cite> - 下标
<sub>...</sub>上标<sup>...</sup> - 删除线
<del>...</del>
<2>格式化标签
- 换行
<br/> - 换段
<p>...</p> - 水平分割线
<hr/> - 无序序列
<ul>...</ul>有序序列<ol>...</ol> - 列表项
<li>...</li> - 自定义列表
<dl>...</dl> - 自定义表头
<dt>...</dt> - 自定义列表内容
<dd>...</dd> - 组合块级元素
<div>...</div> - 包含文本
<span>...</span>
<3>图片标签
使用<img>标签，其常用属性如下：
- src:图片名、url地址
- title:文字提示属性
- border:边框线粗细
- height:图片高度
- alt:图片加载失败时提示信息
- width:图片高度
<4>超链接标签
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>
<5>语义化标签
<header>头部标签<section>定义文档某个区域<aside>侧边栏标签<nav>导航标签<article>内容标签<footer>尾部标签
<6>表单标签
intput 多种形态
- 文本框：text
- 密码框：password
- 单选框：radio
- 复选框：checkbox
- 按钮：button
- 提交按钮：reset
- 清空按钮：file select
8. 做到语义化
- 要了解每个标签的属性和含义
- 要思考标签和内容的符合性
- 不使用可视化工具生成代码
