您的位置：首页 > Web前端 > CSS

我的前端之路——一些有关HTML和CSS最基础入门笔记

2018-07-01 18:03 681 查看

周末下雨，正好整理了下笔记，分享给大家~~~，新手小白可以闲暇时参考参考。

前端概述

软件开发流程

网页设计师根据需求设计网页 -> 前端工程师将设计做成静态网页 -> 后台工程师将静态网页修改为动态网页

W3C标准(网页结构分为三部分)

结构(HTML)：HTML用于描述页面的结构
表现(CSS)：CSS用于控制页面中元素的样式
行为(JavaScript)：JavaScript用于响应用户操作

HTML

HTML（Hypertext Markup Language）超文本标记语言
HTML使用标签的的形式来标识网页中的不同组成部分。
所谓超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另一个页面。
一个最基本的HTML页面：
[code]<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页标题<title>
</head>
<body>
<h1>网页正文</h1>
</body>
</html>

标签

HTML中的标记指的就是标签。

HTML使用标记标签来描述网页。

结构

<标签名>标签内容</标签名>
<标签名 />

元素

一个完整的标签，我们称为元素，例如
[code]<h1>一级标题</h1>
上边的h1我们就称为元素
[code]<p>我是一个<em>段落</em></p>
p也是一个元素，em是p的子元素，p是em的父元素。
- body也是一个元素。
- body是p和em的祖先元素。
- p和em是body的后代元素。
[code]<body>
<p><em>内容</em></p>
</body>

属性

可以为HTML标签设置属性。
• 通过属性为HTML元素提供附加信息。
• 属性需要设置在开始标签或自结束标签中。
• 属性总是以名称/值对的形式出现。
• 比如：name=“value”
• 有些属性可以是任意值，有些则必须是指定值。
[code]<h1 title="我是一个标题">标题</h1>
<img src="" alt="" />
常见属性
• id
– id属性作为标签的唯一标识，在同一个网页中不能出现相同的id属性值。
• class
– class属性用来为标签分组，拥有相同class属性的标签我们认为就是一组，可以出现相同的class属性，可以为一个元素指定多个class。
• title
– title属性用来指定标签的标题，指定title以后，鼠标移入到元素上方时，会出现提示文字。

注释
• HTML注释中的内容不会在网页中显示。
• 格式:

• 合理的使用注释可以帮助开发人员理解网页的代码。
• 注释不能嵌套！

HTML的发展

• 1999年12月：HTML4.01（W3C推荐）
• 2000年底：XHTML1.0（W3C推荐）
• 2014年10月：HTML5（W3C推荐）

文档声明（doctype）我们一般使用h5版本的
[code]<!DOCTYPE html>
告诉浏览器我们网页的版本（html5）

乱码-字符集
常见字符集UTF-8、GB2312、ASLII、ISO8859-1、GBK

<meta>

作用
– <meta> 标签可提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词。
– <meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

meta的用法
• 设置页面的字符集
– <meta charset="utf-8">
• 设置网页的描述
– <meta name="description" content="">
• 设置网页的关键字
– <meta name="keywords" content="">
• 请求的重定向
– <meta http-equiv="refresh" content="5;url=地址"/>

常用标签

<html> 用于告诉浏览器这个文档中包含的信息是用HTML编写的。
<head> 用来表示网页的元数据，head中包含了浏览器和搜索引擎使用的其他不可见信息。
<title> title标签中的文字，是页面优化的最重要因素。在搜索引擎的搜索时最先看到的、最醒目的内容。

用法
– 建议将title标签紧贴着head标签编写，这样搜索引擎可以快速检索到标题标签。
– 网站中的多个页面的title也不应该重复，这样不利于搜索隐藏检索。

