HTML的一些随时可以回来看的东西

一些HTML的基础

<!--
1.这是HTML的注释
2.加上以下代码的第一行就表示HTML5语法，去掉就是HTML4.0
3.HTML不区分大小写，语法松散不严格
-->
<!doctype html>
<!--根-->
<html>
    <!--头-->
    <head>
        <!--网页标题，显示在网页左上角-->
        <title>网页的标题</title>
    </head>
    <!--体-->
    <body>
        网页的主题内容，欢迎学习HTML
    </body>
</html>
​
<!doctype html>
<html>
    <head>
        <title>HTML的基本标签</title>
    </head>
    <body>
        <!--段落标记-->
        <p></p>
        <!--标题字：是HTML预留的格式，和word中的标题字相同-->
​
        <h1>标题字</h1>//h1到h6
        <!--换行标记,br标签是一个独目标记-->
        hello
        world!
        hello <br>world
​
        <!--横线，独目标记-->
        <hr>
        <!--color和width都是hr标签的属性-->
        <hr color = "red" width = 50%>
        <hr color ='green' width = 30%>
​
        <!--预留格式-->
        <pre>
        fldksajflk
        </pre>
​
        <del>删除字</del>
        <ins>插入字</ins>
        <b>粗体字</b>
        <i>斜体字</i>
​
        <!--右上角加字-->
        10<sup>2</sup>
        <!--右下角加字-->
        10<sub> </sub>
        
        <!--字体标签-->
        <font color = "red"  size = "50">字体标签</font>
        
        
        <!--实体符号特点是：&开始，以;结束。&lt;是小于号   &gt;是大于号-->
        b&lt;a&gt;c<!--显示出来b<a>c-->
​
        <!--空格&nbsp;-->
​
​
    </body>
</html>

表格

<!doctype html>
<html>
    <head>
        <title>表格</title>
    </head>
    <body>
​
​
        <!--
            border = "1px"设置表格的边框为1像素宽度。
            width 宽度
            height 高度
        -->
        <!--
            <table border = "1px"  width = "300ph">
        -->
        <table  border ="1px" width ="60%"  heigh = "150px">
            <!--align对齐方式-->
            <tr align = "center">
            <tr>
                <tb>a</tb>
                <tb>b</tb>
                <tb>c</tb>
                <tb>d</tb>
            </tr>
            <tr>
                <tb>e</tb>
                <tb>f</tb>
                <tb>g</tb>
                <tb>h</tb>
            </tr>
            <tr>
                <tb>i</tb>
                <tb>j</tb>
                <tb>k</tb>
                <tb>m</tb>
            </tr>
        </table>

合并单元格

<!doctype html>
<html>
    <head>
        <title>单元格合并，th标签</title>
    </head>
    <body>
        <!--
        注意事项
            1.row合并的时候，删除下面的单元格//rowspan//上下合并“行合并”
            rowspan = "？"和几个写几个
            2.col合并的时候，对删除哪一个没要求//colspan//左右合并“列合并”
        -->
        <table border = "1px"  width ="50%">
            <tr>
            <!--
            <td>员工编号</td>
            <td>员工薪资</td>
            <td>部门名称</td>
            -->
            <!--th 标签也是单元格标签，比td多的是居中，加粗-->
            <th>员工编号</th>
            <th>员工薪资</th>
            <th>部门名称</th>
            </tr>
            <tr>
                <td>a</td>
                <td>b</td>
                <td rowspan = "2">c</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <!--
                <td>3</td>
                -->
            </tr>
        </table>
    </body>
</html>
​

<img srt="图片的属性">

<!--
        bgcloor:设置背景色
        backgroud:设置背景图片
        以上的设置都是对背景进行设置
        <img srt="图片的属性">
        1.设置图片宽度和高度的时候，只设置宽度，高度会进行等比例缩放。
        2.img标签就是图片标签
        3.src属性是图片的路径
        4.width设置宽度，height设置高度
        5.title设置鼠标悬停时显示的信息。
        6.alt设置图片加载失败时显示的提示信息。
    
    -->

