列表与表单

一.常用的标签

1.1 img标签

img标签是指引入一个外部的图片

<img src="" alt="">

• src指的是一个图片的路径,跟a标签中href属性的路径设置是一样的

• alt属性为当图片显示不出来的时候显示的文字

img可以设置宽高,为等比例缩放,设置了宽度则会自动等比例设置高度图片的格式

​ 1.JPEG(JPG)

​ JPEG图片支持的颜色比较多，图片可以压缩，但是不支持透明,一般使用JPEG来保存照片等颜色丰富的图片

​ 2.GIF

​ GIF支持的颜色少，只支持简单的透明，支持动态图, 图片颜色单一或者是动态图时可以使用gif

​ 3.PNG

​ PNG支持的颜色多，并且支持复杂的透明可以用来显示颜色复杂的透明的图片

图片的使用原则：效果不一致，使用效果好的.效果一致，使用小的

二. 列表

列表分为:无序列表,有序列表,定义列表

2.1 无序列表

<ul><li>

<ul> unordered list

在网页中的导航条经常会用到无序列表

注意:

1>.<ul>中本质上只能放li标签,不能放其他标签

2>.<li>一定要放在ul中,不然语义不正确.

3>.li可以再嵌套其他的元素,就算是ul也是可以的

4>.常用地方:网页的导航

2.2 有序列表

<ol><li>

ol ordered list

有序列表本质上跟无序列表没有什么区别,但是有序列表的语义是代表有顺序的列表

2.3. 定义列表

dl dt dd

dl definition list

dt definition title

dd definition description

定义列表中 dt dd 可以一对一,一对多,多对一,多对多.

三. 标签的语义化

语义化最简单的理解就是⽤正确的标签去做正确的事.html语义化就是让⻚⾯的内容结构化，便于对浏览器、搜索引擎解析；

我们要根据语义去选标签,而不是根据样式去选标签

四. 表单

表单由form标签括起来

form标签中有2个至少要添加的属性

• action:表示表单提交到服务器的地址

• method:表示表单提交的方式,发送数据采用的http方法.主要是2个值:get , post

<form action=""  method="">
        
</form>

常见的表单项:

1. input 输入框

<input type="">

type属性的值常见的有:

​ 1>.text输入纯文本

​ 2>.password 输入密码,输入的内容会被*替换

​ 3>.radio单选按钮,要想选择的时候互斥必须设置name属性为一样

​ 4>.checkbox多选框,多个可以同时选择.

​ 为单选按钮或者多选框添加一个checked="checked"则会默认被选中

​ 当属性名与属性值为一样时,属性值可以省略

​ 5>.submit提交

注意:

表单提交数据的时候如果要提交到服务器,则表单项需要添加name属性.

提交数据的时候是采用键值对提交

name属性的值是键 value属性的值是值

1. textarea 文本域

<textarea cols="" rows="">
​
</textarea>

textarea为文本域,可以自由缩放大小,也可以自己利用cols设置列,rows设置行.也可以利用css样式resize="none"设置不能自由缩放.

1. select 下拉菜单

<select name="">
    <option value=""></option>
</select>

name属性指定给select

value属性指定给option

select中 有2个属性 size和multiple

• size表示显示多少个选项(默认显示1个)

• multiple表示是否允许多选 multiple="multiple"

五. css基础

5.1 css

1.css为cascading style sheet单词的简写,为层叠样式表

2.html为结构

css为表现

js为行为

3.css的编写位置:

• 行内样式(内联样式)

  • 写在标签内,给需要添加css样式的标签添加一个style属性 只对该标签起作用

• 内部样式

  • 写在style标签内,style标签可以写在任意位置,但是一般都写在head标签中

• 外部样式

  • 写在一个单独的外部文件中,然后再通过link标签导入进来