Reset原生标签重置

2024-06-19 00:04:39首发，1个月前更新

本框架对部分常用的原生标签样式做了重置，使之与本框架风格一致；虽然重置了原标签的样式，但是依然保留了原标签的功能，并充分考虑残障适应，并不会盲目的让原标签样式归零。

前言

原生的标签符合HTML5规范并且自带语意，所以我们并没有像其他前端框架那样将标签的所有属性归零，相反我们对没有使用class类的原始标签保留了原始状态，并在原始状态基础上进行美化处理。

UL+LI

ul+li用来表示无序的列表，本框架改造了其默认效果，但是如果用户对dl标签使用了_reset样式类，那么将取消缩进。

输出
HTML

- 历史和未来
  - 地球形成
    - 太阳系大约在45.6±0.08亿年前形成
    - 月球大约形成于45.3亿年前
    - 约35亿年前，地球磁场出现
    - 大约7.5亿年前，最早可考的超大陆罗迪尼亚大陆开始分裂
    - 在6至4.5亿年前合并成潘诺西亚大陆，然后合并成盘古大陆
    - 地球处于258万年前开始的更新世大冰期中
  - 生命进化
  - 未来演化
- 特征
- 三圈
- 适居性
- 人文地理
- 世界地球日
- 工程技术难题
- 科学研究
- 世界纪录
```
                
                
            
```

OL+LI

ol+li用来表示有序的列表，本框架改造了其默认效果，但是如果用户对dl标签使用了_reset样式类，那么将取消缩进。

输出
HTML

1. 1960~1970
  1. 1964年，发射并回收了一枚携带小白鼠的实验性生物火箭。
  2. 170年，中国第一颗人造卫星东方红一号在西北部甘肃省酒泉发射中心发射升空。
2. 1971~1980
  1. 1975年，中国发射了第一颗可回收卫星。
3. 1981~今
  1. 1999年，中国发射了第一艘无人飞船神舟一号。
  2. 2003年，航天员杨利伟乘坐神舟五号飞船在太空中度过了大约21个小时。
  3. 2005年，中国派出两名男子乘坐神舟六号飞船进行为期五天的飞行。
  4. 2007年，中国第一颗绕月飞行器嫦娥一号在起飞12天后进入月球轨道。
```
                
                
            
```

DL+DT+DD

dl表示一组列表，dt表示列表中一项的头部，dd表示列表中一项的内容；本框架改造了其默认效果，但是如果用户对dl标签使用了_reset样式类，那么将取消缩进。

输出
HTML

中国一词最早见于西周初年的青铜器“何尊”铭文中的“余其宅兹中国，自之辟民”，同时又以“华夏”、“中华”、“中夏”、“中原”、“诸夏”、“诸华”、“神州”、“九州”、“海内”等的代称出现。

北京

2184.3万人

上海

2475.9万人

北京

1766.2万人

“华夏”一词最早见于周朝《尚书·周书·武成》，“华夏蛮貊，罔不率俾”。《书经》曰：“冕服采装曰华，大国曰夏”。《尚书正义》注：“冕服华章曰华，大国曰夏”。“华”，是指华丽、兴旺；也有说上古华、夏同音，本一字。《左传》曰：“中国有礼仪之大，故称夏；有服章之美，谓之华。” 华是指汉服，夏指行周礼的大国，故中国有礼仪之邦、衣冠上国之美誉。
```
                
                
            
```

H1~H6

本框架重设了h1~h6号标题的字号和行高，具体数值如下：

h1：字号28px，行高3em，加粗，一个页面应该只出现一次
h2：字号22px，行高3em，加粗，可作为section子板块的标题出现，一个页面可多次出现
h3：字号18px，行高3em，加粗，可作为section子板块的标题出现，一个页面可多次出现
h4：字号16px，行高3em（随系统），加粗，可作为列表子项标题出现
h5：字号14px，行高2.8rem（随系统），加粗，可在正文中突出某些文字
h6：字号12px，行高2.8rem（随系统），加粗，最小字号

