为了账号安全,请及时绑定邮箱和手机立即绑定
慕课网数字资源数据库体验端
初识HTML(5)+CSS(3)_学习笔记_慕课网
为了账号安全,请及时绑定邮箱和手机立即绑定

初识HTML(5)+CSS(3)

五月的夏天 Web前端工程师
难度入门
时长 9小时18分
  •  数字输入框

    我们来学习input标签中的数字框number类型,先来看一下数字框长什么样子吧。

    技术点的解释:

    1、input的type属性设置为number,则表示该输入框的类型为数字。

    2、数字框只能输入数字,输入其他字符无效。

    3、数字框最右侧会有一个加减符号,可以调整输入数字的大小,不同浏览器表现不一致。


    查看全部
  • 开头空两格,使用text-indent为文本添加首行缩进


    查看全部
  • 给点提示呗 - placeholder属性的使用

    这一项章节我们来学习input标签中占位符placeholder,属性,有时候需要提示用户输入框需要输入框的内容,那么就会用到我们的占位符,比如下面的效果:

    想要实现这样的效果,我们只需要输入以下代码:

    技术点的解释:

    1、placeholder属性为输入框占位符,里面可以放提示的输入信息。

    2、placeholder属性的值可以任意填写,当输入框输入内容时,占位符内容消失,输入框无内容时,占位符内容显示。

    3、占位符内容不是输入框真正的内容。

    是不是很简单呢?


    查看全部
  • 1、text-decoration可以设置添加到文本的修饰。

    2、text-decoration默认值为none, 定义标准的文本。

    3、text-decoration的值为underline为定义文本下的一条线。

    4、text-decoration的值为overline为定义文本上的一条线。

    5、text-decoration的值为line-through为定义穿过文本下的一条线,一般用于商品折扣价。


    查看全部
  • action :浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。

    查看全部
  • 先来填用户名和密码 - 文本输入框、密码输入框

    当用户要在表单中键入字母、数字等内容时,就会用到文本输入框。文本框也可以转化为密码输入框。

    语法:

    <form>    <input type="text/password" name="名称" value="文本" /> </form>

    1、type:

       当type="text"时,输入框为文本输入框;

       当type="password"时, 输入框为密码输入框。

    2、name:为文本框命名,以备后台程序ASP 、PHP使用。

    3、value:为文本输入框设置默认值。(一般起到提示作用)

    举例

    <form>   姓名:   <input type="text" name="myName">   <br/>   密码:   <input type="password" name="pass"> </form>

    在浏览器中显示的结果:


    查看全部
  • 网站怎样与用户进行交互?答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。

    语法:

    <form   method="传送方式"   action="服务器文件">

    讲解:

    1.<form> :<form>标签是成对出现的,以<form>开始,以</form>结束。

    2.action :浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。

    3.method : 数据传送的方式(get/post)。

    <form    method="post"   action="save.php">
            <label for="username">用户名:</label>
            <input type="text" name="username" />
            <label for="pass">密码:</label>
            <input type="password" name="pass" />
    </form>

    注意:

    1、所有表单控件(文本框、文本域、按钮、单选框、复选框等)都必须放在 <form></form> 标签之间(否则用户输入的信息可提交不到服务器上哦!)。

    2、method : post/get 的区别这一部分内容属于后端程序员考虑的问题。感兴趣的小伙伴可以查看本小节的 wiki,里面有详细介绍。

     


    查看全部
  • 使用thead、tbody、tfoot定义表格

    在上一章节中,我们已经学习了用<table>标签家族来定义一个表格,我们使用到了<tr>标签来定义表格的行,<th>和<td>来定义表格的列,那么这一章,我们来学习<thead>标签定义表格头部,<tbody>标签来定义表格的内容,<tfoot>来定义表格的底部,来将我们的表格继续完善吧!

    创建表格的三个区域:

    thead、tbody、tfoot

    我们想实现一个成绩表,各科成绩和总分,效果如下图:

    我们表格第一行为表头数据,我们用<thead>标签包裹,中间的科目和分数为表格的主体内容,我们用<tbody>标签包裹,最后的总分我们用<tfoot>标签包裹。

    1、<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。

    2、<tbody>…</tbody>:如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构, tbody包含行的内容下载完优先显示,不必等待表格结束后在显示,同时如果表格很长,用tbody分段,可以一部分一部分地显示。(通俗理解table 可以按结构一块块的显示,不在等整个表格加载完后显示。)

    3、<tfoot> 元素用于对 HTML 表格中的表注(页脚)内容进行分组。

    4、thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时,您也许希望拥有一个标题行,一些带有数据的行,以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上。


    查看全部


  • 创建表格的四个元素: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属性之前, 在浏览器中显示是没有表格线的。

     


    查看全部
  • 样式的继承,只对文字样式继承

    查看全部
  • color


    查看全部
  • ID选择器只能在文档中使用一次

    查看全部
  • header:头部

    aside:侧边

    section:正文

    footer:底部

    查看全部
  • 外部式csshttp://img1.sycdn.imooc.com//5fc605ba000132c705500196.jpg

    查看全部
  • 下面这些标签可用在 head 部分:

    1、head标签为双标签,有尾标签,<head></head>

    2、head标签表示头部标签,通常用来嵌套metatitlestyle等标签。

    3、<title>标签:在<title>和</title>标签之间的文字内容是网页的标题信息,它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么,搜索引擎可以通过网页标题,迅速的判断出网页的主题。每个网页的内容都是不同的,每个网页都应该有一个独一无二的title。

    4、<meta charset="UTF-8">设置当前文件字符编码

    5、style标签:双标签中设置当前文件样式

    例如title标签:

    <head>
        <title>hello world</title>
    </head>

    <title>标签的内容“hello world”会在浏览器中的标题栏上显示出来,如下图所示:


    查看全部

举报

0/150
提交
取消
课程须知
没有任何WEB经验的WEB应用程序开发者、对WEB前端技术感兴趣的用户均可学习本教程。
老师告诉你能学到什么?
本教程代领大家轻松学习HTML(5)、CSS(3)样式基础知识,可以利用HTML(5)、CSS(3)样式技术制作出简单页面。
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!