HTML标签

原创

桥北 2019-09-10 21:58:01 博主文章分类：前端 ©著作权

©著作权归作者所有：来自51CTO博客作者桥北的原创作品，请联系作者获取转载授权，否则将追究法律责任

HTML标签

代码实例：

1 块级标签和内敛标签

<!DOCTYPE html>
<html lang="en">
<head>
<!--    <meta http-equiv="refresh" content="2;URL=http://www.baidu.com" charset="UTF-8">-->
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>安河桥</title>

    <link rel="stylesheet" href="">

    <style></style>

</head>
<body>

<span><font size="33" color="yellow" >yfjs</font></span>

<div>
    <div><font size="20" color="red">rsx</font></div>
    <span><font size="30" color="orange" >大家都好</font></span>
</div>


             <font size="19" color="purple">rsx >yf <xy </font>

             <p><font size="19" color="blue">rsx&" '</font></p>
             <p><font size="12" color="#ff4500">rsx©™</font></p>

<p><font size="40" color="#adff2f"><p></font></p>

2 img标签和a标签

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>RNG never give up</title>

    <style>
        .c1{
            height: 1000px;
            width: 200px;
            background-color: orange;
        }
    </style>

</head>
<body>

<div>RNG never give up</div>
<a name="top">RNG who is you winner</a><p></p>

<img src="1.jpg" alt="RNG" title="永不言弃" width="" height="">

<a rel="nofollow" href="https://image.baidu.com/search/index?tn=baiduima
ge&ipn=r&ct=201326592&cl=2&lm=-1&st=-1&fm=result&fr=&sf=1&fmq=
1568021205974_R&pv=&ic=&nc=1&z=&hd=&latest=©right=&se=1&showtab=0&fb=0&width=&height=&face=0&i
stype=2&ie=utf-8&sid=&word=rng%E5%A3%81%E7%BA%B8&f=3&oq=rng&rsp=0" target="_blank">RNG图片</a>

<div class="c1"></div>
<a rel="nofollow" href="#top">回到顶部</a>

</body>
</html>

　　target：

_blank表示在新标签页中打开目标网页
_self表示在当前标签页中打开目标网页

3 列表标签

1.无序列表

type属性：

disc（实心圆点，默认值）
circle（空心圆圈）
square（实心方块）
none（无样式）

2.有序列表

type属性： start是从数字几开始

1 数字列表，默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马

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

<ul type="square">
    <li>rsx</li>
    <li>yf</li>
    <li>xy</li>
</ul>

<ol type="I" start="10">
    <li>rsx</li>
    <li>yf</li>
    <li>xy</li>

</ol>

</body>
</html>

4 table标签

属性:

border: 表格边框.
cellpadding: 内边距（内边框和内容的距离）
cellspacing: 外边距.（内外边框的距离）
width: 像素百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>Title</title>

</head>
<body>

<table border="51" cellpadding="10" cellspacing="10">
       <thead>
            <tr>
                <th>name</th>
                <th>age</th>
                <th>hobby</th>
            </tr>

       </thead>
       <tbody>
            <tr>
                <td>rsx</td>
                <td>13</td>
                <td>Python</td>
            </tr>
            <tr>
                <td>yf</td>
                <td>12</td>
                <td>--</td>
            </tr>
            <tr>
                <td>xy</td>
                <td>14</td>
                <td>GO</td>
            </tr>
       </tbody>
</table>

5 input标签

type属性:

text:普通文本输入框 password:密文

date:日期选择框 radio:单选框 checkbox:复选框 submit:提交按钮 button:普通按钮 reset:重置 file:文件上传 hidden:隐藏input框

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

<input type="hidden">

用户名:<input type="text">
密码:<input type="password">

<input type="radio" name="sex" value="1" >男
<input type="radio" name="sex" value="2" checked>女


<input type="checkbox" name="hobby" value="1">1
<input type="checkbox" name="hobby" value="2">2
<input type="checkbox" name="hobby" value="3">3
<input type="checkbox" name="hobby" value="4" checked>4

<div>
    <input type="date">
</div>

<div>
    <input type="file">
</div>


</body>
</html>

6 form表单

　功能：

　　　　表单用于向服务器传输数据，从而实现用户与Web服务器的交互

　　　　表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。

　　　　表单还可以包含textarea、select、fieldset和 label标签。

　　表单属性

属性	描述
accept-charset	规定在被提交表单中使用的字符集（默认：页面字符集）。
action	规定向何处提交表单的地址（URL）（提交页面）。
autocomplete	规定浏览器应该自动完成表单（默认：开启）。
enctype	规定被提交数据的编码（默认：url-encoded）。
method	规定在提交表单时所用的 HTTP 方法（默认：GET）。
name	规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate	规定浏览器不验证表单。
target	规定 action 属性中地址的目标（默认：_self）。

　　表单元素

　　　　基本概念：　　　　HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。　　　　表单一般用来收集用户的输入信息　　　　表单工作原理：　　　　访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。　　　　服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息。

　　　　点击提交按钮，input中type=submit的那个按钮，然后就会将form表单中所有用户输入的内容或者选择的内容（{name属性:值，}）都发给服务端（以我们自己写的那个socket举例，打印一下接收的内容），但是所有的输入标签必须有一个叫做name的属性。

　　　　发现跳到这个页面了：看url的内容，有了我们输入的内容，并且是给你组合起来的，name属性值和你输入的值组合到一起了，通过&符号分隔，并且在路径那里加了个问号

　　　　打印一下socket接收的消息，你就发现已经接受到这些数据了

　　　　　　让用户选择的，必须指定一个value值，要不然后端接收不到内容，用户自己填写的标签，不需要指定value值

　　　　　　然后再点击提交，后端打印一下接收的数据：

　　　　　　但是这样并不好，因为url中显示了你的信息，并且如果内容很多的话，你的地址栏不能够输入那么长的内容，为什么会默认拼接到url里面呢，因为form表单默认是get请求提交内容，我们可以改为post，来看看：post会把所有你提交的信息封装到一个消息体里面，在浏览器上就看不到了，对于小白来说，看着安全一些。

　　　　　　点击提交就跳到这个网址了：

　　　　　　在看后端打印的内容：

　　　　　　你会发现一个post请求：

　　　　　　把内容往后拉，就能看到咱们提交的数据了

　　　　　　那么你看，你的浏览器再你点击提交的时候，获取了你所输入的内容，然后通过网络提交给你的服务端代码程序了。

　　　　　然后我们后端通过提交过来的数据，来做某些事情，该验证的验证，该保存的保存

　　　　　所以记住form表单里面有两个属性：action控制往哪里提交数据、method控制用什么方式提交。

　　　　注意：

　　　　　　form表单提交数据的时候，必须有个submit按钮

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

<input type="hidden">

用户名:<input type="text">
密码:<input type="password">

<input type="radio" name="sex" value="1" >男
<input type="radio" name="sex" value="2" checked>女


<input type="checkbox" name="hobby" value="1">1
<input type="checkbox" name="hobby" value="2">2
<input type="checkbox" name="hobby" value="3">3
<input type="checkbox" name="hobby" value="4" checked>4

<div>
    <input type="date">
</div>

<div>
    <input type="file">
</div>

</body>
</html>