输出
HTML

H1-中国是以汉族为主体民族的多民族国家

H2-中国是以汉族为主体民族的多民族国家

H3-中国是以汉族为主体民族的多民族国家

H4-中国是以汉族为主体民族的多民族国家

H5-中国是以汉族为主体民族的多民族国家

H6-中国是以汉族为主体民族的多民族国家

P-中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。20世纪初辛亥革命后，君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。
```
                
                
            
```

HR

原始水平分割线比较古老而丑陋，本框架进行了美化处理：1px高度+前后margin。

输出
HTML

中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前。

以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。

20世纪初辛亥革命后，君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。
```
                
                
            
```

SUP

没有对sup上标标签做处理，但是对上标标签中的A标签做了处理：使用主色（prim）。

输出
HTML

中国是世界四大文明古国之一^[1]，有着悠久的历史，距今约5000年前^SUP。
```
                
                
            
```

CODE

code标签通常用来放置代码，本框架做了美化处理：使用主色+浅色背景。

输出
HTML

中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前。
```
                
                
            
```

PRE

pre标签通常用来放置代码和其他需要保持格式的文本，本框架做了美化处理：padding+浅色背景。

输出
HTML

中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前。


    #include <stdio.h>
    #include <stdlib.h>
    #include <time.h>
    int main() {
    int i;
    int rotationSpeed = 1000; 
    srand(time(NULL));
    for (i = 0; i < 10; i++) {
        printf("running...n");
        usleep(rotationSpeed * 1000);
    }
    return 0;
    }

```
                
                
            
```

BLOCKQUOTE

blockquote标签通常用来表示引言、简介等。

输出
HTML

一千年前的中国已经摆脱前代沉迷于异族的宗教，和以外国宗教为自己国教的状态。一千年前中国自己的宗教道教、儒教大放光芒，远远压过外国，这是国家文化强大民族自信的表现，一千年前的中国人自信得一塌糊涂。
```
                
                
            
```

CITE

cite标签通常用来表示书名或歌名等元素的标题。被cite标签包括的文本将呈现底部波浪线效果。

输出
HTML

“华夏”一词最早见于周朝《尚书·周书·武成》，“华夏蛮貊，罔不率俾”。《书经》曰：“冕服采装曰华，大国曰夏”。《尚书正义》注：“冕服华章曰华，大国曰夏”。“华”，是指华丽、兴旺；也有说上古华、夏同音，本一字。《左传》曰：“中国有礼仪之大，故称夏；有服章之美，谓之华。” 华是指汉服，夏指行周礼的大国，故中国有礼仪之邦、衣冠上国之美誉。
```
                
                
            
```

EM

em是emphasize的简写，意为“强调”。本框架改造了其默认效果，使用em标签包裹的文本在上方有小点。

输出
HTML

中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
```
                
                
            
```

MARK

mark标签用来表示文本高亮、突出。其背景色使用本框架的warn色系。

输出
HTML

中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
```
                
                
            
```

TIME

time标签用来表示日期或时间。本框架对其颜色和字号进行了改造。

输出
HTML

文章发布时间：2024年4月8日

Release Time : 2024/04/08
```
                
                
            
```

ADDRESS

address标签用来表示地址、地图位置。本框架将标签原有样式改成与正文相同的样式。

输出
HTML

所在位置：广东-深圳

Address : Shenzhen / Guangdong
```
                
                
            
```

RUBY

ruby+rt标签用来文字注解，例如拼音。本框架修正了rt标签间距。

输出
HTML

中Zhong 华Hua 文Wen 明Ming
```
                
                
            
```

I,S,U

i,s,u三个原生标签已经从HTML5标准移除，并且不被建议使用，而这三个标签比较简短，所以将他们作为本框架的小容器，用来存放一些细小的元素，例如图标字体。本框架已经移除这三个标签的原始样式，请用户切勿对其设置初始化样式。

