标签学习:
1.文件标签:构成html最基本的标签
* <html>: html的根标签
* <head>:头标签。用于指定html文档的一些属性。引入外部资源
* <title>:标题标签
* <body>:体标签
* <!DOCTYPE html> html5中定义该文档是html标签
2.文本标签:文本相关的标签
*注释 <!-- 注释内容 -->
*<h1>-<h6>: 标题标签,字体大小逐渐递减
*<p>: 段落标签
*<br>: 换行标签
*<hr/>: 展示一条水平线
属性:
*color:颜色
*width:宽度
*size:高度
*align:
*center:居中
*left:左对齐
*right:右对齐
*<b>: 字体加粗
*<i>: 斜体
*<center> 居中
*<font>:字体标签
属性:
*color:颜色
*size:大小
*face:字体
属性定义
*color:
1.英文单词
2.rbg(值1,值2,值3):值得范围:0~255 如(0,0,255)
3.#值1值2值3:指的范围:00~FF。如:#FF00FF (用的最多)
*width:
1.数值:width='20' ,数值的单位,默认是px(像素)
2.数值%:占比相对于父元素的比例
3.图片标签
<img/> :
属性:
*src:指定图片的位置
路径:
相对路径:以.开头的路径
./ :代表当前目录,如 ./image/1.jpg
../ :代表上一级目录
4.列表标签
*有序列表
*<ol>:
属性:
*type:序号类型
*start:开始位置
*<li>:
*无序列表
*<ul>:
属性:
* type:序号类型
*<li>:
5.链接标签
<a>:定义一个超链接
属性:
* href: 指定访问资源的URL(统一资源定位符)
* target :制定打开资源的方式
1. _self:默认值,在当前页面打开.
2. _blank :在空白页面打开
6.div 和 span
* <div>:每一个div占满一行。块级标签
* <span>:文本信息在一行展示,行内标签,内联标签
7.语义化标签:html5 为了提高程序的可读性
1.<header>
2.<footer>
8.表格标签:
* <table>:定义表格
* width:宽度
* border:边框
* cellpadding:定义内容和单元格的距离
* cellspacing:定义单元格之间的距离,如果指定为0,则单元格的线合为一条
* bgcolor:背景色
* align:对齐方式
* <tr>:定义行
* bgcolor:背景色
* align:文本对齐方式
* <td>:定义单元格
* colspan:合并列
* rowspan:合并行
* <th>:定义表头单元格,默认居中加粗;
* <caption> :表格标题
* <thead>:表示表格的头部门
* <tbody>:表示表格的体部门
* <tfoot>:表示表格的脚部门
9.表单标签
表单:
1.概念:用于采集用户输入数据的。用户和服务器进行交互。
2.form:用于定义表单的,可以定义一个范围,范围代表采集用户数据的范围。
*属性:
* action: 指定提交数据的URL
* method: 指定提交方式
*分类:一共7中,两种常用
get:
1.请求参数会在地址栏中显示,会封装到请求行中(HTTP协议之后讲解)
2.请求参数的长度是有限制的
3.不太安全
post:
1.请求参数不会在地址栏中显示,会封装在请求体中(HTTP协议之后讲解)
2.请求参数的长度是没有限制的
3.较为安全
*表单项中的数据要先被提交,必须指定其name属性
表单项标签
*<input> :可通过 type 属性值,改变元素展示的样式
* type属性
1.text:文本输入框,默认值
* placeholder属性:指定输入框的提示信息,当输入框的内容发生变化,会自动清空提示信息
2.password:密码输入框
3.radio :单选框
注意
1. 若想让多个单选框实现单选效果,则多个单选框的name属性值必须一样
2. 一般会给每个单选框提供value的属性,指定其被选中后提交的值。
3. checked属性,可以指定默认值
4.checkbox 复选框
1.一般会给每个复选框提供value的属性,指定其被选中后提交的值。
2. checked属性,可以指定默认值
5.file:文件选择框
*<lable>:指定输入项的文字信息
*注意
1.lable的for属性值一般会和input的id属性值对应。如果对应了,则点击lable区域内,会让input框获得焦点。
6.hidden:隐藏域,用于提交一些信息。
7.submit:提交按钮
8.按钮
* button:提交按钮
* button:普通按钮
* image:图片提交按钮
* src 属性指定图片的路径
9.data:时间正则校验
10.email :邮箱正则校验
11.number :数字正则校验
*<select>:下拉列表
*子元素:option,指定列表项
*<textarea> : 文本域
属性:
* cols:指定列数,每一行有多少个字符
* rows:默认多少行
案例
1. 确定使用table完成布局
2. 如果某一行只有一个单元格,则使用
<tr>
<td>
</td>
</tr>
3. 如果某一行为多个单元格,则使用
<tr>
<td>
<table></table>
</td>
</tr>
特殊字符表