html&css基础知识汇总,新人必看!
转载自https://blog.csdn.net/qwe5810658/article/details/80149757
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属性:文本域的行数
发表评论 (审核通过后显示评论):