这是我参与「第五届青训营 」笔记创作活动的第1天。
1.前言
2.今日主要学习内容
- 前端是什么
使用web解决人机交互功能
- 技术栈
HTML（内容），CSS（样式），Javascript（行为）
- 前端应该关注哪些方面
功能，美观，无障碍，安全，性能，兼容性，用户体验
- 开发环境
浏览器和编译器
- HTML的概念
HyperText Markup Language超文本标记语言
- HTML语法
1.标签和属性不区分大小写，推荐小写。 2.空标签可以不闭合，比如input，meta。 3.属性值推荐用双引号包裹。 4.某些属性值可以省略，比如required，readonly。
- 常用的HTML标签
- 标题h1~h6
- 列表
- 有序列表ol-li
- 无序列表ul-li
- 属性名接属性值列表dl-dt-dd
<dl>
<dt>导演：</dt>
<dd>陈凯歌</dd>
</dl>
- 链接a,属性：href超链接
- img图片，属性：alt替代性文本，width宽度
- audio音频
- video视频
- 输入input，属性：placeholder占位符，type类型（range，number，date，checkbox），name，list
- 下拉选择select-option
- 快捷引用blockquote，属性cite；cite作品名字或章节；q讲过的内容；
- code代码
- strong
- em
3.语义化
HTML所有的元素，属性及属性值都有某些特定含义
4.常用标签
br换行
h标签 标题
p标签 段落
hr水平线标签
文本格式化标签:b(strong)加粗,u(ins)下划线,i(em)倾斜,s(del)删除线
图片标签img src="" alt="" title="" src="图片名" alt="替换文本" title="鼠标悬停时显示" width="宽度" height="高度"
音频标签audio src="" controls /audio src音频的路径 sontrols显示播放的控件 autoplay自动播放(部分浏览器不支持) loop循环播放
视频标签video src="" controls /video
a链接标签a href="超链接"显示文字/a target="" _self覆盖当前窗口 _blank新窗口跳转
列表标签(无序列表，有序列表，自定义列表)
无序列表
ul ul标签只能包含li
li/li li标签可以包含任意内容
li/li
/ul
有序列表ol+li
自定义列表 dl表示自定义列表的整体 dt主题 dd针对主题的每一项内容
表格标签 table表格整体 tr表格每行 td表格单元格 相关属性:border边框宽度 width表格宽度 height表格高度
表格标题标签caption 表头单元格标签th(替换td)
表格结构标签 thead头部 tfoot尾部 tbody主体
合并单元格属性：跨行(垂直)合并rowspan 跨列(水平)合并colspan 属性值为合并单元格个数,给保留的单元格加属性
表单标签
input标签 属性type 属性值:text单行文本框 password密码框 radio单选框 checkbox多选框 file文件 submit提交按钮 reset重置按钮
button普通按钮 属性placeholder占位符 属性name(分组,有相同name属性的为一组,一组只能选一个) 属性checked默认选中 属性multiple多文件选择 属性value显示文字
表单预标签form 属性action
button可作为标签出现 属性type 属性值submit reset button
下拉菜单标签 select下拉菜单整体 option下拉菜单中的每一项 属性selected下拉菜单的默认选中
文本域标签textarea 属性 cols可见宽度 rows可见行数
label标签(绑定内容与表单标签的关系)
使用方法 1.使用label标签把内容(文字)包裹起来,在表单标签上添加id属性,在label标签的for属性中设置对应的id属性 2.直接用label标签把内容(文本)和表单标签包裹起来,把for属性删除即可
语义化标签:网页排版布局 div标签pan标签(不(独占一行) s换行)
