0
0

HTML页面常用元素效果实现及其相关配置信息------前端

<!DOCTYPE html>
<!-- 这是HTML的注释 -->
<html lang="en" id="myHtml">
    <head>
        <!-- 这里不是设置了编码,而是告诉浏览器,用什么编码方式打开文件避免乱码 -->
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>HtmlAll</title>
    </head>
    <body bgcolor="grey" background="" id="myBody">
        <!-- h1到H6是html预留的标题字,和word的标题字相同 -->
        <h1>标题</h1>
        <h2>标题</h2>
        <p>黛玉葬花,我来啦</p>
        <p>ABC,Hello</p>
        <br>
        <!-- 这里的color和width都是属性 -->
        <hr color="green" width="50%">
        <!-- 语法松散 -->
        <a href="#">你好</a>
        <!-- 预留格式用pre隔起来 -->
        <pre>
            <p>黛玉葬花,我来啦</p><h1>标题</h1>
        </pre>
        <del>删除字</del>
        <ins>插入字</ins>
        <b>粗体字</b>
        <i>斜体字</i>
        10<sup>右上角</sup>
        10<sub>右下角</sub>
        <font color="red" size="50">字体标签</font>
        <br>
        <!-- 实体符号特点是&开始;结束,lt是小于,gt是大于 -->
        &lt;a&lt;小于b大于&gt;c&gt;
        <br>
        空&nbsp;格&nbsp;号
        <!-- 设置表格边框为1像素 -->
        <!-- thead,tbody,tfoot不是必须的,只是为了方便我们进行JS代码的编写 -->
        <table border="5px" width="500px" height="200px">
            <!-- align设置对齐方式 -->
            <!-- TH也是单元格标签,自带居中和加粗 -->
            <thead>
                <tr>
                    <th>员工编号</th>
                    <th>员工薪资</th>
                    <th>部门名称</th>
                </tr>
            </thead>
            <tbody>
                <tr align="center">
                    <td>a</td>
                    <td>a</td>
                    <td>a</td>
                </tr>
                <tr>
                    <!-- rowspan是上下合并,最好删除下面的那个 -->
                    <!-- colspan是左右合并,对删除无要求,因为在同一个行内 -->
                    <td  colspan="2" align="center">a</td>
                    <td rowspan="2" align="center">a</td>
                </tr>
                <tr align="center">
                    <td>a</td>
                    <td>a</td>
                </tr>
            </tbody>
            <!-- 便于以后进行JS代码的编写 -->
            <tfoot>
                <tr align="center">
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                </tr>
            </tfoot>
        </table>
        <img src="1.png" width="100px" title="图片1" alt="图片找不到喔">
        <br>
        <!-- 图片不要设置高度,设置高度会失真,设置宽度即可,会自动缩放的 -->
        <img src="1.png" width="100px" title="图片2">
        <a href="www.baidu.com">百度</a>
        <a href="https://www.hao123.com">
            <!-- 浏览器上输入一个地址,我们称为URL统一资源定位符 -->
            <img src="1.png" width="200px" title="hao123"/>
            <!-- 超链接的作用就是浏览器向服务器发送请求 -->
            <!-- 本质没区别,就是超链接更加方便罢了 -->
        </a>
        <!-- 有序列表 -->
        <!-- 无序列表 -->
        <ul type="circle">
            <li>中国
                <ul type="square">
                    <li>北京
                        <ul type="disc">
                            <li>东城区</li>
                            <li>西城区</li>
                            <li>海淀区</li>
                            <li>朝阳区</li>
                        </ul>
                    </li>
                    <li>天津</li>
                    <li>上海</li>
                </ul>
            </li>
            <li>美国</li>
            <li>日本</li>
        </ul>
        <ol type="a">
            <li>水果
                <ol type="I">
                    <li>苹果</li>
                    <li>西瓜</li>
                    <li>桃子</li>
                </ol>
            </li>
            <li>蔬菜
                <ol type="i">
                    <li>西红柿</li>
                    <li>黄瓜</li>
                </ol>
            </li>
            <li>甜点</li>
        </ol>
        <br>
        <form action="/baidu" method="post">
            <!-- 表单请求路径 -->
            用户名<input type="text" name="username"/><br>
            密码<input type="password" name="password"/><br>
            <input type="submit" value="submit" /><br>
        </form>
        <form action="http://www.baidu.com">
            <input type="submit" value="百度"/>
            <input type="text" name="122" value="123"/>
        </form>
        <form action="/baidu" method="post">
        <!-- 如果我们需要提交就一定要加name,因为提交格式是name=value -->
        <!-- 包括submit在内都是如此 -->
        <table>
            <tr align="center">
                <td>用户名</td>
                <td><input type="text" name="username"/></td>
            </tr>
            <tr align="center">
                <td>密码</td>
                <td><input type="password" name="password"/></td>
            </tr>
            <tr align="center">
                <td colspan="2">
                    <input type="submit" value="提交" />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="reset" value="清空" />
                </td>
            </tr>
        </table>
        </form>
        <form action="/oa/index.html">
            用户名
            <input type="text" name="username"/>
            <br>
            密码
            <input type="password" name="password"/>
            <br>
            确认密码
            <input type="password"/>
            <br>
            性别
            男<input type="radio" name="gender" value="男" checked/>
            女<input type="radio" name="gender" value="女"/>
            <br>
            兴趣爱好
            抽烟<input type="checkbox" name="interest" value="Smoke"/>
            喝酒<input type="checkbox" name="interest" value="Wine"/>
            烫头<input type="checkbox" name="interest" value="Hair"/>
            <br>
            学历
            <!-- 下拉列表,最终提交的也是name和value -->
            <select name="grade">
                <option value="senior">高中</option>
                <option value="eng">大专</option>
                <option value="uni" selected>本科</option>
                <option value="doct">硕士</option>
            </select>
            <br>
            简介
            <textarea rows="10" cols="60" name="introduction"></textarea>
            <br>
            <input type="submit"/>
        </form>
        <!-- 下拉列表怎么支持多选 -->
        <form>
            <select multiple="multiple" size="5">
                <!-- size用来设置选项条数 -->
                <option>河北省</option>
                <option>河南省</option>
                <option>山东省</option>
                <option>山西省</option>
            </select>
            <!-- file控件文件上传专用 -->
            <input type="file"/>
            <!-- 隐藏域,网页中不显示,但是会跟表单一起提交 -->
            <input type="hidden" name="userId" value="111"/>
            <!-- get还是会显示的 -->
            <input type="submit"/>
        </form>
        <form action="/OA/Test">
            <!-- 能看到改不了 -->
            用户名<input type="text" value="skajdka" readonly/>
            <!-- 能看到互动不了,而且不会提交上去 -->
            密码<input type="text" value="skjczjcz" disabled/>
            <input type="submit"/>
        </form>
        <!-- input控件的maxlength控件 -->
        <!-- 设置最大的长度 -->
        <input type="text" maxlength="3"/>
        <!-- 在这个HTML文档中,任何元素(节点)都有ID属性,ID是其唯一属性,不能重复 -->
        <form id="myForm">
            <input type="tel" name="tel" id="tel"/>
            <input type="username" name="username" id="username"/>
        </form>
        <div>
            我是一个div
        </div>
        <span>我是一个Span</span>
        <!-- span不会独自占用一行 -->
        <span>我是一个Span</span>
        <div>
            我是一个div
            <div>Test</div>
        </div>
    </body>
