1 HTML学习笔记（一)

时间：2019-12-18 18:48:58 阅读：85 评论：0 收藏：0 [点我收藏+]

<div></div>

块级标签，不管内容有多少，都会占满整行。div是HTML中出场率的标签，特点是没有任何属性，可以通过css进行装饰后成为任何一种标签

<span></span>

行内标签，又叫内联标签，有多少占多少，什么属性都不带，可以通过css进行装饰后成为任何一种标签

<input>

文本框标签，包含多个属性，text、password、button、checkbox、radio、file、submit、reset

<label></label>

label 标题标签与input联合运用，增加input的点击范围可直接点击文字就输入 for：映射到input的id

<form></form>

表单标签，表单标签可以理解为载体，承载着所有要向后端提交的数据，通常与input连用,表单提交数据分为get提交和post提交，get提交在url上挂参数，post提交在body中

  <div>
        <form action="/login" method="post" enctype="multipart/form-data">
            <!-- 文本输入框  type-输入框类型，name输入框标记名，value输入框默认赋值，placeholder输入框默认值，输入清空-->
            <!--        label标签与input连用，标明输入框是什么-->
            <label for="username">用户名</label>
            <input type="text" name="username" placeholder="请输入用户名">
            <!--        密码输入框-->
            <label for="password">密码</label>
            <input type="password" name="password" placeholder="请输入密码">
            <input type="button" value="登录">
            <input type="reset" value="重置">
        </form>
    </div>
    <div>
        <p>哈哈哈哈哈哈哈哈哈哈哈这是段落标签</p>
        <span>篮球</span>
        <input type="checkbox" value="1" checked="checked">
        <span>足球</span>
        <input type="checkbox" value="2">
        <span>排球</span>
        <input type="checkbox" value="3">
        <span>红烧茄子</span>
        <input type="radio" name="text" value="1">
        <span>鱼香肉丝</span>
        <input type="radio" name="text" value="2">
        <span>糖醋排骨</span>
        <input type="radio" name="text" value="3">
        <p>上传文件</p>
        <input type="file" name="file">
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </div>
 代码运行效果如下：

<textarea></textarea>

多行文本 textarea 默认值在标签之间

<select></select> <option></option>

select option 下拉框标签，默认选择项在option标签上增加selected属性，select标签加上size属性表示显示多少个，多选属性：multiple

<select></select> <optgroup></optgroup>

对下拉选项进行分组optgroup 分组，label属性是组的名字，不可选择

  <div>
        <h5>多行文本输入</h5>
<!--        多行文本 textarea 默认值在标签之间-->
        <textarea>这是多行文本输入框 </textarea>
    </div>
    <div>
        <p>下拉选项标签-单选</p>
        <select name="city">
            <option value="1" selected="selected">昆明</option>
            <option value="2">深圳</option>
            <option value="3">上海</option>
            <option value="4">北京</option>
        </select>
        <p>下拉选项标签-多选</p>
        <select name="city" multiple="multiple">
            <option value="1" selected="selected">昆明</option>
            <option value="2">深圳</option>
            <option value="3">上海</option>
            <option value="4">北京</option>
        </select>
        <h5 style="display: inline">超过4个就滚动</h5>
        <select name="city" size="4">
            <option value="1">昆明</option>
            <option value="2">深圳</option>
            <option value="3">上海</option>
            <option value="4">北京</option>
            <option value="5" selected="selected">天津</option>
            <option value="6">辽宁</option>
            <option value="7">南京</option>
            <option value="8">杭州</option>
        </select>
        <h5 style="display: inline">下拉选项分组</h5>
        <select name="city" multiple="multiple">
            <optgroup label="北京市">
                <option value="1">
                    北京
                </option>
            </optgroup>
            <optgroup label="江苏省">
                <option value="1">
                    苏州
                </option>
                <option value="1">
                    南京
                </option>
                <option value="1">
                    扬州
                </option>
                <option value="1">
                    无锡
                </option>
            </optgroup>
        </select>
    </div>

