html-1
<pre>
1.什么是网页
网页是基于web规范、通过浏览器阅读的文本文件
2.网站制作流程
客户需求-策划方案-网站开发-测试-上线-售后
3.网页结构
头部、主体（左中右三栏/左中中右四栏布局）、底部
URL统一资源定位符
http://www.guazi.com http是传输协议 www是World Wide web
4.总览
网站由网页组成
网页结构是HTML 样式是CSS
HTML包含：超链接、表单、文本、视频音频、表格、列表、图片、导航菜单
CSS包含：文字属性（大小、颜色、字体）
背景属性（背景色、背景图、背景位置）
盒模型属性（高度、宽度、外边距、边框、内边距）
CSS3新增属性（盒子尺寸、过渡动画、圆角边框、文本阴影、盒子阴影）
5.HTML：HyperText(超文本) Markup（标记） Language(语言)
1)超文本：就是用超链接的方法，将不同信息组织在一起的网状文本
2)标记:用来区分网页的不同部分，比如文字、图片等
HTML是描述网页的超文本标记语言
3)历史：
互联网之父--蒂姆 伯纳斯 李
1991年编写的一份'html标签'文档
1993年 草案发布第一版
1995年 html2.0
2014年 html5
6.编辑器
VS Code/Notepad++/Dreamweaver
7.html基本结构
<!DOCTYPE html> //声明文档类型（使用规范）
<html> //网页开始
<head> //头部
<meta charset="utf-8"/> //定义字符编码
<title>标题</title> //网页的标题
</head>
<body> //主体（书写页面显示的内容 只有body里的内容才会显示在网页中）
</body>
</html>
html基本结构记忆：
先声明文档类型：<!DOCTYPE html>
html 标签包裹所有
head body 标签同级
head 里包含title 和 <meta charset="utf-8"/>
body 里的内容是显示在网页上的内容
8.HTML标签（分为单标签、双标签）
标签特点：
1.由尖括号包围，用 / 闭合
2.双标签：成对出现
3.单标签：单个出现 <标签名 />
4.双标签内可以放内容 <标签名></标签名>
5.不区分大小写
9.建立web站点
css (放css样式文件)
html (放html文档)
images(放图像)
js (放js文件 有特效)
站点建立
站点本质是一个文件夹
一个站点由若干文件组成
文件根据格式分类存放，便于统筹管理
首页命名
1.网站首页命名一般是index/default
2.index (索引) default(默认)
3.是一种网页制作人员的默认规范
其他文件或文件夹的命名规则
1.只能是字母，数字，下划线 a-q.png就是错的 tab.css是对的
2.不能是中文 图1.jpg就是错的
3.不能以数字开头 123ad.html就是错的
4.见名知义
10.PhotoShop切图工具（是Adobe公司开发的图像处理软件）
1）ps三大功能（选区工具、切片工具、吸管工具）
》》选区工具使用：
1.选取目的图片大小和范围
2.CTRL+C 复制图片
3.CTRL+N 新建画布
4.CTRL+V 粘贴图片
5.CTRL+ALT+SHIFT+ S 保存web所用格式图片
总结要点：1.如何建立站点 2.选区工具的使用 3.命名规范
》》切片工具 1.找到工具 2.切 3.CRTL+ALT+SHIFT +S 保存web所用格式图片 （本机快捷方式可能不同）
11.网页图片格式特点
jpg ：颜色丰富 文件小 有损压缩
png : 支持透明 文件大 【无损】压缩
GIF ：支持动画透明 最多存256种颜色
吸管工具（像化学实验的滴管） 找RGB 对应的数值
颜色的三种表示方式：
1.16进制 #FF00CC FF（红色区域） 00（绿色区域） CC（蓝色区域） 红（#FF0000) 绿（#00FF00) 蓝（#0000FF）
00（颜色最淡） FF（颜色最深）
2.RGB rgb(red,green,blue) 每一项0-255变化 黑（全0） 白（全255）
黑rgb(0,0,0) 白rgb(255,255,255) 绿rgb(0,255,0) 红rgb(255,0,0) 蓝rgb(0,0,255)
3.颜色单词
cyan青色 purple紫色
12.常用快捷键
CTRL+O 打开
CTRL+W 关闭
CTRL+加号 放大 CTRL+减号 缩小
CTRL+R 【【标尺】】
CTRL+T 【自由变化工具】
空格键 【抓手工具】
F8 【显示/隐藏信息面板】
CTRL+D 【取消选区】
总结：网站（站点）由网页组成
网页相关的概念有HTML（结构） CSS(样式) JS（行为） Photoshop（辅助切图工具）
HTML（超文本标记语言）
版本：HTML2.0 HTML3.2 HTML4.0.1 XHTML HTML5
由标签构成
标签类型：单、双
单：<!DOCTYPE html> meta
双：<html></html> <head></head> <body></body> <title></title>
二、常见HTML标签以及属性
html由标签构成
标签包含（ 标题 段落 图片 水平线 ） 附加信息（HTML属性）
1.标题 Heading
1)六级（h1-h6)
2)<hn>标题文本</hn> n可以是1、2、3、4、5、6
3)标题文字自动加粗，依次减小 h1最大 h6最小
4)标题居中 <h1 对齐方式='居中'>内容</h1> 属性：对齐方式 属性值：居中
标题标签属性：
align 设置文本水平对齐方式的属性 <hn align = '属性值'>标题文本</hn>
align的值：
left(左对齐 默认值)
center(居中对齐)
right(右对齐)
2.普通文本标签 <b></b> <i></i> <u></u>
b <b>文本</b> 加粗
i <i>文本</i> 倾斜
u <u>文本</u> 下划线
这三个标签可以嵌套，但是要对称
3.font标签 （修改网页中文字的颜色和大小）
<font></font>规定文本的字体尺寸、字体颜色
语法格式：<font>文字</font> <font size="大小" color="颜色">文字</font>
颜色值：英文单词/十六进制/RGB
size:表示大小 数值从1-7
常见错误：
1.属性设置写错
2.属性值的位置错误
4.hr标签 （如何在网页中实现水平线？）
hr 是Horizontal Rule的缩写
<hr />标签被用来分隔HTML 页面中的内容，并显示为一条水平线
语法格式：<hr />
<hr />标签属性：
align (值：center/left/right) 水平对齐方式
color (值：英文单词/#xxxxxx/rgb(x,x,x)) 水平线颜色
size(值：数值) 水平线粗细
width(值：数值/百分比) 水平线宽度
常见错误：
1.align属性设置错误
2.<hr >单标签
5.p标签 （在网页中实现段落） paragraph 双标签 <p></p>
水平对齐属性：align(left/center/right) <p align='value'>段落文本</p>
注意：
1.段落会自动换行 2.段落与段落之间有空隙
6.br标签 （实现段内换行） break 单标签 <br />
段落和换行的区别
<p></p>使段落之间有空隙 <br />标签则没有
<p></p>用来分段 <br />用来换行
7.<strong></strong> <em></em>
目的：都是强调，利于搜索引擎检索
加粗 <b></b>(加粗文本)和<strong></strong>(加强语气，效果为加粗文本)
倾斜 <i></i>(倾斜文本)和<em></em>(加强语气，效果为倾斜文本)
8.<img src="" >标签 image (把图片插入网页) 单标签 <img />
<img src="图片的载入路径" title="鼠标移到图片上显示提示文字" alt="非正常显示时的提示文字"
height="图片高度 单位像素" width="图片宽度 单位像素" border="图片边框 单位像素" />
width、height:控制图片的宽高
【title】:控制图片在鼠标移上去后显示的文字
【border】：图片边框的粗细
【alt】：非正常显示时的提示文字
9.转义字符串 是字符组合，用来解决无法在网页中正常显示的字符（在网页中显示特殊字符） 英文状态下：以"&"开头 以“；”结尾
<!--
HTML原代码 显示结果 描述
< < 小于号/显示标记
> > 大于号/显示标记
& & 可用于显示其他特殊字符
" " 引号
® ® 已注册
© © 版权
™ ™ 商标
  半个空白位
  一个空白位
不断行的空白
-->
添加代码注释 注释用于解释说明代码的用途 注释里的内容 浏览器不执行不解析不显示
<!-- 注释的内容 --> 注释标签不能嵌套
HTML属性定义
<!-- 语法格式：双 <标签名 属性1='属性值1'>内容</标签名>
单 <标签名 属性1='属性值1' /> -->
描述主体：HTML属性是描述标签的
书写位置：HTML属性写在开始标签里
定义：HTML属性是标签的附加信息，对标签的进一步描述
注意：
1.属性和属性值 放在开始标签中
2.标签名与属性之间空格隔开
3.属性和属性值 '=' 连接
4.属性值放在引号中 "" ''
开始标签有属性 两者之间加空格 属性与值等号连 属性值外引号连
路径 （是磁盘上查找文件所历经文件夹的路线） 斜线/ 冒号：
绝对路径：（盘符：/<目录名>/文件名） 是完整的描述文件位置的路径（1.以盘符为起点 2.网址）
D:/img/myPhoto.png 或 https://www.baidu.com/search/search.jpg
相对路径： （../<目录名>文件名） 是指目标相对于当前文件的路径
./ 当前 可不写
../表示当前文件的上一级目录
../../当前文件的上上级目录
总结：绝对路径以盘符或http为起点，直观明了，便于搜索，但不易移植
相对路径以当前文件为起点，便于整站移植，但需计算目标文件的相对位置
标签:
<h1>-</h6>标题 align 水平对齐
<p>段落</p> align 水平对齐
font 字体（color size大小）
hr 水平线（align水平位置 width宽度 size粗细 color）
<!-- <img src="" > -->图片 src width height border title(控制图片在鼠标移上去后显示的文字) alt(非正常显示时的提示文字)
b 加粗
i 倾斜
u 下划线
<br /> 换行
HTML 路径（相对 绝对） 转义字符 注释
三、列表 超链接 元素分类
1.什么是超链接
超链接：指从一个网页的文字或图片指向一个目标的链接关系
链接源（文字、图片）
链接目标（图片、位置、网页）
2.如何实现超链接
超链接通过<a></a>标签实现 双标签 anchor（锚） <a href="路径">链接源</a> （路径：相/绝）
【相对url】:多用于站点内页面和页面之间的链接；
写法：相对路径如 ./html/default.html
【绝对url】：多用于站点与站点之间的链接
写法：绝对路径如 http://www.baidu.com
3.超链接的默认外观
未被访问的链接带有下划线+蓝色
点击时 下划线+红色
访问后 下划线+紫色
4.在网页中实现图片链接
插入图片 img 添加超链接 a
5.跳转到指定位置
6.快速从网页底部回到网页顶部 锚点链接（实现任意页面指定位置的跳转）
<!-- 创建锚点：<a name='锚点名'></a> 建立锚点目标:<a name='top'></a>
链接到锚点：<a href="#锚点名">内容</a> 添加超链接：<a href="#top">返回顶部</a> //点这里 -->
注意：创建的锚点必须要有name属性或者id属性
锚点名任意命名 见名知义
href属性值一定包含 #
7.空链接 <!-- <a href='#'>文本/图片</a> -->
指的是没有目标端点的链接 用#表示
单击空链接 【刷新】当前页面 不跳转
8.其他链接类型：邮件链接（mailto:邮件地址）/图片链接（图片路径）/下载链接（下载文件路径）
超链接 （href :绝对URL 相对URL 锚URL target：_self 默认原窗口打开 _blank 在新窗口打开 _parent 在父框架集中打开
_top 在整个窗口中打开被链接的文档）
a标签的属性
<a ></a>
1.href="" 链接目标
绝对路径：指向另一个站点
相对路径：指向站内某文件
锚点路径：指向页面内某位置
2.target 属性规定链接目标的打开方式 默认是在原窗口打开
<a href='路径' target='属性值' >链接源</a>
target打开方式的属性值：
_self 默认。原窗口打开
_blank 在新窗口打开
_parent 在父框架集中打开
_top 在整个窗口中打开被链接的文档
9.列表 为啥使用列表
有序无序 逐条排列
HTML列表 有序列表/无序列表/自定义列表
HTML列表是在网页中将相关资料以【条目】的形式，【有序】或【无序】排列形成的表
1)无序列表 unordered lists 标签为ul 是其各个列表项之间为并列关系 没有先后顺序的列表 无序列表 列表项
语法结构：
无序列表 unordered lists 标签为ul
列表项 list item 标签为li
<ul>
<li>列表项</li>
</ul>
【快捷方式】： ul>li*n + tab键
ul>li{瓜子二手车}*5 + tab键 标签结构+内容可以快速完成
无序列表的应用场景：
新闻列表 导航栏
比如实心圆点开头的 一行行的新闻列表
或者 男装/女装/童装 这种
无序列表的属性
1.type （用于指定列表项目符号类型） 值：disc(默认值 实现圆)/square(实心小方块)/circle(空心圆)
标签： a标签 href(链接地址) target(打开方式)
列表 无序列表 ul li
2)有序列表 是各个列表项按照一定顺序排列的列表 有序列表 列表项
有序列表的英文全称 ordered lists 标签是<ol></ol>
列表项 li
<ol>
<li></li>
</ol>
属性
type: 规定列表项目编号类型 1(默认值 十进制数字 显示为1 2 3)/a或A（字母顺序的有序列表 a b c或 A B C）/i或I (罗马字符 i ii iii / I II III)
start： 改变起始编号 规定列表项目编号的起始值 <ol start='起始值'><li></li></ol> 【起始值只能是数字 负的也可以】
start="2" type="A" 这里是从B开始
start="-1" type="A" 这里是从-1开始 -1 0 A B C
start="-1" 这里是从-1开始
设置开始项属性 -- start属性
3)自定义列表结构 是带有列表项和列表项注释的列表
【dt和dd不是嵌套关系 dt和dd顺序不能颠倒】
赔偿规则： //列表项
宽带连接过几日讲述了公共几日g //列表项注释（描述项）
整体是 自定义列表
自定义列表的标签 dl definition list
列表项标签 dt definition term
列表项注释的标签 dd definition description
<dl>
<dt>列表项</dt>
<dd>列表项注释1</dd>
<dd>列表项注释2</dd>
</dl>
自定义列表总结：
1.dl包含dt dd
2.dt是列表项 dd是列表项注释
3.【dt和dd是并列关系 不能互相嵌套 不能颠倒】
4.dt可以对应多个dd dt和dd 是 一对多 的关系
HTML超链接 属性（target href name )
图片链接
文本链接
锚点链接
HTML列表 无序列表 type类型
有序列表 ol li
自定义列表 dl dt dd
HTML元素 行内元素 块元素
10.HTML元素 元素（从开始标签到结束标签的所有代码） 元素撑起了整个网页
<p>HELLO WORLD</p>
开始标签：<p>
结束标签：</p>
内容：HELLO WORLD
元素：<p>HELLO WORLD</p>
11.元素分类
行内元素（内联元素）：在一行显示 不能设置高度和宽度 常见的行内元素是a b i u em strong span font(字体)
块级元素：独占一行 可控制宽高 常见的块级元素有p h1-h6 ul ol li dl dt dd
页面结构常见分析：
nav :<a href=""></a> 浮动
图片：<img src="" >
标题：<h2></h2>
并列图片：<img src="" ><img src="" ><img src="" >
<h4><img src="" ></h4>
<p><font size="" color=""></font></p>
常见错误：1.语法错误 2.标签嵌套错误 3.图片路径错误
四、表格布局
1.为什么使用表格
结构清晰明了 展示数据详细
2.什么是表格
表格 即是一种可视化交流模式 又是一种组织整理数据的手段 表格 行 单元格
3.表格的结构、属性
4.行、单元格的属性
5.在网页中实现表格
表格 table table
表格行 table row <tr></tr>
单元格 table data cell <td></td>
标题单元格 table header cell <th></th>
表格由table标签来定义
每个表格均有若干行（由tr标签定义）
每行被分割为若干单元格（由td th标签定义）
<table border="" cellspacing="" cellpadding="">
<tr> //表格行
<th>Header</th> //标题单元格
</tr>
<tr>
<td>Data</td>//单元格
</tr>
</table>
整体是表格
<tr><th></th><td></td></tr> 也是对的
HTML表格的属性
table的属性用于设置整个表格的样式
整个表格 样式：<table width="表格的宽度(默认尽可能小) 数值+px%"
height="表格的高度 数值+px"
border="表格边框粗细 数值+px"
bgcolor="表格的背景颜色 英文单词/16进制/rgb()"
align="表格的水平对齐方式 left/center/right"
cellspacing="单元格间距 默认2px"
cellpadding="单元格边距 默认1px">
tr样式 <tr height="高度 数值+px"
bgcolor="背景颜色 颜色值"
align="水平对齐方式 left/center/right"
valign="垂直对齐方式 top/middle/bottom">
th\td样式 <th bgcolor="单元格的背景颜色 颜色值"
align="单元格的水平对齐方式 left/center/right"
valign="单元格的垂直对齐方式 top/middle/bottom"
width="单元格的宽度 单位是%或像素px"
rowspan="合并多行/垂直合并 数值"
colspan="合并多列/水平合并 数值"
>
Header
</th>
</tr>
<tr>
<td bgcolor="" align="" valign="" width="">Data</td>
</tr>
</table>
width
height
border
bdcolor 表格的背景色
align 设置表格的水平对齐方式
cellspacing 单元格间距（小格子之间的距离） 默认2px
cellpadding 单元格边距（格子里的内容到小格子边线的距离） 默认1px
colspan 单元格横向合并的属性（单元格水平合并） <td colspan="数值"></td> //多列合并 水平合并 列合并
rowspan 单元格的垂直合并属性（单元格多行合并）<td rowspan="数值"></td> //多行合并 行合并
table : width height border cellpadding(边距 1px默认) cellspacing(间距 2px默认) align(水平对齐方式) bgcolor
tr: bgcolor align valign height 【valign="垂直对齐方式 top/middle/bottom"】【默认水平居左垂直居中】
td/th: bgcolor align valign width
常见错误：
1.属性设置写错
2.属性值的位置写错
3.水平合并的属性写错
4.合并之后没有删除被合并的单元格
单元格合并
rowspan="合并多行/垂直合并 数值"
colspan="合并多列/水平合并 数值"
合并之后删除被合并的单元格
实现1像素细线边框
随着间距cellspacing减小至0，边框的粗细是 1+1=2 (加1px border时)
随着间距cellspacing减小至1，边框的粗细是 1 此时细线的颜色就是表格的背景颜色 (不加border时 用bgcolor最后挤出1px 看上去像边框 <table bgcolor='blue' cellspacing="15px(===>1px)"></table>)
表格嵌套
单元格可以包含文本 图片 列表 段落 表单等元素
HTML表格
结构 table标签 （width
heigh
border
align 水平对齐
bgcolor 背景色
cellpadding 边距 单元格与内容距离
cellspacing 间距 两单元格之间距离)
tr height
bgcolor
align
valign :top/middle/bottom
th/td width
bgcolor
align
valign 垂直对齐
colspan 水平合并
rowspan 垂直合并
HTML表格
table标签 tr标签 td/th标签
width height width
height bgcolor bgcolor
bgcolor align valign
align valign colspan
border rowspan
cellpadding
cellspacing
五、表单
1.什么是表单
表单用于收集用户输入的信息，并通过浏览器向网站传送
2.如何实现表单
form标签 双 用于声明整个表单 定义数据收集范围 <form></form>
整体是表单
表单控件有输入框 按钮
表单的属性：
1.action 用于设置表单的提交地址 <form action = 'URL 提交到那个页面' ></form>
2.target 用于设置表单的打开方式 <form target="_self 默认 原窗口打开/ _blank 在新窗口中打开 提交方式"
3.
<form >
<input />
</form>
3.输入框 input 单 用来输入信息 <input type="" name="" id="" value="" />
input输入框的属性
1.type 控制输入框的类型 <input type="输入框的类型" name="" id="" value="" />
type的值有
1)text 文本框 输入单行文本内容 <input type="text" />
2)password 密码框 输入保密信息 <input type="password" />
3)submit 提交按钮 <input type="submit" value="值" /> type='submit' value属性控制按钮文字的显示 值可以是提交 或登录等字
2.placeholder 用于提示输入框的输入内容 属性值为提示的文本内容 <input placeholder="提示的文本内容" />
4.HTML中的两种选择框（单选框 复选框） <input type="类型值"/> 由type决定的
radio 单选框 只能选择一项
checkbox 复选框 可以选择多项
4.1单选框 type='radio'
bug：单选框不能实现单选功能
解决：单选框实现单项选择的必备条件：【通过name属性将单选框分为一组】
eg:<input type="radio" name="sex" id="" value="" />男
<input type="radio" name="sex" id="" value="" />女
注意：name属性的值 见名知义 name="sex"
设置选择框默认选中
选择框的选中状态：【checked 属性规定了在页面加载时处于默认选中状态的选择框】 加 checked = "checked" 属性和属性值相同时可以只写属性 所以只写checked即可
input标签的属性有 name type checked , radio是type属性的属性值
添加选择框的默认选中状态：
1.书写基本标签 input标签
2.设置标签属性 type
3.设置type属性的属性值 radio checkbox
4.添加name 属性实现单选效果
5.添加checked属性
5.文件域
文件域用于上传文件 type = 'file' <input type="file" />
6.按钮
html中有三种按钮：提交按钮(submit)、重置按钮(reset)、普通按钮(button) <input type="类型值" value="值" />
submit 提交按钮 向服务器发送表单数据
reset 重置按钮 输入的数据清空
button 普通按钮
eg:在注册页面添加按钮
1.书写基本标签 input标签
2.设置标签属性 type
3.设置type属性值 button reset
4.设置标签属性 修改按钮上的字
7.文本域 <textarea rows="行数" cols="列数" maxlength="文本域文字的最大长度"></textarea> 用于多行文本的输入
基本：<textarea></textarea>
1）改变文本域的大小的属性是cols :文本域的列数（宽度） rows:文本域的行数（高度）
2）限定文字个数 maxlength :用于限定文本域文字的最大长度
8.下拉列表 <select><option value =""></option></select> 是在有限的空间里设置多个选项 如出生年月日 省份
在注册页面添加下拉列表：1）书写select标签 2）嵌套option标签 3)设置selected属性
注意：单选框的选中状态是selected 下拉列表的选中状态是selected
option的属性值：
1.selected 是option的属性值 设置下拉菜单的默认选中项 只写属性selected即可 <option value ="" selected></option>
2.value
HTML5新增表单类型
HTML5有多个新的表单输入类型 提供了更好的输入控制和验证
type值 email 自动验证email域的值 （提交时，自动验证，不是有效的email地址则提交失败） <input type="email" />
number 包含数值的输入域(用于输入数值的文本框) <input type="number" value="初始值" name="points" min="最小值" max="最大值" step="步长" id="" />
date 选取日 月 年 即选择一个具体的日期 <input type="date" name="" id="" value="" />
邮箱格式是email 日期格式是date
常见错误：1.单词拼写错误 2.type属性值选择
<table border="0" cellspacing="" cellpadding="" width="600px">
<tr>
<th colspan="2" style="color: #008000;" align="center">填写注册资料</th>
</tr>
<tr>
<td><span>*</span>用户名</td>
<td><input type="text" name="" id="" value="" placeholder="请输入您的用户名" /></td>
</tr>
<tr>
<td><span>*</span>密码</td>
<td><input type="password" name="" id="" value="" placeholder="请输入密码" /></td>
</tr>
<tr>
<td><span>*</span>确认密码</td>
<td><input type="password" name="" id="" value="" placeholder="请确认密码" /></td>
</tr>
<tr>
<td><span>*</span>密码提示</td>
<td>
<select>
<option value ="0">请选择一个问题</option>
<option value ="1">生日是？</option>
</select>
</td>
</tr>
<tr>
<td><span>*</span>提示答案</td>
<td>
<input type="text" name="" id="" value="" placeholder="请输入问题答案" />
</td>
</tr>
<tr>
<td><span> </span>性别</td>
<td>
<input type="radio" id="" value="nan" name="sex"/>男
<input type="radio" id="" value="nv" name="sex"/>女
</td>
</tr>
<tr>
<td><span> </span>爱好</td>
<td>
<input type="checkbox" id="" value="nan" name="sex"/>上网
<input type="checkbox" id="" value="ti" name="sex"/>体育
<input type="checkbox" id="" value="xue" name="sex"/>学习
</td>
</tr>
<tr>
<td><span> </span>上传头像</td>
<td>
<input type="file" name="" id="" value="上传头像" />
</td>
</tr>
<tr>
<td><span>*</span>验证码</td>
<td>
<input type="text" name="" id="" value="" /><br>
<input type="button" name="" id="" value="免费获取验证码" />
</td>
</tr>
<tr>
<td><span> </span>年龄</td>
<td>
<select>
<option value ="2000">2000</option>
<option value ="2000">2001</option>
</select>
<span>年</span>
<select>
<option value ="01">01</option>
<option value ="02">02</option>
</select>
<span>月</span>
</td>
</tr>
<tr>
<td><span> </span>籍贯</td>
<td>
<select>
<option value ="0">请选择</option>
<option value ="1">河南</option>
</select>
<span>省/直辖市</span>
<select>
<option value ="00">请选择</option>
<option value ="11">河南</option>
</select>
<span>市</span>
</td>
</tr>
<tr>
<td><span> </span>个人介绍</td>
<td>
<textarea rows="" cols="" maxlength="140">
</textarea>
<br>
<span>最多输入140字符</span>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox" name="" id="" value="" /> 同意“<a href="">服务条款</a>”和“<a href="">隐私权相关政策</a>”
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" name="" id="" value="立即注册" style="color: white;background-color: #008000;" />
<input type="reset" name="" id="" value="重置" />
</td>
</tr>
</table>
总结：
HTML包含表单
表单包含表单元素和属性
表单元素包含下拉列表 文本域 按钮 文本框 选择框 h5新增
表单 input标签 type属性 五新(邮箱 email 网址 日期date 数值number 颜色 )
四框（text文本框 password密码框 radio单选框 checkbox复选框）
三钮（submit 提交按钮 reset重置按钮 button普通按钮）
一域 file 文本域
下拉列表 select
option
文本域 <textarea rows="" cols=""></textarea>
表单 form标签 action(提交地址)
target(打开方式)
textarea标签 cols 列数 rows行数 maxlength最大字符长度 <textarea rows="" cols=""></textarea>
select标签
option标签 selected默认选中 <option value =""></option>
input标签 type(类型) -【text 文本框
password 密码框
radio 单选框
checkbox 复选框
submit 提交按钮
reset 重置按钮
button 普通按钮
file 文件域
】
placeholder(提示)
value(值)
name
checked
</pre>
浙公网安备 33010602011771号