前端之head标签,基本标签,div和span,常用标签,表单标签

一、head标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="icon" href="https://www.jd.com/favicon.ico">
    <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
    <meta name="description" content="老男孩培训机构是由一个很老的男孩创建的">
    <meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">
</head>
<body>
yuan
</body>
</html>

二、基本标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<hr>

<h3>鹅鹅鹅</h3>
鹅鹅鹅,<br>
曲项向天歌,<br>
白毛浮绿水,<br>
红掌拨清波.
<hr>
<h3>鹅鹅鹅</h3>
<p>鹅&nbsp;&nbsp;鹅鹅,</p>
<p>曲项向天歌,</p>
<p>白毛浮绿水,</p>
<p>红掌拨清波.</p>
<hr>
ALEX <b>ALEX</b> <strong>ALEX</strong> <i>ALEX</i>  <strong><i>ALEX</i></strong>
2 <sub>3</sub>
2 <sup>3</sup>
<hr>
&pi;

</body>
</html>

三、div和span

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            font-size: 28px;
            font-weight: bolder;
            color: red;
            background-color: green;
            font-style: italic;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>

alex
<div>alex</div>
<span>alvin</span>
<span>egon</span>

</body>
</html>

四、常用标签(img和超链接、列表标签、表格标签)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h3>img和超链接标签</h3>

<a href="http://127.0.0.1:8800" target="_blank">点击</a>
<a href="http://127.0.0.1:8800" target="_blank"><img src="meinv.jpg" alt="美女" title="美女图片" height="600" width="960"></a>

<h3>列表标签</h3>

<ul>
    <li>111</li>
    <li>111</li>
    <li>111</li>
</ul>

<ol>
    <li>111</li>
    <li>111</li>
    <li>111</li>
</ol>

<dl>
    <dt>河北省</dt>
    <dd>保定</dd>
    <dd>石家庄</dd>
    <dd>廊坊</dd>
</dl>
<h3>表格标签</h3>

<table border="1" cellspacing="5" cellpadding="3" style="border: 1px solid red">
    <thead>
         <tr>
             <th>姓名</th>
             <th>年龄</th>
             <th>薪水</th>
         </tr>
    </thead>
    <tbody>
           <tr>
               <td>张三</td>
               <td>23</td>
               <td rowspan="2">3000</td>
           </tr>
            <tr>
               <td>张三</td>
               <td>23</td>

           </tr>
           <tr>
               <td colspan="2" style="text-align: center">张三 23</td>

               <td>3000</td>
           </tr>
    </tbody>
</table>

</body>
</html>

五、表单标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h3>注册页面</h3>

<form action="http://127.0.0.1:8800" method="post">
    <p>
        <label for="abc">姓名</label>
        <input type="text" name="user" id="abc" maxlength="5">

    </p>
    <p>密码 <input type="password" name="pwd" ></p>
    <div>
        爱好:
        <input type="checkbox" name="hobby" value="lanqiu" checked>篮球
        <input type="checkbox" name="hobby" value="zuqiu">足球
        <input type="checkbox" name="hobby" value="shuangseqiu">双色球
    </div>
    <div>
        性别:
        <input type="radio" name="gender" value="male">男
        <input type="radio" name="gender" value="female">女
        <input type="radio" name="gender" value="qita">其他
    </div>
    <input type="hidden" name="token" value="123asd2342">
    <!--<input type="file">-->
    <div>
        籍贯:
        <select name="pro" size="3" multiple>
            <option value="hebei">河北省</option>
            <option value="hunan" selected="selected">湖北省</option>
            <option value="beijing" selected="selected">北京省</option>
        </select>
    </div>
    <div>
        <textarea name="per" cols="50" rows="10" placeholder="个人简介"></textarea>
    </div>
    <hr>
    <div>
        <input type="button" value="按钮" onclick="alert(123)">
        <input type="reset">
    </div>

    <input type="submit">

</form>

</body>
</html>

