day31_HTML

今日内容

0 复习昨日

1 表格标签

2 表单标签【重要】

3 框架标签

0 复习昨日

Javaweb开发,前端,服务器,数据库

前端,要学习HTML,CSS,JavaScript,JQuery

HTML是用来编写网页的一种编程语言

语法

由各种标签组成,标签是尖括号<>,
一般都是成对儿出现,前面叫做开标签,后面称为闭标签
特别的,有部分单标签,hr,br,img
大小写都行,但是建议是小写
开标签中写属性,属性名=“属性值”
标签可以嵌套

标签

结构标签
排版标签 h1,hr,br,p,font
其中有些值特别注意,长度/宽度/尺寸单位是px,或者%
颜色写法,1) 颜色单词 2)rgb(0,0,0) 3) 十六进制取色 #000000

块标签 div,span
列表标签 ol,ul,li
图片标签 img ,src属性,重点是路径的写法
超链接 a,
href指定跳转路径
target属性,值1) _self 以自身跳转,2) _blank 以打开一个空白页跳转

1 表格标签

表格标签可以展现一个表格,用来填充数据,以及布局页面

<body><!-- 4行3列的表格 --><!-- 表格标签是table行标签是tr行内设置单元格,即列 td单元格td可以改成th,这样就有加粗效果,一般是表格标题-------------------------------给table设置属性,让表格看起来更好看border 边框width 尺寸--><table border="2px" width="300px"><tr><th>1-1</th>  <!-- 加粗 --><th>1-2</th><th>1-3</th></tr><tr><!-- 行合并,跨度2,即合并两行 --><td rowspan="2">2-1</td><!-- 列合并,跨度2,即合并两列 --><td colspan="2">2-2</td><!-- 被合并,需要删除 --><!-- <td>2-3</td> --></tr><tr><!-- 被合并,需要删除 --><!-- <td>3-1</td> --><td>3-2</td><td>3-3</td></tr><tr><td>4-1</td><td>4-2</td><td>4-3</td></tr></table>
</body>

练习: 模仿下图形式(2行,4列,每个单元格是图片,点击图片能跳转)

在这里插入图片描述

2 框架标签

<body><ul><!-- 在a标签中使用属性,将页面跳转至ifram内 --><!-- 设置target属性,属性值指定iframe标签的naem属性值 --><li><a href="demo1.html" target="myframe">用户管理</a></li><li><a href="test1.html" target="myframe">角色管理</a></li><li><a href="test2.html" target="myframe">菜单管理</a></li></ul><!-- 框架标签iframename  是框架的名称width 内容区域的宽度,height 内容区域的高度src  ,当页面加载,会直接通过src,加载指定页面到当前框架区域--><iframe name="myframe" src="test1.html" width="1200px" height="600px"></iframe>
</body>

3 表单标签【重要】

表单用来和服务器交互,可以将数据发送到后台服务器.

表单用来收集数据,比如登录框,注册框,搜索框等等

常用的功能,输入框,下拉框,单选框,多选框,文件上传框,文本域,一些按钮

<body><!-- 表单 form属性 action,用来指定submit提交后的服务器路径,即数据发送到这个路径背后的服务器-------------------------------------各种表单框,要想将数据发送到后台,必须指定一个属性 name-------------------------------------输入框 input,单标签属性value ,是输入框的值,默认展示value中的值属性placeholder ,背景提示属性type,有很多值,不同属性值,可以实现不同的输入效果type=text 普通文本type=password 密码type=radio 单选框,需要给多个单选标签设置同一个name属性值这样他们就是一组设置一个value属性,以便于提交后展示数据type=checkbox,复选框,需要给多个复选框设置同一个name属性值设置一个value属性,以便于提交后展示数据type=file ,选择文件上传type=date , 选择日期type=email , 邮箱type=hidden , 会将输入框隐藏type=button , 按钮type=reset , 重置type=submit , 提交-------------------------------------下拉框 select下来选项  option-------------------------------------文本域 textarea-------------------------------------按钮  button属性type,有很多值,点击按钮的效果不一样type=button 纯按钮type=reset 重置,点击会将表达信息恢复到默认type=submit 提交,将表达中输入的数据提交都后台服务器这个后台服务器是form标签中指定的服务器路径--><form action="/java2217">隐藏框<input type="hidden" name="money"><br>用户名<input type="text" name="username" placeholder="请输入用户名"/><br>密码<input type="password" name="pwd"/><br>性别<input type="radio" name="sex" value="man"/> 男<input type="radio" name="sex" value="women"/> 女<br>技能 <input type="checkbox" name="skills" value="javase"/> JavaSE<input type="checkbox" name="skills" value="javaweb"/> JavaWeb<input type="checkbox" name="skills" value="ssm"/> SSM<br>头像 <input type="file" name="touxiang"/> <br>生日 <input type="date" name="birthday"/> <br>邮箱 <input type="email" name="email" value="11111@qq.com"/> <br>籍贯 <select name="jiguan"><option value="henan">河南</option><option value="yunnan">云南</option><option value="hainan">海南</option></select><select name="city"><option>郑州</option><option>周口</option><option>驻马店</option></select> <br>个人简历<textarea></textarea><br><button type="button">按钮</button><button type="reset">重置</button><button type="submit">提交</button><hr><input type="button" value="按钮"/><input type="reset" value="重置"/><input type="submit" value="提交"/></form>
</body>