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>
    <!-- 
        框架标签
        iframe
            name  是框架的名称
            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>