超链接，热链接

<!doctype html>
<html>
    <head>
        <title>超链接，热连接</title>
    </head>
    <body>
        <!--
        href:hot references 热引用
        href属性后面一定是一个资源的地址
        href后面的路径可以是绝对路径也可以是相对路径，可以是网络中某个
        资源的路径，也可以是本地某个资源的路径
        -->
        <!--
            超链接的特点：
            有下划线
            鼠标停留在超链接上面显示小手形状
            点击超链接之后还能跳转页面
​
        -->
        <a href = "http://www.baidu.com">百度</a>
        <a href ="http://www.jd.com">百度新闻</a>
        <a href ="http://www.126.com">百度新闻</a>
        <a href ="http://www.tmall.com">百度新闻</a>
        <!--
            超链接有一个targer属性
                可取值：
                 _blank:新窗口
                 _self:当前窗口（默认就是这种方式）
                 _top:顶级窗口
                 _parent:父窗口
        
        -->
        <!--
            超链接的作用：
                通过超链接可以从游览器向服务器发送请求。
                游览器向服务器发送数据（请求：request)
                服务器向游览器发送数据（响应：response)
                B/S结构的系统：每一个请求都会对应一个响应。
                B--请求--s
                s---响应---b
                用户点击超链接和用户在游览器地址栏上直接输入URL有什么区别
                本质上没有区别，都是向服务器发送请求。
                从操作上来讲，超链接使用更方便。
        -->
        <a href = "https://www.hao123.com/" target = "_self">
        <a href = "https://www.hao123.com/" target = "_self">
    </body>
</html>

表单（重要）

<!doctype html>
<html>
    <head>
        <title>表单form</title>
    </head>
    <body>
        <!--
            1.表单有什么用？
                收集用户信息，表单展现之后，用户填写表单，点击提交按钮提交数据给服务器
            2.怎么画一个表单
                使用form标签画表单
            3.一个网页中可以有多个表单form
            4.表单最终是需要提交数据给服务器的,form标签有一个action属性，这个属性用来指定服务器地址
                action属性用来指定数据提交给哪个服务器
                action属性和超链接中的href属性一样，都可以向服务器发送请求（request）
            5 http://192.168.111.3:8080/oa/save 这是请求路径，表单提交数据最终提交给 192.168.111.3机器上的8080端口对应的软件
        -->
        <!--
            form表单method属性：
                get:采用get方式提交的时候，用户提交的信息会显示在游览器的地址栏上
                post:采用post方式提交的时候，用户提交的信息不回显示在游览器地址栏上。
                当用户提交的信息中含有敏感信息，例如，密码，建议采用post方式提交。
            method属性不指定，或者指定get，这种情况下都是get
            只有当method属性指定为post的时候才是Post请求。
            剩下所有的请求都是get请求。
​
            post提交的时候提交的数据格式和get还是一样的，只不过不在地址栏上显示出来
            post提交的数据还是name=value&name=value....
        -->
        <form action = "http://192.168.111.3:8080/oa/save" method="post">
        <!--画一个提交按钮，这个按钮可以提交表单-->
        <!--画按钮可以使用input输入域，type = "submit"的时候表示该按钮是一个提交按钮，具有提交表单的能力-->
        <!--对于按钮来说，按钮的value属性用来提交按钮上显示的文本信息-->
            <input type = "submit"/>
            <!--这是一个普通按钮，不具备提交表单的能力-->
            <input type = "button"value ="设置按钮上显示的文本"/>
        </form>
        <form action="http://localhost:8080/jd/register">
            用户名
            <input type="text" name="username"/>
            <br>
            密码
            <input type="text" password = "userpwd" />
            <br>
            确认密码
            <input type ="password"/>
            <br>
            性别
            <input type = "radio" name = "sex" value ="1" checked/>男
            <input type = "radio" name  ="sex" value ="0"/>女    
            <input type="checkbox" name = "interest"value ="smoke">抽烟
            <input type="checkbox" name = "interest"value ="frink">喝酒
            <input type="checkbox" name = "interest"value ="fireHair">烫头
            <br>
            学历
            <select name  ="grade">
                <option value="gz">高中</option>
                <option value="dz">大专</option>
                <option value="bk" selected>本科</option>
                <option value="ss">硕士</option>
                <br>
            简介<!--文本域，文本域没有value属性，用户体检的内容就是value-->
            <textarea rows ="10" cols="60" name ="introduce"></textarea>
            <br>
            <input type="submit" value="注册"/>
            <input type="reset" value="清空"/>
        </form>
    </body>
