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

初识HTML(5)+CSS(3)

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

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

    讲解:

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

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

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

    查看全部
  • W_1

    thead、tbody、tfoot关键词

    查看全部
  • type:只有当type值设置为reset时,按钮才有重置作用

    value:按钮上显示的文字


    查看全部
  • 权值计算-特殊性

    有的时候我们为同一个元素设置了不同的CSS样式代码,那么元素会启用哪一个CSS样式呢?下面我们一起来看一下代码:

    p{color:red;}
    .first{color:green;}
    <p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>

    p和.first都匹配到了p这个标签上,那么会显示哪种颜色呢?green是正确的颜色,那么为什么呢?是因为浏览器是根据权值来判断使用哪种css样式的,权值高的就使用哪种css样式。

    下面是权值的规则:

    标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100。例如下面的代码:

    p{color:red;} p span{color:green;} .warning{color:white;} p span.warning{color:purple;} #footer .note p{color:yellow;}

    注意:还有一个权值比较特殊--继承也有权值但很低,有的文献提出它只有0.1,所以可以理解为继承的权值最低。

    查看全部
  • 填完就可以提交咯 - 提交按钮

    type:只有当type值设置为submit时,按钮才有提交作用

    value:按钮上显示的文字

    查看全部
  • 1、select和option标签都是双标签,它总是成对出现的,需要首标签和尾标签。

    2、select标签里面只能放option标签,表示下拉列表的选项。

    3、option标签放选项内容,不放置其他标签。

    4、value:

    5、selected="selected":

    设置selected="selected"属性,则该选项就被默认选中。

    在浏览器中显示的结果:


    查看全部
  • 1、type:

       当 type="radio" 时,控件为单选框

       当 type="checkbox" 时,控件为复选框

    2、value:提交数据到服务器的值(后台程序PHP使用)

    3、name:为控件命名,以备后台程序 ASP、PHP 使用

    4、checked:当设置 checked="checked" 时,该选项被默认选中

    查看全部
  • 如果你在 label 标签内点击文本,就会触发此控件。

    当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。

    注意:标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
    <form
      <label for="email">输入你的邮箱地址</label>
      <input type="email" id="email" placeholder="Enter email">
    </form>


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

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

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

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

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

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

    1、type:

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

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

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

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

    查看全部
  • 使用表单标签,与用户交互 - 使用<form>创建表单

    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>
    查看全部
  • thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时,您也许希望拥有一个标题行,一些带有数据的行,以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。


    当长的表格被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上。

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

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

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

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

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

    查看全部
  • 1、table标签用来定义整个表格,为双标签,必须有结束标签。

    2、table标签里面可以放caption标签和tr标签。

    3、caption标签用来定义表格的标题。

    4、tr标签用来设置表格的行,tr里面只能放th或者td标签,一组tr标签代表一行。

    5、th用来设置表格的标题,会加粗居中显示。也就是th标签中的文本默认为粗体并且居中显示。

    6、td同来设置表格的列,一组td标签代表一列。

    7、table表格在没有添加border属性之前, 在浏览器中显示是没有表格线的。

    查看全部

  • 创建表格的四个元素:table(表)、tr(行)、th(列)、td()

    1、<table>…</table>:整个表格以<table>标记开始、</table>标记结束。

    2、<tr>…</tr>:表格的一行,所以有几对tr 表格就有几行。

    3、<td>…</td>:表格的一个单元格,一行中包含几对<td>...</td>,说明一行中就有几列。

    4、<th>…</th>:表格的头部的一个单元格,表格表头。

    5、表格中列的个数,取决于一行中数据单元格的个数。

    6、border属性可以为表格添加边框,属性值为数字。

    查看全部

举报

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

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