JavaWeb——HTML

最新推荐文章于 2023-07-31 11:08:34 发布

LEverything

最新推荐文章于 2023-07-31 11:08:34 发布

阅读量284

点赞数

分类专栏： JavaWeb学习

本文链接：https://blog.csdn.net/LEverything/article/details/106358324

版权

JavaWeb学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

JavaWeb——HTML

网页的组成部分

网页有三个组成部分：内容，表现和行为。
内容：即网页上显示的文字等；表现：网页的内容相同，表现不同，网页呈现出来也不相同。

HTML（超文本标记语言）

HTML通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容。

创建HTML文件

在IDEA中创建一个新的项目，选择Static Web，
在这里插入图片描述
填写项目名称，选择项目位置，完成即可。

在项目中新建一个HTML文件，取名完成
即创建成功一个HEML文件。

可以选择浏览器执行网页文件

HTML书写格式

在这里插入图片描述
HTML网页的书写格式主要如上图所示。

标签的格式是： <标签名> 封装的数据 </标签名>
标签的大小写不敏感，大小写都可以
标签拥有自己属性，又分为基本属性：如 bgcolor="#f0f8ff" 是背景颜色属性
和事件属性：如 οnclick=“alert(‘啦啦啦’)” 可设置点击后的事件。
标签有但标签和双标签，但标签格式：<标签名/>

标签的语法

标签不能交叉的嵌套。
双标签必须正确的闭合。
单标签反斜杠不能丢。
属性必须有值
注释不可以嵌套。
但是以上的有些错误浏览器可以修复，但是在语法上是错误的。

常用标签

font字体标签

color ：字体颜色属性
face：字体样式属性
size：字体大小属性

在这里插入图片描述
三个常用特殊字符

小于号 <: &lt
大于号 >: &gt
空格：&nbsp

标题标签
有h1_h6 ，h1最大，h6最小有对其属性align
在这里插入图片描述
效果

超链接

无序列表

在这里插入图片描述
效果

有序列表

效果

img标签

效果
在这里插入图片描述

表格标签
在这里插入图片描述
效果

跨行跨列表格
在这里插入图片描述
效果

iframe标签

表单标签
表单就是html页面中用来收集用户信息的所有元素的集合，然后把这些信息发送给服务器。
表单显示

<!-- form 就是表单标签
      input type="text" 是文本输入框 value="默认值" 设置默认值
      input type="password" 是密码输入框
      input type="radio" 是单选框   name属性可以对其分组，同组的只能选一个
            checked="checked"表示默认选中
      input type="checkbox"  是复选框
      input type="reset"   是重置按钮 value 可以设置按钮文本
      input type="submit" 是提交按钮
      input type="button" 是按钮
      input type="file"  是文件上传域
      input type="hidden" 是隐藏域  需要发送的信息但是用户看不见

      select  标签是下拉选择标签
      option  标签是下拉列表中选项  selected="selected" 表示默认选中

      textarea 标签是多行文本输入框
        rows="10" 设置行数
        cols="30" 设置每行能输入的字符宽度
        -->
<form>
    <h1 align="center"> 用户注册</h1>
    <table align="center">
        <tr>
            <td>用户名称：</td>
            <td><input type="text" value="默认值"/></td>
        </tr>
        <tr>
            <td>用户密码：</td>
            <td><input type="password" /></td>
        </tr>
        <tr>
            <td>确认密码：</td>
            <td><input type="password" /></td>
        </tr>
        <tr>
            <td> <input type="radio" name="sex"  checked="checked"/> 男 </td>
            <td> <input type="radio" name="sex"/> 女</td>
        </tr>
        <tr>
            <td>兴趣爱好：</td>
            <td>
                <input type="checkbox"/> 打球
                <input type="checkbox"/> 游泳
                <input type="checkbox"/>看书
            </td>
        </tr>
        <tr>
            <td> 国籍：</td>
            <td>
                <select>
                <option>选择国籍</option>
                <option selected="selected">中国</option>
                <option>美国</option>
                <option>英国</option>
                </select>
            </td>
        </tr>
        <tr>
            <td> 自我评价：</td>
            <td>
                <textarea rows="10" cols="30">我是默认值</textarea>
            </td>
        </tr>
        <tr>
            <td>
                <input type="reset" value="重置"/>
                <input type="submit" value="提交"/>
            </td>
        </tr>
    </table>

</form>

效果:
在这里插入图片描述
表单提交

<body>
<!-- form 标签是表单标签
        action 属性设置提交的服务器地址
        method 属性设置提交的方式  有get和post
            get 请求的特点：
                1.浏览器地址栏中的地址：action属性值【+？+请求参数】
                  请求参数的格式：name=value&name=value....
                2.不安全
                3.提交有数据长度的限制
            post 请求的特点
                1.浏览器只显示action属性值
                2。安全
                3.没有长度限制

     提交不了的三种情况;
       1.表单项没有name
       2.单选、复选、下拉列表的option 都要设置value
       3.表单项不在提交的form标签中
-->
<form action="www.baidu.com" method="post">
    <h1 align="center"> 用户注册</h1>
    <table align="center">
        <tr>
            <td>用户名称：</td>
            <td><input type="text" value="默认值" name="userName"/></td>
        </tr>
        <tr>
            <td>用户密码：</td>
            <td><input type="password" name="password"/></td>
        </tr>
        <tr>
            <td>确认密码：</td>
            <td><input type="password"  name="password"/></td>
        </tr>
        <tr>
            <td> <input type="radio" name="sex"  checked="checked" value="male"/> 男 </td>
            <td> <input type="radio" name="sex" value="female"/> 女</td>
        </tr>
        <tr>
            <td>兴趣爱好：</td>
            <td>
                <input name="hobby" type="checkbox" value="playball"/> 打球
                <input name="hobby" type="checkbox" value="swim"/> 游泳
                <input name="hobby" type="checkbox" value="readbook"/>看书
            </td>
        </tr>
        <tr>
            <td> 国籍：</td>
            <td>
                <select name="country">
                    <option value="choose">选择国籍</option>
                    <option value="CN" selected="selected">中国</option>
                    <option value="US">美国</option>
                    <option value="UK">英国</option>
                </select>
            </td>
        </tr>
        <tr>
            <td> 自我评价：</td>
            <td>
                <textarea rows="10" cols="30" name="self">我是默认值</textarea>
            </td>
        </tr>
        <tr>
            <td>
                <input type="reset" value="重置"/>
                <input type="submit" value="提交"/>
            </td>
        </tr>
    </table>

</form>