<body>用来设置网页的主体，所有在页面中能看到的内容都应该编写到body标签中。
<h1>~<h6>
– h1~h6都是网页中的标题标签，用来表示网页中的一个标题，不同的是，从h1~h6重要性越来越低。
– 标题标签相当于正文的标题，通常认为重要性仅次于页面的title。
– 一般标题标签我们只会使用到h3，h3以后的标题标签对于搜索引擎就没有什么意义了。
– 一个页面中只会使用一个h1标签。
<p>表示网页中的一个段落。
– 一般浏览器会在段落的前和后各加上一个换行，也就是段落会在页面中自成一行。
<br />表示一个换行标签，使用br标签可以使br标签后的内容另起一行。
<hr />标签是水平线标签，使用hr标签可以在页面中打印一条水平线，水平线可以将页面分成上下两个部分。
<img />标签是图片标签，可以用来向页面中引入一张外部的图片。
属性： – src指向一个外部的图片的路径。
– alt图片的描述
<a>标签是超链接标签，通过a标签，可以快速跳转到其他页面。
属性： – href指向一个链接地址
– target设置打开目标页面的位置，可选值：_blank新窗口、_self当前窗口。

实体（转义字符）

• 小于号< – < • 大于号> – >
• 空格 –   • 和符号& – &
• 版权© – © • 引号” – "
• 注册商标® – ® • 商标™ – ™

CSS (Cascading Style Sheets)层叠样式表

基本语法
– 选择器 {样式名:样式值；样式名:样式值 ; }
[code] p {color:red ; font-size:12px;}
行内样式(不推荐使用)
[code]<p style="color: red;font-size: 30px"></p>
内部样式表
[code]<style>
p{color:red; font-size: 30px;}
</style>
外部样式表
[code]<link rel="stylesheet" type="text/css" href="style.css">

CSS选择器（selector）

1. 元素选择器 p{}
2 . 类选择器 .className{}
3. id选择器 #id{} id属性是不能重复的
4. 通配符选择器 *{}
5. 复合选择器 div.box{}会选中页面中具有box1这个class的div元素
6. 群组选择器 p,.hello,#box{}则会同时选中页面中p元素，class为hello的元素，id为box的元素
7. 后代选择器 p strong{}会选中页面中所有的p元素内的strong元素。
8. 子选择器 div > .class{}

标签之间的关系

• 祖先元素
– 直接或间接包含后代元素的元素。
• 后代元素
– 直接或间接被祖先元素包含的元素。
• 父元素
– 直接包含子元素的元素。
• 子元素
– 直接被父元素包含的元素。
• 兄弟元素
– 拥有相同父元素的元素。

伪类和伪元素

比如段落首行或鼠标滑过的连接。CSS为他们提供一些选择器：伪类和伪元素。

- 给链接定义样式
有四个伪类可以让你根据访问者与该链接的交互方式，将链接设置成4种不同的状态。

正常链接

– a:link

访问过的链接

– a:visited（只能定义字体颜色）

鼠标滑过的链接

– a:hover

正在点击的链接

– a:active

其它

获取焦点

20000 – :focus

指定元素前

– :before

指定元素后

– :after

选中的元素

– ::selection

属性选择器
[属性名]
[属性名="属性值"]
[属性名~="属性值"]
[属性名|="属性值"]
[属性名^="属性值"]
[属性名$="属性值"]
[属性名*="属性值"]

子元素选择器
语法：父元素 > 子元素{}
例如body > h1将选择body子标签中的所有h1标签。
• :first-child
– 选择第一个子标签
• :last-child
– 选择最后一个子标签
• :nth-child
– 选择指定位置的子元素
• :first-of-type
• :last-of-type
• :nth-of-type
– 选择指定类型的子元素

语法:
– 查找后边一个兄弟元素
• 兄弟元素 + 兄弟元素{}
– 查找后边所有的兄弟元素
• 兄弟元素 ~ 兄弟元素{}

否定伪类
语法:
:not(选择器){}
• 比如p:not(.hello)表示选择所有的p元素但是class为hello的除外。

权重
#权重的计算
不同的选择器有不同的权重值：
– 内联样式：权重是 1000
– id选择器：权重是 100
– 类、属性、伪类选择器：权重是 10
– 元素选择器：权重是 1
– 通配符：权重是 0
• 计算权重需要将一个样式的全部选择器相加

文本标签和样式
##<em>和<strong>
• em标签用于表示一段内容中的着重点。
• strong标签用于表示一个内容的重要性。
• 这两个标签可以单独使用，也可以一起使用。
[code] <p>
      <strong>警告：任何情况下不要接近僵尸。</strong>
