HTML+CSS学习笔记三

在HTML中,一共有三种列表

  1. 无序列表
    无序列表,是用来表示一个列表的语义。通常使用<ul></ul>标签来定义一个无序列表,<ul></ul>是一个组标签,并且可以在其中添加<li></li>标签。<li>标签不能够单独存在,必须包裹在<ul></ul>标签内。
    <li>是一个容器级标签,<li>里面可以放<ul>、<p>、<h1>等各种标签。
  2. 有序列表
    有序列表可以用<ol></ol>标签来定义。使用有序列表,浏览器会自动在列表的前面加上数字。
    例如:
    代码
    实例
  3. 定义列表
    定义列表中有三个标签,<dl>标签表示定义列表。<dt>标签表示定义标题,<dd>标签表示定义表述词。
    <dd>、<dt>只能存在于<dl>中。<dt>、<dd>都为容器级标签。
    它们的具体的用法为:
    代码
    实例

div和span

div和span相当于HTML中的两个“盒子”。
div在浏览器中不会增加任何效果,但是语义改变了,&lt;div>&lt;/div>中的所有元素是一个独立的区域。&lt;div>标签是一个容器级标签。
span标签中的所有元素也是相当于一个独立的区域。但是&lt;span>标签是一个文本级标签。通常来说div中放置大的元素,span中放置小的元素。
div标签是最重要的标签之一,它负责布局、结构、分块。它和负责样式的CSS搭配,可以称呼为“div+CSS”模式。

表单

HTML中的表单是用来收集用户信息的,可以让用户填写和选择。用<form action=""></form>来表示表单区域。表单中可以包含文本框、密码框等多种内容。
文本框
用<input type="text" value=""/>来表示文本框。其中type表示类型,value表示文本框中默认已有的值。
例如:
![代码](https://img-blog.csdn.net/20170105170347192?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamlueWluZ21v/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
![效果](https://img-blog.csdn.net/20170105170410770?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamlueWluZ21v/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
密码框
用<input type="password" />来表示密码框。
单选按钮
用<input type="radio" name="" />来表示单选按钮。为了实现单选按钮的“互斥”效果,需要为同一类的单选按钮设定相同的name值。如果需要默认选哪一项,在这一项的代码使用<input type="radio" name="" checked="checked" />。
例如:
![代码](https://img-blog.csdn.net/20170105170937350?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamlueWluZ21v/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
![效果](https://img-blog.csdn.net/20170105171000194?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamlueWluZ21v/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
复选框
用<input type="checkbox" name="" />来表示复选框。
例如:
![代码](https://img-blog.csdn.net/20170105171430290?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamlueWluZ21v/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
![效果](https://img-blog.csdn.net/20170105171446803?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamlueWluZ21v/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
下拉列表
用<select></select>来表示下拉列表,用<option></option>来表示其中的选项。
![代码](https://img-blog.csdn.net/20170105171951074?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamlueWluZ21v/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
![效果](https://img-blog.csdn.net/20170105172007342?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamlueWluZ21v/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
多行文本框
用1<textarea cols="30" rows="10"></textarea>来表示多行文本框。
例如:
![代码](https://img-blog.csdn.net/20170105172350263?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamlueWluZ21v/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
![效果](https://img-blog.csdn.net/20170105172403972?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamlueWluZ21v/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
三种按钮

普通按钮

用   <input type="button" value="" />来表示一个普通按钮。value中的值就是显示在按钮上的文字。

提交按钮

用   <input type="submit" />来表示一个提交按钮。点击这个按钮,这个表单就会被提交到,form标签的action属性中的那个页面中去。

重置按钮

用<input type="reset" />来表示一个重置按钮。
label标签
当label标签中的for属性的值和input标签中的id属性的值相同时,表示input和label有了绑定关系。具体可以用作比如在浏览器中给单选按钮的文字加一个label标签,点击单选按钮的文字就可以选定这个单选按钮了。在任何表单元素中都可以使用label标签。
具体的代码为:
![代码](https://img-blog.csdn.net/20170105173720128?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamlueWluZ21v/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

HTML注释

在HTML中注释的语法为&lt;!--注释的内容-->。适当的注释,能够让我们的程序更加可读。同时注释的内容不会显示在浏览器的页面上。

字符实体

当我们想要在浏览器的页面上显示&lt;p>时,为了放置浏览器将其误认为一个&lt;p>标签,必须使用字符实体来代替<或者>。
常见的字符实体有:
![字符实体](https://img-blog.csdn.net/20170105174651867?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamlueWluZ21v/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

某些已经不常用的标签

&lt;br />标签表示换行,目前一般用<p></p>标签来代替。
而<b></b>标签表示加粗。<u></u>表示下划线这些现在一般用CSS代替。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值