Web前端学习(一)基本属性用法整理

Html基本用法

1.Title标签

<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>

2.标题与段落

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

<p>本文主要讲述什么......</p>

3.水平线与换行符

<body>
    水平线:hr
    <hr/>
    换行符:br
    <hr/>
    换行符1
    换行符2
    <br/>
    换行符3
</body>

4.创建转义符

<body>
    空格:&nbsp;
    <br/>
    大于:&gt;
    <br/>
    小于:&lt;
<br/>
</body>

5.链接

<body>
    <a href="//www.baidu.com">点击我,访问百度</a>
    <a href="//www.baidu.com" target="_blank">点击我,在新窗口中访问百度</a>
</body>

6.图片标签

<body>
     <!--
        img标签:
            src     图片的地址
            alt     如果图片加载异常,显示的文字
    -->
    <img src="mv.jpg" alt="图片加载失败" width="400" height="300">
    <img src="mv1.jpg" alt="图片加载失败">
</body>

7.表格

<body>
     <!--
        table标签:
            border      边框
            width       宽度
            tr          行
            th          表头
            td          普通列
    -->
    <table border="1px" width="300px">
        <tr>
            <th>表头1</th>
            <th>表头2</th>
        </tr>
        <tr>
            <td>普通列1</td>
            <td>普通列2</td>
        </tr>
    </table>
</body>

8.列表

<body>
     <!--
        ul  无序列表
        ol  有序列表
        li  列表项
    -->
    <ui>
        <li>无序列表1</li>
         <li>无序列表2</li>
         <li>无序列表3</li>
    </ui>

    <ol>
         <li>有序列表1</li>
         <li>有序列表2</li>
         <li>有序列表3</li>
    </ol>

</body>

9.常见的无意义标签

<body>
     <!--
        div     占用整行
        span    不占用整行,长度取决于内部元素的长度
    -->
    <div>div标签1</div>
    <div>div标签2</div>
    <hr/>
    <span>span标签1</span>
     <span>span标签2</span>

</body>

10.表单

<body>
     <!--
        form标签
            action      提交地址
            method      请求方式(get或post,默认get)
            enctype="multipart/form-data"   如果提交文件,需要添加这个参数
    -->
     <!--
        input标签
            1.文本框   type="text"
            2.密码框   type="password"
            3.单选框   type="radio"
            4.复选框   type="checkbox"
            5.文件框   type="file"
            6.按钮     type="button"
            7.提交     type="submit"
            8.重置     type="reset"
    -->
    <form action="#" method="post" enctype="multipart/form-data">
        1.用户名(文本框text):
         <input type='text' name="username">
        <br/><br/>
        2.密码(密码passworld):
         <input type="password" name="passworld">
        <br/><br/>
        3.单选框(单选框radio):
         男<input type="radio" name="gender" value="0">
         女<input type="radio" name="gender" value="1">
        <br/><br/>
        4.复选框(复选框checkbox):
        web<input type="checkbox" name="hobby" value="web">
        python<input type="checkbox" name="hobby" value="python">
        <br/><br/>
        5.文件(文件file):
        <input type="file" name="imge">
        <br/><br/>
        6.按钮(按钮button):
        <input type="button" value="空按钮">
        <br/><br/>
        7.提交(提交submit):
        <input type="submit" value="提交按钮">
        <br/><br/>
        8.重置(重置reset):
        <input type="reset" value="重置">


    </form>
</body>

get请求是一个不安全的请求方式,它会把数据封装在url当中,例如:用户登录:它会把用户名和密码封装在url当中;
post请求是把数据以加密的方式封装在head当中,是一种安全的请求方式

发布了10 篇原创文章 · 获赞 0 · 访问量 102

猜你喜欢

转载自blog.csdn.net/taochaocaj/article/details/103853876
今日推荐