他们只是 <em>看起来</em> 很友好，实际上他们是为了吃你的胳膊！
</p>
• 通常em显示为斜体，而strong显示为粗体。

##<i>和<b>
• i标签会使文字变成斜体。
• b标签会使文字变成粗体。
• 这两个标签和em和strong类似，但是这两个标签没有语义。
• 所以根据html5标准，当我们只想设置文本特殊显示，而不需要强调内容时就可以使用i和b标签。

##<small>
• small标签表示细则一类的旁注，通常包括免责声明、注意事项、法律限制、版权信息等。
• 浏览器在显示small标签时会显示一个比父元素小的字号。
[code]<p><small>&copy;2016 Della工作室. 保留所有权利.</small></p>
##<cite>
• 使用cite标签可以指明对某内容的引用或参考。例如，戏剧、文章或图书的标题，歌曲、电影、照片或雕塑的名称等。
[code]<p>
<cite>《七龙珠》</cite>讲的是召唤神龙的故事。
</p>
##<blockquote>和<q>
• blockquote和q表示标记引用的文本。
• blockquote用于长引用，q用于短引用。
• 在两个标签中还可以使用cite属性来表示引用的地址。
[code]孟子曾经说过：<blockquote>天将降大任于是人也...</blockquote>他说的真对啊！
<p>孔子曾经说过：<q>学而时习之不亦说乎</q></p>
##<sup>和<sub>
• sup和sub用于定义上标和下标。
• 上标主要用于表示类似于10 3 中的3。
• 下标则用于表示类似余H 2 O中的2。
##<ins>和<del>
• ins表示插入的内容，显示时通常会加上下划线。
• del表示删除的内容，显示时通常会加上删除线。
##<code>和<pre>
• 如果你的内容包含代码示例或文件名，就可以使用code元素。
• pre元素表示的是预格式化文本，可以使用pre包住code来表示一段代码。
[code]<pre>
<code>
function fun(){
alert("hello");
}
</code>
</pre>

有序列表
• 使用ol和li来创建一个有序列表。
[code]<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
无序列表
• 使用ul和li来创建一个无序列表。
[code]<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
定义列表
• 使用dl、dd、dt来创建一个定义列表。
[code]<dl>
<dt>定义项1</dt>
<dd>定义描述1</dd>
<dt>定义项2</dt>
<dd>定义描述2</dd>
<dt>定义项3</dt>
<dd>定义描述3</dd>
</dl>

文本格式化

px

– 如果我们将一个图片放大的话，我们会发现一个图片是有一个一个的小色块构成的，这一个小色块就是一个像素，也就是1px，对于不同的显示器来说一个像素的大小是不同的。

百分比

– 也可以使用一个百分数来表示一个大小，百分比是相对于父元素来说的，如果父元素使用的大小是16px，则100%就是16px，200%就是32px。

em

– em和百分比类似，也是相对于父元素说的，1em就相当于100%，2em相当于200%，1.5em相当于150%。

颜色
RGB(0,255,0) 和 RGBA(0,255,0,0.5)
文字大小
font-size
字体

p{font-family:Arial}

通过font-family可以同时指定多个字体。
[code]p{font-family:Arial , Helvetica , sans-serif}
这里面 sans-serif 并不是指的具体某一个字体。而是一类字体。
字体分类

serif（衬线字体）

sans-serif（非衬线字体）

monospace （等宽字体）

cursive （草书字体）

fantasy （虚幻字体）

以上这些分类都是一些大的分类，并没有涉及具体的类型，如果将字体指定为这些格式，浏览器会自己选择指定类型的字体。

斜体和粗体

font-style用来指定文本的斜体。

– 指定斜体：font-style:italic
– 指定非斜体：font-style:normal

font-weight用来指定文本的粗体。

– 指定粗体：font-weight:bold
– 指定非粗体：font-weight:normal

小型大写字母

•font-variant属性可以将字母类型设置为小型大写。在该样式中，字母看起来像是稍微缩小了尺寸的大写字母。

– font-variant:small-caps

字体属性的简写

