html&css基础知识汇总

html的基本标签

---

1、<hn> 标题标签

n表示不同大小的字体，n取值1-6

2、 <hr/>水平线标签

创建一个水平分割线，用于定义内容主题的变化

• size属性： 水平线的高度，单位像素（px）
• noshade属性：没有阴影，取值：noshade，表示显示纯色

4、 <font>字体标签

<font size="2" color="red" face="微软雅黑">字体的内容</font>

• size：设置字体大小。取值1-7。浏览器默认3。
• color：设置字体的颜色。
• face：设置文字的字体

5、<b><i> 格式化标签

• <b>粗体
• <i> 斜体

6、 <p><br/> 段落标签

• <br/> 插入单个换行

7、<img> 标签图片

属性名称	含义	作用
scr	图片的路径地址	必写属性, 否则看不到图片
width	宽度
height	高度	如果只设置其中一项,那么图片会等比例缩放
title	提示文本	鼠标悬停在图片上方会出现的文字信息
alt	替换文本	图片加载失败的时候才会出现的文字信息
border	边框	只能定义边框的粗细

8、<ul><ol> 列表标签

• <li> 是列表标签内的每一列

无序列表<ul>

名称	含义
type=”circle”	空心圆
type=”disc”	默认值,实心黑色圆
type=”square”	实心黑色正方形
注意:卸载ul身上是所有li改变,写在li身上是单个改变

有序列表<ol>

名称	形式
type=”1”	默认值,1、2、3…
type=”a”	小写的英文字母,a、b、c…
type=”A”	大写的英文字母,A、B、C…
type=”i”	小写的罗马数字,i、ii、iii…
type=”I”	大写的罗马数字,I、II、III…

9、<a> 超链接标签

名称	作用	取值
href	规定链接的目标url	比写属性
target	规定在何处打开目标url。 尽在href属性存在时使用	_ blank 新窗口打开 _self 默认打开方式 framename框架的名称
name	规定锚点的名称	自定义

• 空连接

  <a href="javascript:;">空链接</a>
  <a href="javascript:void(0);">空链接</a>
  

• 锚点链接

  <a href="#锚点名">点击跳转</a>
  <a name="锚点名">目标区域</a>
  

10、<table><tr><td> 表格标签

• <table> 是父标签,相当于整个表格的容器。

名称	作用
border	表格边框的宽度
cellpadding	单元格边沿与其内容之间的空白
cellspaceing	单元格之间的空白
bgcolor	表格的背景颜色
height	表格的高度
width	表格的宽度

• <tr> 标签用于定义行
• <td> 标签用于定义表格的单元格(一个列)

td标签的属性:

名称	作用
colspan	单元格可横跨的列数(横向合并单元格)
rowspan	单元格可横跨的行数(纵向合并单元格)
align	单元格内容的水平对齐方式 取值:left 左、right 右、center 居中

• <th> 标签用于定义表头。单元格内的内容默认居中加粗

11、<frameset><frame> 框架标签

<frameset> frame框架set集合:框架集合

它是多个窗口页面整合在一起的一个集合(框架集:frameset)。每一个页面(框架:frame)都是单独文档(html),需要使用字标签<frame> 来确定页面的位置。通过cols和rows确定 行列数。多个<frameset> 可以嵌套使用。

• rows属性和cols属性取值:值1,值2,值3,….一个值代表一行(列),多值使用逗号分隔,值可以是10px、10%等,最后一个值可以使用*自动匹配。

<frame> 框架子标签

• src属性: 设置此框架要显示的页面名称或路径。此为必须设置的属性。
• name属性: 设置框架名称。
• noreszie属性: 设置框架大小是否能手动调节。
  有的导航框架中的超链接<a> 标签中的target属性需要设置为其他框架的名称,这样就可以实现点击超链接,让目标页面在指定的框架中显示。

---

表单相关标签

1、 < form>表单标签

表单标签的主要功能:把表单中的数据提交给远端的服务器。
From就像一个快递盒子,把需要发送给服务器的数据装到这个盒子里,点击提交按钮,然后浏览器就将数据发送给服务器
<from> 表单标签在浏览器上没有任何显示,但是所有需要提交到服务器的数据都需要存放在表单标签中。

• action属性:请求路径,确定表单提交到服务器的地址(路径)
• method属性:请求方式。常用的取值:GET、POST

2、<input> 输入域标签

<input> 标签用于获得用户输入信息,type属性值不同,搜集方式不同

• type属性

  • text: 文本框,单行的输入字段,默认宽度20个字符
  • password: 密码框,密码字段。
  • radio: 单选框,表示一组互斥选项按钮中的一个。
  • submit: 提交按钮。将表单数据发送到服务器。一般不写name属性,否则将”提交”两个字到服务器。
  • checkbox 复选框
  • file: 文件上传组件
  • hidden: 隐藏字段
  • reset: 重置按钮
  • image : 图形提交按钮
  • button: 普通按钮,常用于与javaScript结合使用

• name: 元素(数据)名称,如果需要表单数据提交到服务器,必须提供name属性值,服务器通过属性值获得提交的数据

• value属性: 设置input标签的默认值。注意:submit和reset为按钮显示数据
• size属性: input的宽度大小
• checked属性: 单选框或复选框被选中
• readonly: 是否只读 数据会被提交
• disabled: 是否可用 数据不会被提交

• maxlength: 允许输入的最大长度

• <select> 下拉列表。可用单选和多选。需要字标签<option> 制定列表项

  • name属性:发送给服务器的名称
  • multiple属性: 不写默认单选,取值为”mutiple” 表示多选
  • size属性:多选时,课件选项的数目
  • <option> 子标签:下拉列表中的一个选项(一个条目)
    
    • selected: 勾选当前列表项
    • value: 发送给服务器的选项值

  一般option需要给value这个属性,如果不给,默认把option的文本内容发送给服务器

• <textarea> 文本域标签
  
  • cols属性:文本域的列数
  • rows属性:文本域的行数