web学习(java)-CSDN博客

本文链接：https://blog.csdn.net/m0_57408062/article/details/135444000

1.什么是web

web:全球广域网(万维网),能够通过浏览器访问的网站.

2.HTML入门

Html:超文本标记语言

1.HTML标签元素组成

2.HTML标签

3.HTML特殊字符

4.span和div容器

span: 内联标签,不带换行

div:快标签,带换行

5. 图片,音频,视频标签

src:路径:

1.绝对路径:磁盘路径
2.相对路径:当前路径,一个点 ./img/
上级目录:两个点../
属性和属性值可以缩写为属性

6.超链接

<a href="http://baidu.com">
    <!--点击图片添加连接-->
    <img src="media/img_1.png">
</a>

7.table表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table表格标签</title>
</head>
<body>
 <table border="1px" cellspacing="0" align="center" width="500px" >

   <thead align="center">
   <tr>
       <th>编号</th>
       <th>姓名</th>
       <th>性别</th>
       <th>成绩</th>
   </tr>
   </thead>
    <tbody align="center">
    <tr>
        <td>100</td>
        <td>张三</td>
        <td>男</td>
        <td>80</td>
    </tr>
    <tr>
        <td>200</td>
        <td>小芳</td>
        <td>女</td>
        <td rowspan="2">90</td>
    </tr>
    <tr>
        <td>300</td>
        <td>李四</td>
        <td>男</td>
    </tr>
    </tbody>
     <tfoot align="center">
     <tr>
         <td>总成绩</td>
         <td colspan="3">900</td>
     </tr>
     </tfoot>
 </table>
</body>
</html>

8.表单元素

表单的作用:接收用户输入数据,并提交数据给服务器

<form action="01_hello.html" method="post">
    用户名:<input type="text" name="username"/><br/>
    密码:<input type="password" name="password"/><br/>
    <input type="submit" value="登录">
</form>

9.表单练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="01_hello.html" method="post">
    <table>
        <tr>
            <td>用户名:</td>
            <td><input type="text" name="username"></td>
        </tr>
        <tr>
            <td>密码:</td>
            <td><input type="password" name="password"></td>
        </tr>
        <tr>
            <td>邮箱:</td>
            <td><input type="email" name="email"></td>
        </tr>
        <tr>
            <td>性别:</td>
            <td><input type="radio" name="sex" value="1" checked>男
                <input type="radio" name="sex" value="0">女</td>
        </tr>
        <tr>
            <td>爱好:</td>
            <td><input type="checkbox" name="爱好" value="yy">游泳
                <input type="checkbox" name="爱好" value="sw">上网
                <input type="checkbox" name="爱好" value="dy">电影
                <input type="checkbox" name="爱好" value="ks">看书</td>
        </tr>
        <tr>
            <td>学历:</td>
            <td>
                <select name="edu">
                    <option value="gz">高中</option>
                    <option value="dz">大专</option>
                    <option value="bk" selected>本科</option>
                    <option value="ss">硕士研究生</option>

                </select>
            </td>
        </tr>
        <tr>
            <td>出生:</td>
            <td>
                <input type="date" name="date">
            </td>
        </tr>
        <tr>
            <td>照片:</td>
            <td>
                <input type="file" name="photo">
            </td>
        </tr>
        <tr>
            <td>个人简介</td>
            <td>
                <textarea name="grjj"></textarea>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="submit">
                <input type="reset">
            </td>
        </tr>


    </table>
</form>
</body>
</html>