• font可以一次性同时设置多个字体的样式。
• 语法：
– font:加粗斜体小型大写大小/行高字体
• 这里前边几个加粗、斜体和小型大写的顺序无所谓，也可以不写，但是大小和字体必须写且必须写到后两个。

行间距
• line-height用于设置行高，行高越大则行间距越大。
• 行间距 = line-height – font-size

大写化
• text-transform样式用于将元素中的字母全都变成大小。
– 大写：text-transform:uppercase
– 小写：text-tansform:lowercase
– 首字母大写：text-transform:capitalize
– 正常：text-transform:none

文本的修饰
• text-decoration属性，用来给文本添加各种修饰。通过它可以为文本的上方、下方或者中间添加线条。
• 可选值：
– underline
– overline
– line-through
– none

字母间距和单词间距
• letter-spacing用来设置字符之间的间距。
• word-spacing用来设置单词之间的间距。
• 这两个属性都可以直接指定一个长度或百分数作为值。正数代表的是增加距离，而负数代表减少距离。

对齐文本
• text-align用于设置文本的对齐方式。
• 可选值：
– left：左对齐
– right：右对齐
– justify：两边对齐
– center：居中对齐
首行缩进
• text-indent用来设置首行缩进。
• 该样式需要指定一个长度，并且只对第一行生效。

盒子模型
• 一个盒子我们会分成四个部分：
– 内容区(content)
– 内边距(padding)
– 边框(border)

– 外边距(margin)

内容区

• 内容区指的是盒子中放置内容的区域，也就是元素中的文本内容，子元素都是存在于内容区中的。

• 如果没有为元素设置内边距和边框，则内容区大小默认和盒子大小是一致的。

• 通过width和height两个属性可以设置内容区的大小。

• width和height属性只适用于块元素。

内边距

• 顾名思义，内边距指的就是元素内容区与边框以内的空间。

• 默认情况下width和height不包含padding的大小。

• 使用padding属性来设置元素的内边距。

• 例如：
[code]padding:10px 20px 30px 40px
• padding:10px 20px 30px;
– 分别指定上、左右、下四个方向的内边距
• padding:10px 20px;
– 分别指定上下、左右四个方向的内边距
• padding:10px;
– 同时指定上左右下四个方向的内边距
• 同时在css中还提供了padding-top、padding-right、padding-right、padding-bottom分别用来指定四个方向的内边距。
边框

• 可以在元素周围创建边框，边框是元素可见框的最外部。

• 可以使用border属性来设置盒子的边框：

– border:1px red solid;
– 上边的样式分别指定了边框的宽度、颜色和样式。

• 也可以使用border-top/left/right/bottom分别指定上右下左四个方向的边框。

• 和padding一样，默认width和height并包括边框的宽度。

边框的样式

• 边框可以设置多种样式：

– none（没有边框）
– dotted（点线）
– dashed（虚线）
– solid（实线）
– double（双线）
– groove（槽线）
– ridge（脊线）
– inset（凹边）
– outset（凸边）
外边距

* 外边距是元素边框与周围元素相距的空间。

* 使用margin属性可以设置外边距。

* 用法和padding类似，同样也提供了四个方向的margin-top/right/bottom/left。

* 当将左右外边距设置为auto时，浏览器会将左右外边距设置为相等，所以这行代码margin:0 auto可以使元素居中。

display

* 我们不能为行内元素设置width、height、margin-top和margin-bottom。

* 我们可以通过修改display来修改元素的性质。

* 可选值：

– block：设置元素为块元素
– inline：设置元素为行内元素
– inline-block：设置元素为行内块元素
– none：隐藏元素（元素将在页面中完全消失）
visibility
• visibility属性主要用于元素是否可见。
• 和display不同，使用visibility隐藏一个元素，隐藏后其在文档中所占的位置会依然保持，不会被其他元素覆盖。
* 可选值：
– visible：可见的
– hidden：隐藏的
overflow

* 当相关标签里面的内容超出了样式的宽度和高度是，就会发生一些奇怪的事情，浏览器会让内容溢出盒子。

* 可以通过overflow来控制内容溢出的情况。

* 可选值：

– visible：默认值
– scroll：添加滚动条
– auto：根据需要添加滚动条
– hidden：隐藏超出盒子的内容

