川川Rookie自学前端笔记
一、HTML基础内容
1.HTML文档基础结构
无标题文档
HTML语法结构
1种符号：<> 所有的HTML语言diamante都必须被括在其中
2种标签格式：
双标签：成对出现。<标签名>开始，结束。如：
单标签：只存在开始标签，不需要结束。如： 表示无内容元素。
3个组成部分：标签、属性、值：
语法结构：<标签名 属性=“值” 属性=“值”>... 如：
标签可以拥有属性，属性和值都卸载开始标签的尖括号中。
标签和属性之间用空格分割，多个属性之间也用空格分隔。
如果属性有对应的值，则属性和值之间是等式关系，且值需要写在英文引导中。
HTML编写规范
标签名和属性都使用小写
属性的值用双引号括起来
标签的使用符合嵌套规则
这里就简单的借用别人写好的复制过来给大家看，我没有准备开始部分，原文出处：https://blog.csdn.net/pxhdky/article/details/81268125
2.HTML标题标签
标题标签：h1~h6 双标签
Document
欢迎来到前端世界
欢迎来到前端世界
欢迎来到前端世界
欢迎来到前端世界
欢迎来到前端世界
欢迎来到前端世界
他就相当于我们平时看书的目录，运行看看效果：
3.HTML段落标签
段落标签：就是我们平时看到的一篇文章分成几段，用小写p表示 双标签
Document
这是文章标题
阿卡贝拉（意大利：Acappella )即无伴奏合唱。
其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例： 阿卡贝拉《千与千寻》阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例： 阿卡贝拉《千与千寻》阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例：阿卡贝拉《千与千寻》阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例： 阿卡贝拉《千与千寻》阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例： 阿卡贝拉《千与千寻》阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例： 阿卡贝拉《千与千寻》
“翻唱”是指将已经发表并由他人演唱的歌曲根据自己的风格重新演唱，包括重新填词，编曲。现在已有不少明星，都在翻唱他人的歌，不断在翻唱中突破自己，给大家带来不一样的风格。视频示例： 有一种悲伤（翻唱）-《A Kind of Sorrow》
你想把谁分成一段，就在这段文字的开头与结尾分别加上p标签，运行看看效果：
4.HTML文本格式化标签
格式化标签：就是强调语意用的标签，简单知道就好。 双标签
单标签
Document
加粗标签 strong下划线 ins倾斜 em删除线 del
是强制换行，它不同于p是他没有标签之间的间隔，小b和strong都可以使文字加粗，如果是强调语意strong更合适，其他的依此类推，运行看看效果：
5.HTML图片标签
图片标签：img 单标签
Document
alt属性：当图片不显示就会显示设置的属性值，title属性：鼠标停留在图片上会显示设置的属性值，width属性：设置图片宽度，height属性：设置图片高度，运行看看效果：
因为我设置了宽度所以图片变小了 ，自己可以尝试修改。
6.路径
6.1绝对路径（了解就好）
Document
macbookpro电脑因为没有分盘所以起手就是：\
6.2相对路径
Document
就是你所需要的东西在你现在文件的具体地方，上级就用：../起手意思是上级文件如果是多个以此类推：../../，如果你需要的文件跟你当前文件是同级关系直接写相对应的文件名字，下级就依次写，运行看看效果：
因为我的图片在下级路径里面所以其他路径不生效。
7.HTML音频标签
音频标签：audio 双标签
Document
音频标签：单独写什么也看不见，如要加入相对应的属性才可以使用，运行看看效果：
因为谷歌浏览器不可以自动播放，所以需要手动开启。
8.视频标签
视频标签：video 双标签
Document
他的原理跟音频标签一样的，只不过他可以静音播放，运行看看效果（音频和视频自己运行看效果更佳）：
9.超链接标签
超链接标签：a 双标签
Document
前往百度页面
点击我前往标题标签
没有目的地
常用语网页的跳转就比如你在购物京东，点击一个商品他就会跳转到相对应的页面，运行看看：
当我们点击第一个前往百度页面会发生什么？运行：
他就会直接跳转到百度官网页面，其他的同理，第二个是内部跳转，第三个就是空链接哪里都不跳转没有目的地。
10.综合案例-招聘
自己动动小手（非常简单，运用前面的知识）
Document
腾讯科技高级web前端开发岗位
职位描述
负责重点项目的前端技术方案和架构的研发和维护工作；
岗位要求
5年以上前端开发经验， 精通html5/css3/javascript等 web开发技术；
熟悉bootstrap，vue，angularjs，reactjs等框架，熟练掌握一种以上；
代码⻛格严谨，能⾼保真还原设计稿，能兼容各种浏览器；
对web前端的性能优化以及web常见漏洞有一定的理解和相关实践；
具备良好的分析解决问题能力，能独立承担任务，有开发进度把控能力；
责任心强，思路路清晰，抗压能力好，具备良好的对外沟通和团队协作能力。
工作地址
上海市-徐汇区-腾云大厦
运行看看效果：
11.跳转综合案例
需要准备四个页面和几个图片，这里就不展示代码了，很简单，没事看看效果就行。
第一天的知识就到这里，一定要多动手哦，谢谢大家观看，有大佬看出问题请帮忙指正，让我少走弯路。
第二天来咯
12.无序列表标签
无序列表属性：ul>li
Document
- 这是第一个小li
- 这是第二个小li
- 这是第三个小li
运行看看效果：
13.有序列表标签
有序列表属性：ol>li
Document
- 我是第一个
- 我是第而个
- 我是第三个
运行看看：
从第一个一次排序输出
14.自定义列表标签
自定义列表属性：dl>dt>dd
Document
- 帮助中心
- 用户管理
- 代理列表
- 客服服务
常用语网页底部设计，运行看看：
后续需要css调整位置
15.表格的基本使用标签
表格属性：table>tr>th>td
Document
运行看看效果：
16.表格标题和表头标签
标题属性标签：caption. 表头属性标签：th
Document
成绩表单 aa 80 aa bb 70 bb cc 60 cc
运行看看效果：
17.表格结构标签
相关属性：thead(头部) tbody（内容） tfoot（底部）
Document
用户登录时间 用户名 时间 川川Rookie 2023.07.23 川子 2023.07.23
这是展开的效果，其实目的是把它缩放起来，同时让浏览器更准确识别
18.合并单元格标签
rowspan:跨行合并 colspan:跨列合并
Document 1 2 3 2 3 1 2
运行：
19.表单-input的基本使用
Document 用户名 ：
密码：
性别:
兴趣爱好：
上传文件：
运行：
20.表单-占位符标签
属性：placeholder
Document 用户名：密码：
运行看效果：
21.表单-单选框标签
单选框属性：radio
Document 性别：男女
兴趣爱好： 写代码看电影聊天
运行：
如果不设置name属性就会造成，男女都可以同时选择上
22.表单-上传文件标签
属性：file
Document
运行：
23.表单-按钮标签
按钮属性：submit button reset
Document
运行：
24.表单-下拉菜单标签
属性：select>option
Document 地址：
运行：
常用于：出生年月日选择和地址选择
25.表单-文本域标签
属性：textarea
Document
运行看看：
他的大小可以根据右下角拖动改变，这里只是演示，后面会用到css控制宽高
26.表单-label标签
属性：label
Document 性别：
性别：
效果是为了让我们点进男女的时候不一定鼠标要点击到单选框内才可以，是点击男这个字就可以了，增大了点击面积，更方便。
第一种是将label标签套住文字内容部分，然后给input标签设置一个id于label标签自带属性for为同一个值的时候就会生效
第二种是用label标签包括整个input标签然后删除label标签里面的for属性即可（推荐第二种）
27-综合案例-学生信息表
Document 优秀学生信息表格
年级 姓名 学号 班级 高三 迪丽热巴 110 三年二班 古力娜扎 120 三年三班 评语 你们很优秀
28.综合案例-表单
Document
form标签是表单必需品，要不提交按钮无法生效，没有提交地址。第二天就到此结束，谢谢大家观看。（切记多动手）
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！