慕课网

初识HTML(5)+CSS(3)-升级版

最热最新

草越

应用列表，表格

----------表格
<table>标记表格
<tr>表示一行
<th>表示表头单元格，一般为粗体内容
<td>表示一个单元格，必须在<tr>标签中
<caption>表示标记表格标题，一个<table>中只能有一个<caption>标签，自动位于首行
表格分组--
1.按行分组
<thead>表示表头
<tbody>表示表体
<tfoot>表示表尾
2.按列分组（当需要单独设置表格某一列或多列的样式时，可以将表格按列分组）p158
<col>必须包含在<table>中。多个<col>标签依次对应表格中的列，当需要同时为多个列设置样式时，可以设置<col>的span属性，属性值为对应列的个数.
例：
<col class="c1" span="1" />设置第一列的样式
<col class="c2" span="5" />设置后五列的样式
整体边框与单元格内外边距
使用<table>标签的border属性设置表格的整体边框，属性值为数值
cellpadding（单元格内边距）属性值为数值
cellspacing（单元格外边距）属性值为数值
（一般是在样式表中使用padding和border-spacing属性设置）
-----表格内外边框p160
---使用<table>标签的rules属性设置表格的内边框
none 不显示内边框
groups 仅显示按行或按列分组的边框
rows 显示行之间的边框
cols 显示列之间的边框
all 显示行与列之间的边框
---使用<table>标签的frame属性设置表格的外边框（总4条）
void 不显示外边框
above 显示上外边框
below 显示下外边框
box、border 显示所有外边框
lhs 显示左外边框
rhs 显示右外边框
hsides 显示上、下外边框
vsides 显示左、右外边框
-----单元格跨行、跨列显示p162
<th>、<td>都是表示单元格的标签，可以设置这两个标签的属性改变跨行或跨列的个数
rowspan属性设置跨行显示，属性值为数值
colspan属性设置跨列显示，属性值为数值
----------表格CSS3
-----设置表格标题<caption>样式
caption-side设置标题的显示位置：top bottom left right
-----制作细线表格（设置表格边框包括<tr><td><th>）
border-collapse：separate为默认效果collapse合并边框
-----制作隔行换色表格
odd表示奇数，even表示偶数
可用":nth-child()"结构选择器，例：
tr:nth-child(odd){background:red;}
tr:nth-child(even){background:blue}

------<ol>标签标记有序列表
属性有reversed表示列表的顺序为降序，属性值reversed
start，表示列表排序的起始值，属性值为数值
type,表示列表序号的类型，属性值1、A、a、I、i
<li>标记列表项属性一般在CSS当中设置
其属性有：
value(表示列表的序号，值为数值。当修改某个列表项的编号后，后续的列表回重新编号)
type的属性值为<ul>、<ol>的type属性值的并集
------<ul>标记无序列表------无序号，有项目符号
其有type属性，值有disc（实心圆也是默认值）
circle（空心圆）spuare（实心方块）
------<dl>标记自定义列表（可以包含多个<dt>或<dd>）
【自定义列表项没有项目符号】
<dt>标记列表的标题
<dd>标记列表的内容

知识库：3种列表可以各自嵌套也可以互相嵌套，但需要注意的是，嵌套的列表必须放在<li>标签或<dd>当中。此外，虽然嵌套列表在<dt>标签中可以正常显示，但不建议这样做，因为可能会影响整个列表的显示效果。

美化列表
--------设置项目符号
1.类型
list-style-type:
属性值
none不使用项目符号
disc实心圆（默认值）
circle空心圆
square实心方块
decimal阿拉伯数字
cjk-ideographic中文数字
lower-alpha小写英文字母
upper-alpha大写英文字母
lower-roman小写罗马数字
upper-roman大写罗马数字
hiragana日文平假名
katakana日文片假名
2.自定义项目符号
list-style-image:none|url;
3.项目符号位置
list-style-position:outside（默认值，表示项目符号在列表左侧）
inside表示项目符号在列表项之内---书本p114

------使用列表制作水平导航条----p115
使用display属性可以改变元素的显示方式。具体格式为：
dsiplay:
none表示不显示该元素
inline默认值，表示将该元素转换为行内元素
block表示将元素转换为块级元素
inline-block表示将该元素转换为行内块元素
inline-item表示将该元素转化为列表块元素

---知识库：
1.行内块元素默认不换行，从左至右按顺序显示。列表块元素是列表项的默认格式，如果将其他元素转换为列表块元素，即可不适用列表标签就制作出列表的显示效果。
2.当使用display属性将列表项转换为行内元素时，浏览器将自动去除列表项的项目符号。
3.margin的属性值为负数时将产生层叠效果。
4.margin属性值auto表示左右外边距会根据浏览器窗口的大小自动调节，常使用该属性值制作居中效果。

查看全部

0 采集收起来源：添加新闻信息列表 - 使用<ul><li>标签实现无序列表
2023-04-14
JenSuper

子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素
.food>li{border:1px solid red;}
这行代码会使class名为food下的子元素li（水果、蔬菜）加入红色实线边框。

查看全部

0 采集收起来源：捡了一个儿子 - 子选择器
2023-02-21
weixin_慕仔9243958