文档流

* 文档流指的是文档中可现实的对象在排列时所占用的位置。

* 将窗体自上而下分成一行行，并在每行中按从左至右的顺序排放元素，即为文档流。

* 也就是说在文档流中元素默认会紧贴到上一个元素的右边，如果右边不足以放下元素，元素则会另起一行，在新的一行中继续从左至右摆放。

* 这样一来每一个块元素都会另起一行，那么我们如果想在文档流中进行布局就会变得比较麻烦。

浮动

* 所谓浮动指的是使元素脱离原来的文本流，在父元素中浮动起来。

* 浮动使用float属性。

* 可选值：

– none：不浮动
– left：向左浮动
– right：向右浮动

* 块级元素和行内元素都可以浮动，当一个行内元素浮动以后将会自动变为一个块级元素。

* 当一个块级元素浮动以后，宽度会默认被内容撑开，所以当漂浮一个块级元素时我们都会为其指定一个宽度。

* 当一个元素浮动以后，其下方的元素会上移。元素中的内容将会围绕在元素的周围。

* 浮动会使元素完全脱离文本流，也就是不再在文档中在占用位置。

* 元素设置浮动以后，会一直向上漂浮直到遇到父元素的边界或者其他浮动元素。

* 元素浮动以后即完全脱离文档流，这时不会再影响父元素的高度。也就是浮动元素不会撑开父元素。

* 浮动元素默认会变为块元素，即使设置display:inline以后其依然是个块元素。

清除浮动

* clear属性可以用于清除元素周围的浮动对元素的影响。

* 也就是元素不会因为上方出现了浮动元素而改变位置。

* 可选值：

– left：忽略左侧浮动
– right：忽略右侧浮动
– both：忽略全部浮动
– none：不忽略浮动，默认值

定位

* position属性可以控制Web浏览器如何以及在何处显示特定的元素。

* 可以使用position属性把一个元素放置到网页中的任何位置。

* 可选值：

– static
– relative
– absolute
– fixed

相对定位

* 每个元素在页面的文档流中都有一个自然位置。相对于这个位置对元素进行移动就称为相对定位。周围的元素完全不受此响。

* 当将position属性设置为relative时，则开启了元素的相对定位。

* 当开启了相对定位以后，可以使用top、right、bottom、left四个属性对元素进行定位。

相对定位的特点

* 如果不设置元素的偏移量，元素位置不会发生改变。

* 相对定位不会使元素脱离文本流。元素在文本流中的位置不会改变。

* 相对定位不会改变元素原来的特性。

* 相对定位会使元素的层级提升，使元素可以覆盖文本流中的元素。

绝对定位

* 绝对定位指使元素相对于html元素或离他最近的祖先定位元素进行定位。

* 当将position属性设置为absolute时，则开启了元素的绝对定位。

* 当开启了绝对定位以后，可以使用top、right、bottom、left四个属性对元素进行定位。

绝对定位的特点

* 绝对定位会使元素完全脱离文本流。

* 绝对定位的块元素的宽度会被其内容撑开。

* 绝对定位会使行内元素变成块元素。

* 一般使用绝对定位时会同时为其父元素指定一个相对定位，以确保元素可以相对于父元素进行定位。

固定定位

* 固定定位的元素会被锁定在屏幕的某个位置上，当访问者滚动网页时，固定元素会在屏幕上保持不动。

* 当将position属性设置为fixed时，则开启了元素的固定定位。

* 当开启了固定定位以后，可以使用top、right、bottom、left四个属性对元素进行定位。

* 固定定位的其他特性和绝对定位类似

z-index

* 当元素开启定位以后就可以设置z-index这个属性。

* 这个属性可以提升定位元素所在的层级。

* z-index可以指定一个整数作为参数，值越大元素显示的优先级越高，也就是z-index值较大的元素会显示在网页的最上层。

清除浮动

[code]/*
* 可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，
* 这样做和添加一个div的原理一样，可以达到一个相同的效果，
* 而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用
*/
.clearfix:after{
/*添加一个内容*/
content: "";
/*转换为一个块元素*/
display: block;
/*清除两侧的浮动*/
clear: both;
}