</html>

下拉表

<!doctype html>
<html>
    <head>
        <title>下拉表支持多选</title>
    </head>
    <body>
        <select multiple = "multiple" size="2">
            <option>河北省</option>
            <option>河南省</option>
            <option>山东省</option>
            <option>陕西省</option>
        </select>
    </body>
</html>

file控件,readonly,disabled，maxlength

<!doctype html>
<html>
    <head>
        <tilte>file控件,readonly,disabled，maxlength</title>
    </head>
    <body>
        <!--文件上传专用-->
        <input type="file"/>
​
        <form action = "http://localhost:8080/os/save">
            <!--隐藏域，网页上看不到，但是表单一提交的时候数据会自动提交给服务器-->
            <input type ="hidden" name="userid"  value="111"/>
            <!--
                readonly和disable相同点，都是只读不能修改。
                但是readonly可以提交给服务器。disabled数据不会提交（即使name属性也不会提交）
            -->
            用户代码<input = "text" name="usercode"value="110" readonly/>
            <br>
            用户姓名<input = "text" name="username"value="zhangsan" disabled/>
            <br>
            <input type="submit" value="提交"/>
        </form>
        <!--maxlength 设置文本框中可输入的字符数量-->
        <input type="text"  maxlength="3"/>
    </body>
</html>

div和span

<!doctype html>
<html>
    <head>
        <title>HTML中元素的id属性，HTML中的div和span</title>
    </head>
    <body>
        <!--
            1.在HTML文档中，任何元素（节点）都有id属性，id属性是该节点的唯一标识，所以在同一个HTML文档当中id值不能重复。
            2.注意：表单提交数据的时候，只和name有关系，和id无关
            3.id有什么用？
                javascript语言，可以对HTML文档当中的任意节点进行增删改操作
                javascript可以对HTML文档当中的任意节点进行增删改，那么增删改之前需要先拿到这个节点，通常我们通过id来拿节点对象
                id 的存在让我们获取元素（节点）更方便
            4.HTML文档是一棵树，树上有很多节点，每一个节点都是唯一的id。
                javascript只要就是对这棵DOM树上的节点进行增删改
                DOM（Document）树
        -->
        <form id ="myform">
            <input type ="text" id="username" name="username">
            <input type ="password" id="userpwd" name="userpwd">
​
        <!--id就是节点的身份证号码，不能重复-->
​
        <!--
            1.div和span是什么？有什么用？
                div和span都可以称为“图层”
                图层的作用是为了保证页面可以灵活的布局
                图层就是一个一个盒子，div嵌套div就是盒子套盒子
                div和span是可以定位的，只要定下div的左下角的x轴和Y轴坐标即可
            2.其实最早的网页是采用table进行布局的，但是table不灵活，太死板
            现代的网页开发中div布局使用最多，几乎很少使用table进行布局
            3.div和span的区别？
                div独自占用一行（默认情况下）
                span不会肚子占用一行
        -->
    </body>
</html>

history历史记录

<!doctype html>
<html>
    <head>
        <title>history历史记录</title>
            
    </head>
    <body >
    <!--就是返回和前进键-->
        <script type = "text/javascript">
        
        </script>
        <input type = "button" value ="后退" onclick="window.history.back()"/>
        <input type = "button" value ="后退" onclick="window.history.go(-1)"/>
    </body>
</html>
posted @ 2020-10-09 02:23  锁猴  阅读(88)  评论(0)    收藏  举报