疯疯's Blog-魔改ChangeLog
This is 疯疯Blogの魔改ChangeLog~
ChangeLog 2022-8-24由于工作原因和种种不可抗力因素下，搁置已久的Hexo重启计划，在今天正式启动。
目前使用的Blog框架为Hexo，以ButterFly主题为底板进行修改。
目前由CloudFlare+Freenom+Aliyun OSS+Github提供整套底层基础服务。
目前施工完毕项目：
网站资料
顶部导航栏
代码
社交图标
主页文章节选(自动节选和文章页description)
顶部图
文章meta显示
文章版权
文章打赏
TOC
相关文章
文章锚点
文章分页按钮
头像
复制相关配置
Footer 设置
右下角按钮
侧边栏设置
目前已经使用Git实现版本控制。
ChangeLog 2022-8-28最近高强度的出差实在让人难顶，周日忙里偷闲慢慢的完善了以下以下内容。
目前施工完毕项目：
分享-目前使用Sharejs
背景特效-目前使用动态彩带
鼠标点击效果-目前使用烟花
网站副标题-目前使用-一言网的一句话
字数统计
ChangeLog 2022-8-29熬夜完善了以下内容。
Snackbar 弹 ...
HTML学习导航目录
2023
03-01
01HTML页面固定结构02HTML注释03HTML标签组成和关系04HTML标题和段落05HTML换行和水平线标签06HTML文本格式化标签07HTML图片08HTML路径09HTML音频标签10HTML视频标签11HTML超链接标签12HTML列表标签13HTML表格标签14HTML表单标签15HTML语义化标签16HTML字符实体17HTML综合案例-优秀学生信息表格18HTML综合案例-表单练习
HTML综合案例-表单练习
HTML综合案例-表单练习代码示例1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <h1>表单练习</h1& ...
HTML综合案例-优秀学生信息表格
HTML综合案例-优秀学生信息表格代码示例12345678910111213141516171819202122232425262728293031323334353637383940414243444546<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <table border="1"width=&q ...
HTML字符实体
字符实体HTML的空格合并现象场景：如果在html代码中同事并列出现多个空格、换行、缩进等，最终浏览器只会解析出一个空格
常见的字符实体场景：在网页中展示特殊符号效果时，需要用字符实体代替，比如以上要出现多个空格隔开的时候
结构：&英文;
常见的字符实体：一般就记一个空格就行,其他的搜表吧
1
HTML语义标签
HTML语义化标签没有语义的布局标签-div和span场景：实际开发网页时会大量频繁的使用到div和span这两个没有语义的布局标签
div标签：一行只显示一个（独占一行，自带换行）
span标签：一行可以显示多个（都在一行，不自带换行，但是span和span之间有一个空格）
有语义的布局标签（了解）场景：在HTML5新版本中，推出了一些有语义的布局标签供开发者使用
标签：
标签名
语义
header
网页头部
nav
网页导航
footer
网页底部
aside
网页侧边栏
section
网页区块
article
网页文章
注意点：
以上标签显示特点和div一致，但是比div多了不同的语义
HTML表单标签
HTML表单标签input系列标签的基本介绍场景：在网页中显示收集用户信息的表单效果，如：登录页、注册页
标签名：input
input标签可以通过type属性值的不同，展示不同效果
type属性值：
标签名
type属性值
说明
input
text
文本框，用于输入单行文本
input
password
密码框，用于输入密码
input
radio
单元框，用于多选一
input
checkbox
多选框，用于多选多
input
file
文件选择，用于之后上传文件
input
submit
提交按钮，用于提交
input
reset
重置按钮，用于重置
input
button
普通按钮，默认无功能，之后配合js添加功能
input系列标签-文本框场景：在网页中显示输入单行文本的表单控件
type属性值：text
常用属性：
属性名
说明
placeholder
占位符，提示用户输入内容文本
input系列标签-单选框场景：在网页中显示多选一的单选表单空间
type属性值：radio
常用属性：
属性名
说明
...
HTML表格标签
HTML表格标签表格的基本标签场景：在网页中以行列的单元格的方式整齐的展示数据，如学生成绩表
基本标签：
标签名
说明
table
表格整体，可以用于包裹多个tr
tr
表格每行，可用于包裹td
td
表格单元格，可用于包裹内容
注意点：
标签的嵌套关系：table>tr>td
表格相关属性场景：设置表格基本展示效果
常见相关属性：
属性名
属性值
效果
border
数字
边框宽度
width
数字
表格宽度
height
数字
表格高度
注意点：
实际开发时针对样式效果推荐用CSS设置
表格标题和表头单元格标签场景：在表格中表示整体大标题和一列小标题
其他标签：
标签名
名称
说明
caption
表格大标题
表示表格整体大标题，默认在表格整体顶部居中位置显示
th
表头单元格
表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示
注意点：
caption标签书写在table标签内部
th标签书写在tr标签内部（用于替换td标签）
代码示例123456789101112131415161718 ...
HTML列表标签
HTML列表标签列表的应用场景
场景：在网页中按照行展示关联性的内容，如：新闻列表、排行榜、账单等
特点：按照行的方式，整齐显示内容
种类：无序列表、有序列表、自定义列表
无序列表场景：在网页中表示一组无顺序之分的列表，如：新闻列表
标签组成：
标签名
说明
ul
表示无序列表的整体，用于包裹li标签
li
表示无序列表的每一项，用于包含每一行的内容
显示特点：
列表的每一项前默认显示圆点标识
注意点：
ul标签中只允许包含li标签
li标签可以包含任意内容
有序列表场景：在网页中表示一组有顺序之分的列表，如：排行榜
标签组成：
标签名
说明
ol
表示有序列表的整体，用于包裹li标签
li
表示有序列表的每一项，用于包含每一行的内容
显示特点：
列表的每一项前默认显示序号标识
注意点：
ol标签中只允许包含li标签
li标签可以包含任意内容
自定义列表场景：在网页底部导航中通常会使用自定义列表实现
标签组成：
标签名
说明
dl
表示自定义列表的整体，用于包裹dt或dd标签
dt
表示自定义列表的主题
dd
表示自定义列表 ...
HTML超链接标签
HTML超链接标签链接标签的介绍场景：点击之后，从一个页面跳转到另一个页面
称呼：a标签、超链接、锚链接
代码：
1<a href="./目标网页.html">超链接</a>
特点：
双标签，内部可以包裹内容
如果需要a标签点击后去指定页面，需要设置a标签的href属性
链接标签的target属性属性名：target
属性值：目标网页的打开形式
取值
效果
_self
默认值，在当前窗口中跳转（覆盖原网页）
_blank
在新窗口中跳转（保留原网页）
1<a href="https://www.weiyunfeng.cf/" target="_blank">疯疯の神奇小窝</a>
代码示例1234567891011121314<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <me ...