</html>
<!DOCTYPE html> <html lang="en" id="myHtml"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HtmlAll</title> </head> <body bgcolor="grey" background="" id="myBody">

标题

标题

黛玉葬花,我来啦

ABC,Hello


你好 
             
黛玉葬花,我来啦
标题
删除字 插入字 粗体字 斜体字 10右上角 10右下角 字体标签
<a<小于b大于>c>
空 格 号
员工编号 员工薪资 部门名称
a a a
a a
a a
1 2 3
图片找不到喔
百度
  • 中国
    • 北京
      • 东城区
      • 西城区
      • 海淀区
      • 朝阳区
    • 天津
    • 上海
  • 美国
  • 日本
  1. 水果
    1. 苹果
    2. 西瓜
    3. 桃子
  2. 蔬菜
    1. 西红柿
    2. 黄瓜
  3. 甜点

<form action="/baidu" method="post"> 用户名<input type="text" name="username"/>
密码<input type="password" name="password"/>
<input type="submit" value="submit" />
</form> <form action="http://www.baidu.com"> <input type="submit" value="百度"/> <input type="text" name="122" value="123"/> </form> <form action="/baidu" method="post">
用户名 <input type="text" name="username"/>
密码 <input type="password" name="password"/>
<input type="submit" value="提交" />        <input type="reset" value="清空" />
</form> <form action="/oa/index.html"> 用户名 <input type="text" name="username"/>
密码 <input type="password" name="password"/>
确认密码 <input type="password"/>
性别 男<input type="radio" name="gender" value="男" checked/> 女<input type="radio" name="gender" value="女"/>
兴趣爱好 抽烟<input type="checkbox" name="interest" value="Smoke"/> 喝酒<input type="checkbox" name="interest" value="Wine"/> 烫头<input type="checkbox" name="interest" value="Hair"/>
学历 <select name="grade"> <option value="senior">高中</option> <option value="eng">大专</option> <option value="uni" selected>本科</option> <option value="doct">硕士</option> </select>
简介 <textarea rows="10" cols="60" name="introduction"></textarea>
<input type="submit"/> </form> <form> <select multiple="multiple" size="5"> <option>河北省</option> <option>河南省</option> <option>山东省</option> <option>山西省</option> </select> <input type="file"/> <input type="hidden" name="userId" value="111"/> <input type="submit"/> </form> <form action="/OA/Test"> 用户名<input type="text" value="skajdka" readonly/> 密码<input type="text" value="skjczjcz" disabled/> <input type="submit"/> </form> <input type="text" maxlength="3"/> <form id="myForm"> <input type="tel" name="tel" id="tel"/> <input type="username" name="username" id="username"/> </form>
我是一个div
我是一个Span 我是一个Span
我是一个div
Test
</body> </html>
标签： 前端 javascript html
本文转载自: https://blog.csdn.net/2201_75960169/article/details/134157544
版权归原作者 旧约Alatus 所有， 如有侵权，请联系我们删除。
登录后发布评论

“HTML页面常用元素效果实现及其相关配置信息------前端”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航