HTML总结

最新推荐文章于 2024-09-22 10:46:41 发布

csx_zzh

最新推荐文章于 2024-09-22 10:46:41 发布

阅读量303

点赞数

分类专栏： JavaWeb 文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/csx_zzh/article/details/123093385

版权

JavaWeb 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了HTML的基础语法，包括约束声明、字符集、标题、字体、超链接、列表、表格和表单元素的使用。重点讲解了表单的各组件如输入框、单选按钮、复选框、下拉列表、多行文本输入以及表单的提交方式（GET和POST）等。此外，还提及了HTML元素的对齐方式、样式控制以及一些常见标签的用法。

摘要由CSDN通过智能技术生成

<!DOCTYPE html><!---约束 声明 --->
<html lang="zh_CN">
<!---   html标签          表示html的开始
        lang="zh_CN"      表示中文
        html标签 一般分为两部分 head 和body
--->
<head><!---表示头部信息 由title标签 css样式，js代码构成 --->
    <meta charset="UTF-8"><!---表示使用UTF-8 字符集--->
    <title>华</title>
</head>
<body><!---整个页面主题内容 --->

    <font color="red" face="宋体" size="1">我是张振华</font>
    <a href="http://www.baidu.com">百度</a>
    <!--超链接
        href
        target  _self 当前页面 _blank 打开新页面进行跳转-->
    <ul type="none">
        <li>张三</li>
    </ul>

    <table border="1" width="300" height="300" align="center" cellspacing="10">
        <!--    cellspacing 单元格间距
                border      表格标签
                colspan 跨列  rowspan 跨行-->
        <tr>
            <th colspan="2" rowspan="2">1.1</th>
            <th>1.2</th>
        </tr>
        <tr>
            <td>2.1</td>
            <td>2.2</td>
        </tr>
    </table>


    <!--iframe 可以在页面上单独开辟一个小区域显示一个单独的页面
            iframe 和a 标签的使用步骤
                1.在iframe 中name属性定义一个名称
                2.在a标签中的target属性上设置iframe标签的name属性
    <iframe src="hello.html" width="500" height="300" name="abc"></iframe>
    <ul>
        <li><a href="hello.html" target="abc"></a></li>
    </ul>
     -->


    <!--表单
        <form> 就是表单
            action 设置提交服务器的地址
            method 设置提交的方式get(默认值)或post

            input type="text" 文件输入框 value 设置默认显示内容
            type="password"   密码输入框
            type="radio"   单选框 name 进行分组    checked="checked"  默认选择哪一个
            <input type="reset"/> 重置按钮  value 重写文字
            <input type="submit"> 提交按钮  value 重写文字
            <input type="button"> 按钮      value 重写文字
            <input type="file"/>  文件上传域
            <input type="hidden"/> 是隐藏域 不需要用户参与是可以使用

            <select> 下拉列表框
            <option> 下拉列表框中的选项 selected="selected" 默认选中
            textarea 多行文本输入框
                rows 属性设置可以显示几行高度
                cols 属性设置每行可以显示几个字符宽度

            表单提交后没有发送给服务器的三种情况
                1.表单没有name属性
                2.单选复选(下拉列表中的option选项都需要添加value属性,以便发送给服务器)
                3.表单项不在from标签中

             GET 请求的特点
                1.浏览器地址栏中的地址是 ：action属性[+?+请求参数]
                    请求参数的格式 name=value&name=value
                2.不安全
                3.它有数据长度的限制
             POST请求的特点是
                1.浏览器地址栏中的地址只有action属性值
                2.相对于get要安全
                3.理论上没有数据长度的限制
        -->
    <form action="http://localhost:8080" method="post" >
        <input type="hidden" name="action" value="login"/>
        <h1 align="center">用户注册界面</h1>
        <table align="center">
            <tr>
                <td>用户名称：</td>
                <td> <input type="text" placeholder="请输入用户名称" name="name"/></td>
            </tr>
            <tr>
                <td>用户密码：</td>
                <td><input type="password" placeholder="请输入用户密码" name="password"/></td>
            </tr>
            <tr>
                <td>性别：</td>
                <td>
                    <input type="radio" name="sex" checked="checked" value="boy"/>男
                    <input type="radio" name="sex" value="girl"/>女
                </td>
            </tr>
            <tr>
                <td>兴趣爱好:</td>
                <td> <input type="checkbox" value="Java" name="hobby"/> Java
                     <input type="checkbox" value="C++"  name="hobby"/> C++
                     <input type="checkbox" value="PHP"  name="hobby"/> PHP
                </td>
            </tr>
            <tr>
                <td>国籍</td>
                <td><select>
                    <option value="none">--请选择国籍--</option>
                    <option selected="selected" value="Chinese">中国</option>
                    <option value="britain">英国</option>
                    <option value="USA">美国</option>
                </select></td>
            </tr>
            <tr>
                <td>自我评价：</td>
                <td><textarea rows="5" cols="20" name="evaluate">我才是默认值</textarea><br/></td>
            </tr>
            <tr>
                <td><input type="reset"/></td>
                <td> <input type="submit"></td>
            </tr>
        </table>
    </form>
    <!-- <div> 独占一行
         <span>它的长度是封禁数据的长度
         <p>    默认会在段落的上方或下方各空出一行(如果已有就不再空)-->

        <div>div表签1</div>
        <div>div表签2</div>
        <span>span标签1</span>
        <span>span标签2</span>
        <p>段落标签1</p>
        <p>段落标签2</p>
        </body>
        </html>
<!--
    bgcolor="red"        背景颜色
    alert(参数)          警告框函数
    br                   换行
    hr                   水平线
    <i>                 斜体文本效果。
    font                  可以设置字体 颜色 大小
    字符集实体化
        < 	    &lt;
        > 	    &gt;
        空格 	&nbsp;
    h1 到 h6  都是标题标签 从大到小
    align       对齐属性 left center right


    ul          无序列表    type   可以修改列表项前面的符号
    li          列表项
    b           加粗
    td          单元格标签
    th          表头标签
    tr          行标签

 -->