输出
HTML

```
                
                
            
```

ARTICLE

原生的article标签在语义上表示文章正文，用来存放从富文本编辑器传来的文本。

输出
HTML

　　中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。

　　中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。20世纪初辛亥革命后，君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。

　　中国疆域辽阔、民族众多，先秦时期的华夏族在中原地区繁衍生息，到了汉代通过文化交融使汉族正式成型，奠定了中国主体民族的基础。后又通过与周边民族的交融，逐步形成统一多民族国家的局面，而人口也不断攀升，宋代中国人口突破一亿，清朝时期人口突破四亿，到2005年中国人口已突破十三亿。

　　中国文化渊远流长、博大精深、绚烂多彩，是东亚文化圈的文化宗主国，在世界文化体系内占有重要地位，由于各地的地理位置、自然条件的差异，人文、经济方面也各有特点。传统文化艺术形式有诗词、戏曲、书法、国画等，而春节、元宵、清明、端午、中秋、重阳等则是中国重要的传统节日。
```
                
                
            
```

FORM

form表单涉及诸多输入控件，主要包括：input（type=text/datetime/range/password/number/color/search等）、checkbox、radio、select（multiple）、textarea、button。

本框架除了美化输入控件，还保留了输入控件focus、active、disabled、readonly特性，并且支持使用tab键切换。

输出
HTML

标题：
名称：
性别：男　女
爱好：读书　运动　旅行　打球
生日：
头像：
相册：
行星：
搜索：
颜色：
尺寸：
科目：
总结：
电话：必填
邮箱：
网址：只读
数值：
密码：
```
                
                
            
```

FIELDSET

fieldset表示表单输入控件的集合，通常配合legend标签使用。

输出
HTML

属性电话：
数值：
密码：

总结

科目
```
                
                
            
```

METER

meter标签用于静态显示评分。已将之色系改造为本框架所用色系。

输出
HTML

用户评分：
用户评分：
用户评分：
```
                
                
            
```

PROGRESS

progress标签用于静态显示进度。已将之色系改造为本框架所用色系。

输出
HTML

进度：
```
                
                
            
```

A

a标签是超链接。已将之多个状态风格进行了改造，以主色突出显示。

输出
HTML

中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
```
                
                
            
```

IMG

图片原生支持懒加载，使用loading=lazy属性的图片在即将进入视窗时才会主动请求资源。

需要注意的是，图片如果已经存在浏览器缓存了，也不会使用懒加载的，这样也是合理的。

如果想要获得更好的懒加载效果可使用Lazy模块。

输出
HTML

```
                
                
            
```

IFRAME

iframe原生支持懒加载，使用loading=lazy属性的iframe在即将进入视窗时才会主动请求资源。

需要注意的是，即使页签懒加载过iframe，但是页面刷新之后会再次懒加载，这点更图片懒加载有所不同。

如果想要获得更好的懒加载效果可使用Lazy模块。

输出
HTML

```
                
                
            
```

VIDEO/AUDIO

对于视频和音频标签不可使用laoding=lazy属性，但是可使用preload=none来实现按需加载，只是使用了这个属性之后视频将默认没有封面了。

该属性本质不是懒加载，而仅仅是先用媒体控制器占位来告知用户此处是一个视频或音频媒体而已。

输出
HTML

```
                
                
            
```

TABLE

table标签通常用于集中展示数据或者循环显示数据。本框架已经充分美化该标签。

输出
HTML

序号	所在城市	校名	办学层次
64	北京市	北京警察学院	本科
66	北京市	中国科学院大学	本科
68	北京市	北京工业职业技术学院	专科
92	北京市	北京网络职业学院	专科
95	天津市	天津科技大学	本科
96	天津市	天津工业大学	本科

```
                
                
            
```