慕课网

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

初识HTML(5)+CSS(3)

最热最新

weixin_慕运维9562737
CSS样式的优势
为什么使用css样式来设置网页的外观样式呢？右边编辑器是一段文字，我们想把“超酷的互联网”、“服务及时贴心”、“有趣易学”这三个短语的文本颜色设置为红色，这时就可以通过设置样式来设置，而且只需要编写一条css样式语句。
第一步：把这三个短语用<span></span>括起来。（见右边代码编辑器15行）
第二步：写入下列代码：（见右边代码编辑器8-10行）
```
span{     color:red; }
```
观察结果窗口文字的颜色是否变为红色了。
查看全部

0 采集收起来源：为什么是css呢? - CSS样式的优势
2020-12-03
weixin_慕运维9562737
CSS样式
CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。
如下列代码：
```
p{    font-size:12px;    color:red;    font-weight:bold; }
```
使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等。
查看全部

0 采集收起来源：给html打扮一下 - 认识CSS样式
2020-12-03
weixin_慕运维9562737
提交按钮
在表单中有两种按钮可以使用，分别为：提交按钮、重置。这一小节讲解提交按钮：当用户需要提交表单信息到服务器时，需要用到提交按钮。
语法：
```
<input   type="submit"   value="提交">
```
type：只有当type值设置为submit时，按钮才有提交作用
value：按钮上显示的文字
举例：
在浏览器中显示的结果：
查看全部

0 采集收起来源：使用重置按钮，重置表单信息
2020-12-03
weixin_慕运维9562737
提交按钮
在表单中有两种按钮可以使用，分别为：提交按钮、重置。这一小节讲解提交按钮：当用户需要提交表单信息到服务器时，需要用到提交按钮。
语法：
```
<input   type="submit"   value="提交">
```
type：只有当type值设置为submit时，按钮才有提交作用
value：按钮上显示的文字
举例：
在浏览器中显示的结果：
查看全部

0 采集收起来源：填完就可以提交咯 - 提交按钮
2020-12-03
weixin_慕运维9562737

使用select、option标签创建下拉菜单
下拉列表在网页中也常会用到，它可以有效的节省网页空间。既可以单选、又可以多选。如下代码：
讲解：
1、select和option标签都是双标签，它总是成对出现的，需要首标签和尾标签。
2、select标签里面只能放option标签，表示下拉列表的选项。
3、option标签放选项内容，不放置其他标签。
4、value：
5、selected="selected"：
设置selected="selected"属性，则该选项就被默认选中。
在浏览器中显示的结果：

查看全部

0 采集收起来源：使用select、option标签创建下拉菜单
2020-12-03
weixin_慕运维9562737
填填性别和兴趣爱好 - 单选框、复选框，让用户选择
在使用表单设计调查表时，为了减少用户的操作，使用选择框是一个好主意，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" 时，该选项被默认选中
如下面代码：
注意：代码中的<label>标签在本章 5-9 中有讲解。
在浏览器中显示的结果：
注意:同一组的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“radioLove”，这样同一组的单选按钮才可以起到单选的作用。
查看全部

0 采集收起来源：填填性别和兴趣爱好 - 单选框、复选框，让用户选择
2020-12-03
weixin_慕运维9562737
使用label为input标签穿上衣服
小伙伴们，你们在前面学习表单各种控件的时候，有没有发现一个标签--label，这一小节就来揭晓它的作用。
label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。
语法：
```
<label for="控件id名称">
```
注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
例子：
```
<form   <label for="email">输入你的邮箱地址</label>   <input type="email" id="email" placeholder="Enter email"> </form>
```
查看全部

0 采集收起来源：使用label为input标签穿上衣服
2020-12-03
慕工程3165275



查看全部

0 采集收起来源：添加图书销售排行榜- 使用<ol><li>标签实现有序列表
2020-12-03
慕工程3165275





查看全部

0 采集收起来源：添加新闻信息列表 - 使用<ul><li>标签实现无序列表
2020-12-03
慕工程3165275





查看全部

0 采集收起来源：再来一个水平分割线 - 使用<hr>标签实现水平线标签
2020-12-03
慕工程3165275




查看全部

0 采集收起来源：再加点空格呢 - 使用特殊字符 实现空格标签
2020-12-03

慕工程3165275

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>br标签的使用</title>
</head>

<body>
<!--
    1.在 html 代码中输入回车、空格都是没有作用的。
      在html文本中想输入回车换行，就必须输入<br />。
    2.在需要加回车换行的地方加入<br />
    3.语法：
          xhtml1.0写法： <br/>
          html4.01写法：<br>
    4.现在一般使用 xhtml1.0 的版本的写法（其它标签也是），这种版本比较规范。
    5.<br />标签是一个空标签，没有HTML内容的标签就是空标签，空标签只需要写一
    个开始标签，这样的标签有<br />、<hr />和<img />。
-->
<h2>《咏桂》</h2>
<p>暗淡轻黄体性柔，<br/>情疏迹远只香留。<br/>何须浅碧深红色，<br/>自是花中第一流。</p>
</body>

</html>

查看全部

0 采集收起来源：写代码都不换行么? - 使用<br>标签实现换行效果

2020-12-03

慕工程3165275

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>aside</title>
</head>

<body>

<saide>我是侧边栏</aside>
</body>

</html>

查看全部

0 采集收起来源：再加个侧边菜单吧 - <aside>定义侧边栏区域
2020-12-03
慕工程3165275

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>section</title>
</head>

<body>
<header>我是头部标签</header>

<section>我是一个区域</section>
<footer>我是底部标签</footer>
</body>

</html>

查看全部

0 采集收起来源：正文才是重点喔 - <section>定义区段
2020-12-03
慕工程3165275

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>footer</title>
</head>

<body>
<header>我是头部标签</header>

<footer>我是底部标签</foorer>
</body>

</html>

查看全部

1 采集收起来源：结尾神转折 - <footer>标签定义底部区域
2020-12-03

首页上一页 384 385 386 387 388 389 390 下一页尾页

0/150

提交

取消

开始学习

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

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

初识HTML(5)+CSS(3)

CSS样式的优势

CSS样式

提交按钮

提交按钮

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

填填性别和兴趣爱好 - 单选框、复选框，让用户选择

使用label为input标签穿上衣服