a标签的属性：
target="_self"在当前页面打开链接
target="_blank"在新窗口打开链接

查看全部

0 采集收起来源：开个新窗口 - 在新建浏览器窗口中打开链接
2023-02-19
weixin_慕盖茨0169513

没懂回来再说

查看全部

0 采集收起来源：小哥,做头么? - 认识head标签
2023-02-17
qq_刺猬_24

<ol><li>为有序列表标签，在网页中显示的默认样式一般为：每项<li>前都自带一个序号，序号默认从1开始。
语法如下：
<ol>
<li></li>
<li></li>
</ol>

查看全部

0 采集收起来源：添加图书销售排行榜- 使用<ol><li>标签实现有序列表
2023-02-17
qq_刺猬_24

无序列表标签<ul><li> 在网页中显示的默认样式一般为：每项li前都自带一个圆点
语法如下：<ul>
<li></li>
<li></li>
</ul>

查看全部

0 采集收起来源：添加新闻信息列表 - 使用<ul><li>标签实现无序列表
2023-02-17
qq_刺猬_24

<br /> 等于回车键
  等于空格键
<hr/> 等于横线，水平分割线

查看全部

0 采集收起来源：再来一个水平分割线 - 使用<hr>标签实现水平线标签
2023-02-17
慕娘7203707

1. <!DOCTYPE html>:文档类型声明，表示该文件为 HTML5文件。<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前
2. <html></html>标签对：<html>标签位于HTML文档的最前面，用来标识HTML文档的开始；</html>标签位于HTML文档的最后面，用来标识HTML 文档的结束；这两个标签对成对存在，中间的部分是文档的头部和主题。
3.<head></head>标签对：标签包含有关HTML文档的信息，可以包含一些辅助性标签。如<title></title>，<link /><meta />，<style></style>，<script></script>等，但是浏览器除了会在标题栏显示<title>元素的内容外，不会向用户显示head元素内的其他任何内容。
4.<body></body>标签对：它是HTML文档的主体部分，在此标签中可以包含<p><h1><br>等众多标签，<body>标签出现在</head>标签之后，且必须在闭标签</html>之前闭合。

查看全部

0 采集收起来源：听说有新版本了? - html5文档结构
2023-02-16
慕娘7203707

1、css是用来修饰html样式的
2、html本身是有一些默认样式,如果我们想改变html标签的样式,就需要借助css
3、html+css构成了我们网页的基本页面结构和样式

查看全部

0 采集收起来源：佛靠金装，人靠衣装 - html和css的关系
2023-02-16
开心( ◠‿◠ )

CSS样式的优势
我们想把短语的文本颜色设置为红色，这时就可以通过设置样式来设置，而且只需要编写一条css样式语句
第一步：把这三个短语用<span></span>括起来。
第二步：写入下列代码：
span{
color:red;
}

查看全部

0 采集收起来源：为什么是css呢? - CSS样式的优势
2023-02-16
开心( ◠‿◠ )

认识CSS样式
CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。
如下列代码：
p{
font-size:12px;
color:red;
font-weight:bold;
}
使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等。

查看全部

0 采集收起来源：给html打扮一下 - 认识CSS样式
2023-02-16
开心( ◠‿◠ )

使用重置按钮，重置表单信息
当用户需要重置表单信息到初始时的状态时，比如用户输入“用户名”后，发现书写有误，可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为"reset"就可以。
语法：
<input type="reset" value="重置">
type：只有当type值设置为reset时，按钮才有重置作用
value：按钮上显示的文字
举个离子：
在浏览器中显示的结果：
单击重置按钮后

查看全部

0 采集收起来源：使用重置按钮，重置表单信息
2023-02-16
开心( ◠‿◠ )

提交按钮
在表单中有两种按钮可以使用，分别为：提交按钮、重置
语法：
<input type="submit" value="提交">
type：只有当type值设置为submit时，按钮才有提交作用
value：按钮上显示的文字

在浏览器中显示的结果：

查看全部

0 采集收起来源：填完就可以提交咯 - 提交按钮
2023-02-16
开心( ◠‿◠ )

使用select、option标签创建下拉菜单

1、select和option标签都是双标签，它总是成对出现的，需要首标签和尾标签。
2、select标签里面只能放option标签，表示下拉列表的选项。
3、option标签放选项内容，不放置其他标签。
4、value：

5、selected="selected"：
设置selected="selected"属性，则该选项就被默认选中。

查看全部

0 采集收起来源：使用select、option标签创建下拉菜单
2023-02-16
开心( ◠‿◠ )
单选框、复选框，让用户选择
html中有两种选择框，即单选框和复选框
语法：
```
<input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>
```
1、type:
当 type="radio" 时，控件为单选框
当 type="checkbox" 时，控件为复选框
2、value：提交数据到服务器的值（后台程序PHP使用）
3、name：为控件命名，以备后台程序 ASP、PHP 使用
4、checked：当设置 checked="checked" 时，该选项被默认选中
注意:同一组的单选按钮，name 取值一定要一致
查看全部

0 采集收起来源：填填性别和兴趣爱好 - 单选框、复选框，让用户选择
2023-02-16