html的body标签

1 标题标签 h1~h6

2 文本样式标签

3 段落标签 p

4 超链接标签 a

5 列表标签 ul ol

6 盒子标签 div

7 图片标签 img

8 span标签

9 表格标签 table

10 表单标签 form

11 表单控件 button textarea select option input label

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>注册信息</title>

        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

        <link rel="icon" href="./1.ico">
    </head>

    <body>

        <!-- 标题标签
            h1-h6 不同级别的字体,从大到小。    块状元素-->


        <h1>lalallala</h1>
        <h2>lalallala</h2>
        <h3>lalllaaaa</h3>
        <h4>lalallala</h4>
        <h5>lalalalla</h5>
        <h6>lalallala</h6>

        <!-- 文本样式标签


             1. `<b></b>`:加粗    
             2. `<i></i>`:斜体
             3. `<u></u>`:下划线
             4. `<s></s>`:删除线
             5. `<sup></sup>`:上标 
             6. `<sub></sub>`:下标

             用于强调一段化话中的某些:
              7 `<em></em>`默认会用斜体表示
              8 `<strong></strong>`会用粗体来表示 


              9 `<br>`换行
              10 `<hr>`用横线分割

        -->


        <!-- 可以进行多重嵌套 -->
        <h1>
            <u><i>lallalala</i></u>
            <sup>haha</sup>
        </h1>


        <!-- 段落标签p
            块状元素 -->

         
        <p>lfdslafsajf<br>lhaemkhnjajsd<em>snvsf<hr>dsfdsf</em>hakfj<br>cnsl<strong>sfesf</strong>adfjiesafljasdsljfe</p>
        <p><hr>fefewb<hr>scfdvf<hr>dscs<hr>sdsfcsf<hr>dsdsc<hr>sdsdsd<hr>sdsds<hr>dsdswd<hr>dsd<hr>ds<hr>sds<hr>scs<hr>scc</p>


        <!-- 超链接标签
            a 行内元素 -->


        <!-- _bank 在新的网站打开
             _self 在当前网站打开 -->

        <a href="https://www.baidu.com" target="_bank" title="路飞学城">路飞学城</a>
        <a href="https://www.baidu.com" target="_self" title="路飞学城">路飞学城</a>
        <!-- 下载包要先存在,邮箱要先登录着 -->
        <a href="a.zip">下载包</a>
        <a href="mailto:[email protected]">联系我们</a>
        <!-- 返回顶部 -->
        <a href="#">跳转顶部</a>

        <!-- 一般在div中会设置id -->
        <a href="#id=1">跳转id=1</a>
        <!-- 执行js代码 -->
        <a href="javascript:alert()">执行js</a>


        <!-- 列表标签
            ul 无序  ol 有序 -->


        <!--  type:列表标识的类型

                disc:实心圆(默认值)
                circle:空心圆
                square:实心矩形
                none:不显示标识 

        -->
        <!-- type:列表标识的类型
            1:数字
            a:小写字母
            A:大写字母
            i:小写罗马字符
            I:大写罗马字符 

        -->


        <ul type="square">
            <li>dafsdfd</li>
            <li>sdfcsevf</li>
            <li>dsafas</li>
        </ul>

        <ol type="a">
            <li>fsfasf</li>
            <li>sdfaa</li>
            <li>fsfesf</li>
        </ol>


        <!-- 盒子标签
            div 用来进行分区 只低于head和body-->


        <div class="lalalla">
            fsafafsagdsk
            fsegesgsbvg
            fesgvsabvbvse
            <h1>fwegfawfawf</h1>
            <ul type="square">
                <li>dafsdfd</li>
                <li>sdfcsevf</li>
                <li>dsafas</li>
            </ul>
            
        </div>


        <!-- 图片标签
            img 行内块状元素 可同行,可定义长宽 -->


            <!-- 1 src设置的图片地址可以是本地的地址也可以是一个网络地址。
                 2  图片的格式可以是png、jpg和gif。
                 3 alt属性的值会在图片加载失败时显示在网页上。
                 4 还可以为图片设置宽度(width)和高度(height),不设置就显示图片默认的宽度和高度
                 5 浏览器查看效果:行内块元素,与行内元素在一行内显示
            -->


        <img src="data:image/jpeg;base64,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" alt="谷歌" style="width: 200px;height: 200px">
        <img src="./1.png" alt="hahh" style="width: 200px;height: 200px">
        <img src="./2.png" alt="hahh" style="width: 200px;height: 200px">


        <!-- 其他的一些标签 -->


        <!-- span标签
            可以单独摘出某块内容,结合css设置相应的样式  -->


        <div>
            <span>sdfsgvsdfe</span>
            sdfsgasdfs
            <img src="./2.png" alt="hahh" style="width: 200px;height: 200px">
        </div>
        <!-- <br>标签
            用来将内容换行 -->
        <p>fdsfaasf<br>fsfsfsf</p>
        <!-- <hr>标签
            用来在HTML页面中创建水平分隔线,通常用来分隔内容 -->
        <p>fdsfaasf<hr>fsfsfsf</p>


        <!-- 特殊符号
            HTML代码中的所有连续的空行(换行)也被显示为一个空格 -->

        <p>
            fsd     fsf


            ffdsf
        </p>


        <!-- 表格标签
            table -->


        <!-- 属性
            border=“1” 显示边框
            cellspacing=“0” 取消间隙 -->
        <!-- 合并
            rowspan 合并行(竖着合并) tr套td时
            colspan 合并列(横着合并) td套tr时
        -->

       thead表头   tbody表主体    tfoot表尾

       tr行  th列(表头)    tr行  td列(表主体)


        <div class="table">
            <table border="1" cellspacing="0">
                <!-- 表头 thead-->
                <thead>
                    <!-- 表头行 tr-->
                    <tr>
                        <!-- 表头列 th-->
                        <th></th>
                        <th>
                            monday
                        </th>
                        <th>
                            tuseday
                        </th>
                        <th>
                            thursday
                        </th>
                    </tr>
                    
                </thead>
                <!-- 表体 tbody-->
                <tbody>
                    <!-- 表头行 tr-->
                    <tr>
                        <!-- 表头列 td-->
                        <td rowspan="2">am</td>
                        <td>heheh</td>
                        <td>lallf</td>
                        <td>fsfgsdf</td>
                    </tr>
                    <tr>
                        <td>heheh</td>
                        <td>lallf</td>
                        <td>fsfgsdf</td>
                    </tr>
                    <tr>
                        <td>pm</td>
                        <td>heheh</td>
                        <td>lallf</td>
                        <td>fsfgsdf</td>
                    </tr>
                </tbody>
                <!-- 表尾 tfoot-->
                <tfoot>
                    <tr></tr>
                </tfoot>
            </table>
            
        </div>


        <!-- 表单标签 
            form-->
        <!-- 


            action 定义表单被提交发生的动作,提交给服务器处理程序的地址
            method 定义表单提交数据的方式
                get 明文提交,提交内容会显示在地址上,安全性低
                    数据最大为2KB
                post 隐式提交 
                     无大小限制
            enctype 编码类型
                    取值:application/x-www-form-urlencoded (默认)允许提交普通字符、特殊字符
                          multipart/form-data 允许将文件提交给服务器
                          text/plain 只允许提交普通字符

            Note:提交文件,method用post,enctype用multipart/form-data
        -->    


        <!-- 表单控件


           button按钮
           textarea文本域
                 允许用户录入多行数据
                 cols 列数
                 rows 行数
           select和option选项框    
                 select
                     size 大于1为滚动列表,否则为下拉菜单
                     multiple 允许多选
                 option
                     value 选项的值
                     selected 预选,默认是第一项
             input
                 type
                     button
                     text 明文显示用户输入的数据
                     password 密文
                     radio 单选按钮 checkbox复选框 checked设置后默认选中
                     submit 提交给服务器
                     file 上传文件
                 value
                     控件值,传给服务器的数据
                 name
                     控件名称,服务器用
                 disable
                     禁用该控件
                 id
                     id地址,一般与label关联
                 placeholder
                     文本框中默认内容
             label
                 关联文本与表达元素,点击文本如同点击表单元素
                 for 表示与该label关联的表单控件元素的id值-->

 

        <div class="form">
            <form action="http://www.baidu.com" method="get">
                <!-- usename -->
                <p>
                    <label for="user">用户名</label>
                    <input type="text" name="username" id="user" placeholder="请输入用户名">
                </p>
                <!-- password -->
                <p>
                    <label for="password">密码</label>
                    <input type="password" name="password" id="password" placeholder="请输入密码">
                </p>
                <!-- gender -->
                <p>
                    <input type="radio" name="gender" value="男" checked>男
                    <input type="radio" name="gender" value="女">女
                </p>
                <!-- hobby -->
                <p>
                    <input type="checkbox" name="hobby" value="111" checked>111
                    <input type="checkbox" name="hobby" value="222">222
                    <input type="checkbox" name="hobby" value="333">333
                    <input type="checkbox" name="hobby" value="444">444
                </p>
                <!-- put file -->
                <p>
                    <input type="file" name="textfile">
                </p>
                <!-- textarea -->
                <p>
                    <textarea rows="5" cols="20" name="text" placeholder="请输入自我介绍"></textarea>
                </p>
                <!-- select and option -->
                <p>
                    <select size="2" name="sel" multiple="">
                        <option value="北京" selected>北京</option>
                        <option value="南京">南京</option>
                        <option value="天津">天津</option>
                    </select>
                </p>

            </form>
        </div>

    </body>
</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章