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

初识HTML(5)+CSS(3)

五月的夏天 Web前端工程师
难度入门
时长 9小时18分
  • 文本域,支持多行文本输入 当用户需要在表单中输入大段文字时,需要用到文本输入域。 语法: <textarea rows="行数" cols="列数">文本</textarea> 1、<textarea>标签是成对出现的,以<textarea>开始,以</textarea>结束。 2、cols :多行输入域的列数。 3、rows :多行输入域的行数。 4、在<textarea></textarea>标签之间可以输入默认值。 举例: <form method="post" action="save.php"> <label>联系我们</label> <textarea cols="50" rows="10" >在这里输入内容...</textarea> </form>
    查看全部
  • <br />标签作用相当于word文档中的回车。
    查看全部
  • 文本输入框、密码输入框 当用户要在表单中键入字母、数字等内容时,就会用到文本输入框。文本框也可以转化为密码输入框。 语法: <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>
    查看全部
  • 想加入一行代码吗?使用code标签 在介绍语言技术的网站中,必免不了在网页中显示一些计算机专业的编程代码,当代码为一行代码时,你就可以使用<code>标签了,如下面例子: <code>var i=i+300;</code> 注意:在文章中一般如果要插入多行代码时不能使用<code>标签了。 语法: <code>代码语言</code> 注:如果是多行代码,可以使用<pre>标签。
    查看全部
    0 采集 收起

    2018-03-22

  • 一个元素实际宽度(盒子的宽度)=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界
    查看全部
  • address标签,为网页加入地址信息 一般网页中会有一些地址信息需要在网页中展示出来,这些地址信息如公司的地址就可以<address>标签。 语法: <address>地址信息</address> 如: <address>北京市西城区德外大街10号</address> 在浏览器上显示的样式为斜体,如果不喜欢斜体,当然可以,可以在后面的课程中使用css样式来修改它<address>标签的默认样式。
    查看全部
    0 采集 收起

    2018-03-22

  • 使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用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,里面有详细介绍。
    查看全部
  • 认识hr标签,添加水平横线 语法: html4.01版本 <hr> xhtml1.0版本 <hr /> 注意: 1. <hr />标签和<br />标签一样也是一个空标签,所以只有一个开始标签,没有结束标签。 2. <hr />标签的在浏览器中的默认样式线条比较粗,颜色为灰色,可能有些人觉得这种样式不美观,没有关系,这些外在样式在我们以后学习了css样式表之后,都可以对其修改。
    查看全部
  • 盒模型--边框(二) 现在有一个问题,如果有想为p标签单独设置下边框,而其它三边都不设置边框样式怎么办呢?css样式中允许只为一个方向的边框设置样式: div{border-bottom:1px solid red;} 同样可以使用下面代码实现其它三边上、右、左边框的设置: border-top:1px solid red; border-right:1px solid red; border-left:1px solid red;
    查看全部
  • 认识<img>标签,为网页插入图片 在网页的制作中为使网页炫丽美观,肯定是缺少不了图片,可以使用<img>标签来插入图片。 语法: <img src="图片地址" alt="下载失败时的替换文本" title = "提示文本"> 举例: <img src = "myimage.gif" alt = "My Image" title = "My Image" /> 讲解: 1、src:标识图像的位置; 2、alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本; 3、title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本); 4、图像可以是GIF,PNG,JPEG格式的图像文件。
    查看全部
    0 采集 收起

    2018-03-22

  • 在html代码中输入空格、回车都是没有作用的。要想输入空格,必须写入&nbsp;。 语法:&nbsp;
    查看全部
  • 那就可以用到<br />标签了,在需要加回车换行的地方加入<br />,<br />标签作用相当于word文档中的回车。 语法: xhtml1.0写法: <br /> html4.01写法: <br> 与以前我们学过的标签不一样,<br />标签是一个空标签,没有HTML内容的标签就是空标签,空标签只需要写一个开始标签,这样的标签有<br />、<hr />和<img />。 讲到这里,你是不是有个疑问,想折行还不好说嘛,就像在word文件档或记事本中,在想要折行的前面输入回车不就行了吗?很遗憾,在html中是忽略回车和空格的,你输入的再多回车和空格也是显示不出来的。如下边的代码。上面的代码在浏览中显示是没有回车效果的。总结:在html代码中输入回车、空格都是没有作用的。在html文本中想输入回车换行,就必须输入<br />。
    查看全部
  • 注意:如果mailto后面同时有多个参数的话,第一个参数必须以“?”开头,后面的参数每一个都以“&”分隔。
    查看全部
    0 采集 收起

    2018-03-22

  • blockquote标签,长文本引用 <blockquote>的作用也是引用别人的文本。但它是对长文本的引用,如在文章中引入大段某知名作家的文字,这时需要这个标签。 等等,上一节<q>标签不是也是对文本的引用吗?不要忘记<q>标签是对简短文本的引用,比如说引用一句话就用到<q>标签。 如想在我的文章中引用李白《关山月》中的诗句,因为引用文本比较长,所以使用<blockquote>。 语法: <blockquote>引用文本</blockquote> 浏览器对<blockquote>标签的解析是缩进样式
    查看全部
    0 采集 收起

    2018-03-22

  • q标签,短文本引用 想在你的html中加一段引用吗?比如在你的网页的文章里想引用某个作家的一句诗,这样会使你的文章更加出彩,那么<q>标签是你所需要的。 语法: <q>引用文本</q> 1. 在上面的例子中,“庄生晓梦迷蝴蝶。望帝春心托杜鹃。” 这是一句诗歌,出自晚唐诗人李商隐的《锦瑟》 。因为不是作者自己的文字,所以需要使用<q></q>实现引用。 2. 注意要引用的文本不用加双引号,浏览器会对q标签自动添加双引号。 注意这里用<q>标签的真正关键点不是它的默认样式双引号(如果这样我们不如自己在键盘上输入双引号就行了),而是它的语义:引用别人的话。
    查看全部
    0 采集 收起

    2018-03-22

举报

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

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