第二篇博客-img,a,ol,ul,form表单

接着第一篇写，简单的标签省略。这次写下img,a,ol,ul,form。
（1.）img
img标签其实也挺简单的，作用就是引入图片。经常跟a标签一起使用。现在网站通常都有很多图片，但有时受网络等因素影响也会出现图片加载失败的现象，所以建议使用img标签时加上图片代替字

<img src="img/758b2e1c340947ad821bca8382122b00.jpeg" title="这是一个图片" alt="这是图片的代替字"/>
<!--title的作用就是当鼠标滑动到图片区域时出现提示性文字。当图片无法正确显示时alt后的文字就会显示到原图片区域-->

(2.)a标签
a标签通常用于设置超链接。大概经常与div,img,table,iframe,frameset一起使用
href是点击时跳转的地址。
_blank指定跳转的时候打开新页面。
_self和 _top差不多，都是在原页面打开网页
_parent是在父级元素区域打开网页。

<a href="http://www.baidu.com" target="_blank">百度</a>

（3.）
ol和ul其实是可以互相转化的，到时候写css博客的时候再说吧
（4.）form
这个是很重要的，下面直接上代码。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
        </style>
    </head>
    <body>
        <form action="https://www.so.com/s" target="_blank">
            <input type="hidden" name="ie" value="utf-8"/>
            <input type="hidden" name="fr" value="zh"/>
            <input type="hidden" name="src" value="home_zh" />
            <input type="text" name="q" placeholder="请输入查询内容" value="中国" readonly="readonly"/ >
             <!--value的作用是默认填入something,可以在代码手动修改. disabled就不会把东西带到action了，也就是q没有值了
                    readonly是可以把东西带过去，但不能修改q的值，也就是查询的东西不能改.不同的搜索引擎的name是不一样的，百度的
                    是wd -->
            <input type="submit" value="搜索" id="qq" />
            <br />
            <input type="password" placeholder="请输入密码" />
            <br />
            <textarea rows="15" cols="15" id="d"></textarea>/*这里最好不用height width*/
            <br />


            <!--描述：接下来是下拉列表 -->
            <select name="grad">
                <option value="1">一年级</option>
                <option value="2" selected="selected">二年级</option>
                                                                  <!--selected="selected只能用在下拉列表，用来默认选中某 -->
                <option value="3">三年级</option>
            </select>
            <input type="submit" value="提交" />
            <input type="reset" value="重置"/>


            <!--
                描述：接下来单选按钮
            -->
            <input type="radio" name="sex" value="0" id="male"/><label for="male">男</label>/*name在这里的作用是分组and把value的值传递到action
            <input type="radio" name="sex" value="1" id="female" checked="checked"/><label for="female">女</label>
                     <!--name在这里的作用是分组和传值-->                                                    <!--
                                                                        描述：checked="checked"用在单选和复选框中，用来默认选中项
                                                                         -->
            <br />
            <br />


            <!--
                描述：接下来把单选框的汉字变图片
            -->
            <input type="radio" name="bank" value="0" id="zs" class="p"/><label for="zs"> <img src="img/QQ图片20180723162929.gif"/></label>
            <input type="radio" name="bank" value="1" id="ny" class="p" checked="checked"/><label for="ny" ><img src="img/QQ图片20180723162946.gif"/></label>
            <br />
            <br />


            <!--
                描述：接下下来是复选框
            -->
            <input type="checkbox" name="hobby" value="3" id="op"/><label for="op">篮球</label>
            <input type="checkbox" name="hobby" value="4" id="ppp" /><label for="ppp">乒乓球</label>
            <input type="checkbox" name="hobby" value="5" id="lp"/><label for="lp">足球</label>
            <br />
            <br />



            <!--
                描述：接下来是文件框
            -->
            <input type="file" />
            <br />
        </form>
    </body>
</html>

关于input中的placeholder的文字样式，缩进可以用css规定。如：
input{
text-indent:10px;
}

第二篇博客-img,a,ol,ul,form表单

猜你喜欢