慕课网

精品课程初识HTML(5)+CSS(3)

初识HTML(5)+CSS(3)

最热最新

啷个哩个啷啷

span{
}必须要在<head></head>里？

查看全部

0 采集收起来源：diy一个标签吧 - 使用<span>标签自定义文字样式
2021-02-18
weixin_慕容6481741

Ctrl + P，打开搜索框。具体操作为：1、输入当前项目中的文件名，快速搜索文件，2、输入@和关键字，查找文件中函数名，3、输入：和数字，跳转到文件中该行代码，4、输入#和关键字，查找变量名。
Ctrl + 回车，在当前行的下一行添加一行空行。
Ctrl + Shift + 回车，在当前行的上一行添加一行空行。
Ctrl + Z，撤销。
Ctrl + Y，取消撤销。
Ctrl + ]，或者Tab键，向右缩进。
Ctrl + [，或者Shift +Tab，向左缩进。
Ctrl + Shift + V，粘贴过程中保持缩进。
Alt + F3，选中选择的词。

查看全部

0 采集收起来源：听说你要制定学习计划了-使用table家庭为网页添加表格
2021-02-18
weixin_慕容6481741

元素
1.在编辑器中输入元素名称，即可自动补全生成 HTML 标签，即使不是标准的 HTML 标签。
2.输入：! 或者 html:5 或者 html:4s 或者 html:4t 将自动补全html基本结构

嵌套操作

1.使用“>”生成子元素

// 输入
div>ul>li

// 按下TAB键
<div>
<ul>
<li></li>
</ul>
</div>
2.使用“+”生成兄弟元素

// 输入
div+p+bq

// 按下TAB键
<div></div>
<p></p>
<blockquote></blockquote>
3.使用“^”生成父元素

// 输入
div+div>p>span+em^bq

// 按下TAB键
<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>
4.使用“*”生成多个相同元素

// 输入
div>ul>li*5

// 按下TAB键
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
5.使用“()”将元素分组

// 输入
// "+" 后面的元素与括号中的第一个元素属于兄弟关系
div>(header>ul>li*2)+footer>p

//按下TAB键
<div>
<header>
<ul>
<li></li>
<li></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
属性操作
1.id与class：元素与 id 属性值之间用 “#” 分隔，与 class 属性值之间用 “.” 分隔

// 输入
div#header+div.page+div#footer.class1.class2.class3

// 按下TAB键
<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>
2.使用“[]”标记其他属性

// 输入
td[title='hello' colspan=3]

// 按下TAB键
<td title="hello" colspan="3"></td>
3.用“$”符号实现1到n的自动编号（“*”实现多个元素）

// 输入
li.item$*3

// 按下TAB键
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
可在 “$” 后添加 “@n” 修改编号的起始值为n。

// 输入
li.item$@3*3

// 按下TAB键
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
可在 “$” 后添加 “@-” 修改编号的方向。

// 输入
li.item$@-3*3

// 按下TAB键
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
4.用“{}”添加文本内容

// 输入
a[href=me.htm]{click me}

// 按下TAB键
<a href="me.htm">click me</a>

查看全部

0 采集收起来源：diy一个标签吧 - 使用<span>标签自定义文字样式
2021-02-18
weixin_慕容6481741

html 快捷键及简单代码
一.快捷键
1、隐藏：ctrl+shift+？
2、保存：ctrl+s
3、复制：ctrl+c
4、粘贴：ctrl+v
5、撤销：ctrl+z
二.简单符号
1、标签,成对存在：< >
2、结束标签：</ >
3、大标题：<title> </title>
4、小标题（分为 h1-h6，标题大小不同）：<h1> </h1>
5、段落：<p> </p>
6、换行：<br>
7、下标：<sub> </sub>
8、上标：<sup> </sup>
9、加粗文本：<b> </b><br><br>
10、斜体文本：<i> </i><br><br>
11、电脑自动输出：<code> </code><br><br>
三.代码
1、覆盖跳转到百度：<a href="http://www.baidu.com">跳转到百度</a>
2、打开新界面、跳转到百度：<a href="http://www.baidu.com target="_blank">跳转到百度</a>
3、文字居中显示：<h1 >文字居中显示</h1>
4、插入图片并设置宽、高：<img src="img/logo.png" width="258" height="39" />
5、文字替代（加载不出图片的时候）：<img border="0" src="img/pulpit.jpg" alt="Pulpit rock" width="304" height="228">
6、带表头的边距为1的表格：
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
7、无序列表
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
8、通过十六进制设置背景颜色
<p >
通过十六进制设置背景颜色
</p>
9、通过 rbg 值设置背景颜色
<p >
通过 rbg 值设置背景颜色
</p>
10、通过颜色名设置背景颜色
<p >
通过颜色名设置背景颜色
</p>

查看全部

10 采集收起来源：diy一个标签吧 - 使用<span>标签自定义文字样式
2021-02-18
weixin_慕容6481741
创建表格的四个元素：table、tr、th、td
1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。
2、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。
3、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。
4、<th>…</th>：表格的头部的一个单元格，表格表头。
5、表格中列的个数，取决于一行中数据单元格的个数。
6、border属性可以为表格添加边框，属性值为数字。
注意：
1、table标签用来定义整个表格，为双标签，必须有结束标签。
2、table标签里面可以放caption标签和tr标签。
3、caption标签用来定义表格的标题。
4、tr标签用来设置表格的行，tr里面只能放th或者td标签，一组tr标签代表一行。
5、th用来设置表格的标题，会加粗居中显示。也就是th标签中的文本默认为粗体并且居中显示。
6、td同来设置表格的列，一组td标签代表一列。
7、table表格在没有添加border属性之前, 在浏览器中显示是没有表格线的。
查看全部

0 采集收起来源：听说你要制定学习计划了-使用table家庭为网页添加表格
2021-02-18
Agoni悅

Hello World

查看全部

0 采集收起来源：代码初体验，制作我的第一个网页
2021-02-18
blossom4869

分组选择器
.first , #second span{ color : green ; }

查看全部

0 采集收起来源：给选择器分个组 - 分组选择器
2021-02-18
blossom4869

伪选择器当鼠标划过目标内容，目标内容就变为设置的样式语法例：
a ：hover{样式代码}
注意：：hover可以放在任意的标签上

查看全部

0 采集收起来源：伪装者 - 伪类选择器
2021-02-18
blossom4869

通用选择器作用于html中所有标签元素语法例：
*{ color ：red ; }

查看全部

0 采集收起来源：我全都要 - 通用选择器
2021-02-18
blossom4869

后代选择器即包含选择器语法：
.first span{color : red ; }
使用空格进行选择作用于class名为first的所有后代元素

查看全部

0 采集收起来源：这么快就当爷爷了? - 后代选择器
2021-02-18
blossom4869

子选择器大于号“>” 例代码：
.food>li{border : 1px solid red ; }
此代码使class名为food下的第一代子元素li加入指定样式

查看全部

0 采集收起来源：捡了一个儿子 - 子选择器
2021-02-18
blossom4869

使用ID选择器给标签加上id属性，为标签设置id=“ID名称”； css样式代码如下例：
<style type="text/css">
    #stress {
        color: red;
    }
    #soup{
        color:green;
    }
    </style>