/*
* 在IE6中不支持after伪类,
* 所以在IE6中还需要使用hasLayout来处理
*/
.clearfix{
zoom*:1;

}

设置元素背景

background-color

* 用该属性用来为元素设置背景颜色。

* 需要指定一个颜色值，当指定了一个颜色以后，整个元素的可见区域都会使用这个颜色作为背景色。

* 如果不设置背景颜色，元素默认背景颜色为透明，实际上会显示父元素的背景颜色。

background-image

* background-image可以为元素指定背景图片。

* 和background-color类似，这不过这里使用的是一个图片作为背景。

* 需要一个url地址作为参数，url地址需要指向一个外部图片的路径

* 例如：
[code]background-image: url(1.jpg)
backgr-repeat

* background-repeat用于控制背景图片的重复方式。

* 如果只设置背景图片默认背景图片将会使用平铺的方式，可以通过该属性进行修改。

* 可选值：

– repeat：默认值，图片左右上下平铺
– no-repeat：只显示图片一次，不会平铺
– repeat-x：沿x轴水平平铺一张图片
– repeat-y：沿y轴水平平铺一张图片
background-position

* background-position用来精确控制背景图片在元素中的位置。

* 可以通过三种方式来确定图片在水平方向和垂直方向的起点。

– 关键字：top right bottom left center
– 百分比
– 数值
background-attachment

* background-attachment用来设置背景图片是否随页面滚动。

* 可选值：

– scroll：随页面滚动
– fixed：不随页面滚动
CSS Sprite

* CSS Sprites是一种网页图片应用处理方式。

* 通过这种方式我们可以将网页中的零星图片集中放到一张大图上。

* 这样一来，一次请求便可以同时加载多张图片，大大提高了图片的加载效率。

表格的基本设置

table、tr、th、td

• 使用table标签创建一个表格。

• tr表示表格中的一行。

• tr中可以编写一个或多个th或td。

• th表示表头。

• td表示表格中的一个单元格

caption、thead、tbody、tfoot

• caption表示表格的标题。

• thead表示表格的头部。

• tbody表示表格的主体。

• tfoot表示表格的底部。

合并单元格

• 合并单元格指将两个或两个以上的单元格合并为一个单元格。

• 合并单元格可以通过在th或td中设置属性来完成。

• 横向合并

– colspan

• 纵向合并

– rowspan

表格的样式

之前学习的很多属性都可以用来设置表格的样式，比如color可以用来设置文本的颜色。padding可以设置内容和表格边框的离。

• text-align：设置文本的水平对齐。

• vertical-align：设置文本的垂直对齐。

– 可选值：top、baseline、middle、bottom

border-spacing：边框间距

border-collapse：合并边框

– collapse：合并边框
– separate：不合并边框

表单

现实生活中的表单是用来提交信息的，比如：办理银行卡填写的申请表、找工作填写的简历、入学时填写的个人信息表。这

些都是表单的一种

网页中的表单是用来向服务器提交信息的，

我们最常用到的表单就是baidu的搜索框

* 表单可以将用户填写的信息提交的服务器
例如：

* 表单项
文本框

[code]<input type="text" name="name">

密码框

[code]<input type="password" name="pwd">

多选框

[code]<input type="checkbox" name="sports">

单选框

[code]<input type="radio" name="gender">

提交按钮

[code]<input type="submit" value=" 提交 ">
下拉列表
<select>
<option>北京</option>
</select>

input

• input是我们使用的最多的表单项，它可以根据不同的type属性呈现不同的状态。

• type属性可选值：

– text：文本框
– password：密码框
– submit：提交按钮
– radio：单选按钮
– checkbox：多选框
– reset ：重置按钮
select、option

• select用于创建一个下拉列表。

• option表示下拉列表中的列表项。

• optgroup用于为列表项分组。

textarea

• textarea用来创建一个文本域，实际效果和文本框类似，只是可以输入多行数据。

• 可用属性：

– cols：文本域的列数
– rows：文本域的行数
fieldset、legend、label

• fieldset用来为表单项进行分组。

• legend用于指定每组的名字。

• label标签用来为表单项定义描述文字。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航