代码运行效果如下：

<a></a>

超链接 href属性为跳转的地址，target属性为以什么方式跳转，"_blank"跳转到新tab打开链接，a标签还可以做锚点，通过id进行对应关系的映射去掉a标签的下划线通过属性text-decoration:none

<img>

img 图片标签 src：图片的位置图片跳转通过a标签 alt：当图片加载失败时显示alt的文案 title：鼠标悬浮在图片上显示的文字

 <div>
        <!--    超链接标签-->
        <a href="https://www.baidu.com" style="text-decoration:None">超链无下划线，接当前页面跳转</a>
        <a href="https://www.baidu.com" target="_blank" style="text-decoration: underline">跳转到新的tab页</a>
        <!--图片链接-->
        <img src="http://ui.imdsx.cn/static/image/dsx.jpg" style="height: 200px;width:200px" alt="hahhaa" title="落落落落">
    </div>

<ul></ul>

列表 ul li --- · 形式的列表

<ol></ol>

列表 ol li --- 数字形式的列表

<dl></dl>

分层列表标签， <dd></dd>内层标签； <dt></dt>外层标签

<div class="ul-css">
        <div>
            <h4>列表 ul li.形式的列表</h4>
        </div>
        <div style="display: inline-block">
            <ul>
                <li>第一列</li>
                <li>第二列</li>
                <li>第三列</li>
                <li>第四列</li>
            </ul>
        </div>
        <div class="urmove">
            <div>
                <h4>列表 ol li 数字形式的列表</h4>
            </div>
            <div style="display: inline-block">
                <ol>
                    <li>第一列</li>
                    <li>第二列</li>
                    <li>第三列</li>
                    <li>第四列</li>
                </ol>
            </div>
    </div>
    </div>
    <div style="padding-left: 20px">
                <div><h4>分层列表 dl dd内层 dt外层</h4></div>
                <div>
                    <dl>
                        <dt>黑龙江</dt>
                        <dd>哈尔滨</dd>
                        <dd>牡丹江</dd>
                    </dl>
                    <dl>
                        <dt>北京</dt>
                        <dd>北京</dd>
                    </dl>
                </div>
            </div>

代码运行结果如下：

<table></table>

table 表格标签，thead：表头；th：表头行； tbody：内容；tr：行；td：列；boder：表格的边框； coslpan：td占几列； rowspan：tr占几列

    <div class="body-move" id="table-test">
        <div class="move">
            <h3>&lt;table&gt; &lt;/table&gt;</h3>
            <div><h4>table 表格标签 thead：表头 th：表头行 tbody：内容 tr：行 td：列 boder：表格的边框 coslpan：td占几列 rowspan：tr占几列</h4>
            </div>
            <div>
                <table border="1">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>用例名称</th>
                        <th>执行人</th>
                        <th>编辑</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>1</td>
                        <td>table表格测试</td>
                        <td>大师兄</td>
                        <td><a href="tmp.html">详情</a>&nbsp;<a href="edit.html">编辑</a></td>
                    </tr>
                    <tr>
                        <td>1</td>

                        <!-- colspan等于几就占几列-->
                        <td colspan="2">table表格测试</td>

                        <td><a href="tmp.html">详情</a>&nbsp;<a href="edit.html">编辑</a></td>
                    </tr>
                    <tr>
                        <td>1</td>

                        <!-- rowspan等于几就占几行-->
                        <td rowspan="2">table表格测试</td>

                        <td>大师兄</td>
                        <td><a href="tmp.html">详情</a>&nbsp;<a href="edit.html">编辑</a></td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>大师兄</td>
                        <td><a href="tmp.html">详情</a>&nbsp;<a href="edit.html">编辑</a></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
代码运行结果如下：

1 HTML学习笔记（一)

原文：https://www.cnblogs.com/cocomoly/p/12060507.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)