注意：ID选择器前面的符号是“#”

查看全部

0 采集收起来源：取个唯一标识 - ID选择器
2021-02-18
blossom4869

类选择器语法： .类选择器名称{css样式代码}
注意：1. 英文圆点“.”开头
2.取名非中文，自定义
3.使用方法：使用合适的标签把目标内容包裹起来；使用class=“类选择器名称”为标签设置类；设置类选择器css样式（如语法）

查看全部

0 采集收起来源：再选一个类 - 类选择器
2021-02-18
blossom4869

在外部样式文件base.css中写样式代码，再在页面文件index.html中用<link>标签链接，如下
<link href="base.css" rel="stylesheet" type="text/css" />

查看全部

0 采集收起来源：还是把html和css分开吧 - 外部式css样式
2021-02-18
blossom4869

在<head></head>内写如下类代码
<style type="text/css">
span{
color:blue;
}
</style>
在需要添加样式的文本处用<span></span>包裹

查看全部

0 采集收起来源：换个地方吧,行内太挤了 - 嵌入式css样式
2021-02-18

首页上一页 312 313 314 315 316 317 318 下一页尾页

0/150

提交

取消

开始学习

课程须知: 没有任何WEB经验的WEB应用程序开发者、对WEB前端技术感兴趣的用户均可学习本教程。

老师告诉你能学到什么？: 本教程代领大家轻松学习HTML(5)、CSS(3)样式基础知识，可以利用HTML(5)、CSS(3)样式技术制作出简单页面。

初识HTML(5)+CSS(3)

Hello World