原文地址:https://www.cnblogs.com/youhongliang/p/12233455.html

时间: 2024-10-13 02:15:27

前端之head标签,基本标签,div和span,常用标签,表单标签的相关文章

&lt;div&gt;标签仿&lt;textarea&gt;。contentEditable=‘true’,赋予非表单标签内容可以编辑

需求:web页面需要一个文本输入框.1.该文本输入框默认状态下有个仿‘placeholder’的默认文本提示信息,2.文本框输入状态下其高度会随文本内容自动撑开. 方案选择:1.使用<textarea>标签.但是标签高度不会随文本高度自动撑开,而是出现滚动条.使用JS动态计算文本内容高度赋予<textarea>标签高度. 2.使用<div>或者<p>.<span>等非表单标签,通过赋予其contentEditable='true'属性,是其获得内

表单标签

表单标签:用于提交数据给服务器. 表单标签的跟标签是<form>标签. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <h

Struts2中UI标签之表单标签介绍

1.在Struts2中UI标签的表单标签分为两种:form标签本身和单个表单标签. 2.Struts2表单标签包括:form.textfield.password.radio.checkbox.checkboxlist.select.doubleselect.combobox.optiontransferselect.optgroup.updownselect.textarea.hidden.file.label.submit.token.head.datepicker.reset.richte

SpringMVC学习记录(五)--表单标签

在使用SpringMVC的时候我们可以使用Spring封装的一系列表单标签,这些标签都可以访问到ModelMap中的内容.下面将对这些标签一一介绍. 1.引入标签头文件 在正式介绍SpringMVC的表单标签之前,我们需要先在JSP中声明使用的标签,具体做法是在JSP文件的顶部加入以下指令: <%@taglib prefix="sf" uri="http://www.springframework.org/tags/form" %> 2.form标签 使

Web全栈-表单标签

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单标签</title> </head> <body> <!-- 1.什么是表单? 表单就是专门用来收集用户信息的 2.什么是表单元素? 2.1什么是元素? 在HTML中 标签/标记/元素都是指HTML中的标签 例如: <

☆前端☆---表单标签

表单标签 能够接收用户输入(输入 选择 上传)并将其发送给后端 action控制数据提交的目的地 1.不写的情况下 默认提交到当前页面所在的路径 2.写全路径(https://www.baidu.com) 3.路径后缀(/index/) input input标签就类似于是前端变形金刚 type text:普通文本 password:密文 不展示明文 date:日期 submit:触发提交动作 button:普通按钮 没有实际意义 但是可以通过js绑定事件实现自定义动作 reset:重置表单内容

表单标签动画畅想

引言 今天来看一组表单标签动画效果,希望可以对大家有所帮助,灵感来自于Inspiration for Text Input和Text Input Love,一并致谢. 效果照例放在Codepen,虽少效果较慢,但值得期待.在线编辑,下载收藏. 搭建根基 我们同样使用了haml来简化html书写. #container -(1..15).each do %div.row %label %input{:type=>"text"} %span姓名 %label %input{:type

Struts2中UI标签之非表单标签

1.非表单标签主要用于在页面生成一些非表单的可视化元素,例如Tab页面,输出HTML页面的树形结构等.当然,非表单标签也包含在页面显示Action里封装的信息,非表单标签主要有如下几个: a:生成一个超级连接(link). actionerror:如果Action实例的getActionError()方法返回不为null,则该标签负责输出该方法返回的系列错误. actionmessage:如果Action实例的getActionMessage()方法返回不为null,则该标签负责输出该方法返回的

HTML table、form表单标签的介绍

本篇主要介绍 table.form标签以及表单提交方式. 目录 1. <table> 标签:在HTML 中定义表格布局. 2. <form> 标签:用于创建 HTML 表单. 3. 表单提交方式:介绍get.post方法. 1. <table> 标签 1.1 说明 在HTML 中定义表格布局. 1.2格式 <table> <caption></caption> <tr> <th></th></