HTML学习笔记

文章目录第一章 标签之文字排版、图片、链接、音视频一.文字排版1.注释2.标题标签3.段落标签4.换行标签5.水平线标签6.文本格式化标签二.图片1.图像标签2.路径三.链接1.基础语法2.常见链接类型3.HTML 链接标签 a 全属性速查表四.音视频1.音频标签2.视频标签第二章 列表、表格、表单一.列表1.无序列表ul2.有序列表ol3.自定义列表dl二.表格1.基本结构2.标签3.常用属性4.合并单元格三.表单1.input标签2.下拉菜单3.文本域4.label标签5.按钮标签6.表单区域标签第一章 标签之文字排版、图片、链接、音视频一.文字排版1.注释(在vs code添加注释的快捷键Ctrl/)2.标题标签​h1~h6.../h1~h6​注h1在一个网页中只能使用一次h2~h6没有使用次数的限制3.段落标签p.../p4.换行标签br /5.水平线标签hr /6.文本格式化标签​标签名效果strong加粗em倾斜ins下划线del删除线(stong、em、ins、del标签自带强调含义)标签名效果b加粗i倾斜u下划线s删除线(同名标签)二.图片1.图像标签​img src图片路径 alt替代文本​ 注src指定图片路径可以是网络链接、相对路径如 images/photo.jpg或绝对路径。alt替代文本。当图片加载失败或使用屏幕阅读器时显示对可访问性无障碍和 SEO搜索引擎识别图片内容 至关重要。图像基本属性属性作用说明alt替换文本图片无法显示的时候显示的文字title提示文字鼠标悬停在图片上面的时候显示的文字width图片的高度值为数字没有单位height图片的宽度值为数字没有单位2.路径​路径指的是查找文件时从起点到终点经历的路线。路径分类相对路径从当前文件位置出发查找目标文件写法. 当前文件所在文件夹 .. 当前文件上一级文件夹 / 进入某个文件夹里面绝对路径从盘符出发查找目标文件系统说明:Windows 电脑从盘符出发Mac 电脑从根目录出发三.链接1.基础语法a href网址文字或图片/a2.常见链接类型类型示例说明外部链接a hrefhttps://www.baidu.com target_blank百度/a 跳转到其他网站需带协议头内部链接跳转到同级目录下的 HTML 文件: a href 返回首页/a 跳转到上一级目录的文件: a href../news/list.html新闻列表/a 跳转到本站其他页面使用相对路径锚点链接1.传统方式 设置锚点 a nametop顶部/a 跳转链接 a href 回到顶部/a 2.使用id属性 a href#id名跳转到此处/a div idid名目标位置/div页面内跳转常用于回到顶部或长文章导航邮件链接a hrefmailto:webmasterexample.com联系站长/a 唤起系统邮箱下载链接a hreffiles/guide.pdf download下载PDF指南/a 触发文件下载而非打开3.HTML 链接标签a全属性速查表一、核心属性必用属性作用格式示例href跳转地址必填a href target打开方式a target_blank新标签页title悬浮提示文字a title点击访问二、常用进阶属性属性作用常见值/格式download强制下载而不是打开a downloadrel关联关系安全优化relnoopener(防止新窗口访问) noreferrer(不发送Referer信息)type文件 MIME 类型a typeapplication/pdf三、页面内跳转锚点用法格式效果设置锚点div idtop/div跳转到这个位置跳转链接a href#top页面内滚动到顶部四、特殊协议链接场景写法说明邮件链接唤起系统邮箱电话链接移动端直接拨号下载文件触发下载六、避坑必看写链接必须知道外部链接必须写 https://否则会被当成相对路径。相对路径要注意 ./ 当前目录 / …/ 上一级目录。新标签页最好加 rel“noopener noreferrer” 安全。空链接不要写 href“” 会刷新页面直接写 href“javascript:;” 。四.音视频1.音频标签audio src音频的 URL“/audio基本属性属性作用特殊说明src音频URL支持格式MP3,Ogg,Wavcontrols显示播放控件autoplay自动播放为了提升用户体验浏览器一般会禁用自动播放loop循环播放muted静音preload预加载auto/metadata/nonevolume音量0~1只能JS设置2.视频标签video src视频的URL /video基本属性属性作用特殊说明src视频URL支持格式MP4、WebM、Oggcontrols显示视频的控制面板loop循环播放muted静音播放autoplay自动播放为了提升用户体验浏览器支持在静音状态自动播放第二章 列表、表格、表单一.列表1.无序列表ul符号列表没有顺序格式ul li列表项1/li li列表项2/li /ul2.有序列表ol有数字/字母顺序格式:ol li第一项/li li第二项/li /ol常用属性type“1/a/A/i/I” 改变序号样式start“3” 从第3个开始3.自定义列表dl列表标题描述格式dl dt名词1/dt dd名词1解释1/dd dd名词1解释2/dd ... dt名词2/dt dd名词2解释1/dd dd名词2解释2/dd /dl二.表格1.基本结构table border1 tr th表头1/th th表头2/th /tr tr td内容/td td内容/td tr td内容/td td内容/td /tr /table2.标签table表格整体tr一行th表头单元格td普通单元格thead表格头部tbody表格主体tfoot表格底部3.常用属性border“1” 加边框width“500” 宽度align“center” 表格居中cellspacing“0” 单元格间距cellpadding“10” 内容与边框距离4.合并单元格合并单元格的步骤明确合并的目标保留最左最上的单元格添加属性取值是数字表示需要合并的单元格数量跨行合并保留最上单元格添加属性 rowspan跨列合并保留最左单元格添加属性 colspan删除其他单元格三.表单1.input标签input标签基本使用input type...type属性值说明text文本框用于输入单行文本password密码框radio单选框checkbox多选框file上传文件添加multiple属性可一次上传多个文件input标签占位文本input type... placeholder提示信息单选框-radio常用属性属性名作用特殊说明name控件名称控件分组同组只能选中一个checked默认选中属性名和属性值相同简写为一个单词多选框-checkbox多选框也叫复选框默认选中checked2.下拉菜单标签select嵌套optionselect是下拉菜单整体option是下拉菜单的每一项select option北京/option option selected上海/option option广州/option option深圳/option /selectselecetd:默认选中3.文本域多行输入文本的表单控件标签textarea默认文本/textarea4.label标签作用网页中某个标签的说明文本经验用label标签绑定文字和表单控件的关系增大表单控件的范围写法label标签只包裹内容不包裹表单控件设置label标签的for属性值和表单控件的id属性值相同input typeradio idman label forman男/label使用label标签包裹文字和表单控件不需要属性labelinput typeradio女/label提示支持label标签增大范围的表单控件文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等。5.按钮标签格式button type按钮/buttontype属性值type属性值说明submit提交按钮点击后可以提交数据到后台默认功能reset重置按钮点击后将表单控件恢复默认值button普通按钮默认值没有功能一般配合JavaScript使用6.表单区域标签form action发送数据的地址/form作用创建一个表单用于收集用户输入的数据并将这些数据提交到服务器进行处理