美文网首页前端大牛养成之路
【第四天】03-HTML的内容标签笔记(下)

【第四天】03-HTML的内容标签笔记(下)

作者: 单行道MY | 来源:发表于2017-02-17 23:11 被阅读0次

    1.1   表单标签

    1.1.1    Form标签

    Form标签,表单的域标签,用于包裹整个表单的内容。

    表单就是用户提交数据到后台的一个虚拟单子。

    表单一般由 文本框、下拉列表、单选、多选、文本域等组成。

    Action属性,用于指定当前表单 提交的时候指向后台的地址。

    1.1.2    Input标签

    Input标签是文本框、单选、多选、按钮等。

    Type属性不同的取值决定了input标签的作用。

    文本框:text

    密码框:password

    单选:radio

    多选:checkbox

    按钮:button

    提交按钮:submit

    重置按钮: reset

    Demo:

    <input type="password">

    <input type="radio" name="gender">

    <input type="text">

     

    Input标签的 checked属性,属性值只有一个checked,可以省略属性值,在单选按钮和多选按钮中表示 此按钮被选中。

    1.1.3    Select标签

    Select标签用于下拉列表,或者列表标签。

    选项用option标签来设置,value值只有在后台有用。Option包裹的内容是显示的选项的文本。例如:

     <select name="" id="" multiple>

                <option value="1">公历</option>

                <option value="2">农历</option>

                <option value="2">农历</option>

                <option value="2">农历</option>

             </select>  

     

    Multipe:也是一个单属性。值只有一个multiple。设置了此属性表示select标签表现为 列表标签。否则表示下拉列表标签。

    1.1.4    文本域标签

    Textarea文本域标签,用来输入大量文本的的标签。文本域标签的cols表示可以容纳多少列字符。Rows容纳多少行数据。一般用于输入大量文本时才用这个,其他情况用input 就可以 了。

     

             <!-- 文本域 -->

             <textarea cols="20" rows="10">

               内容

             </textarea>

     

    1.1.5    Fieldset标签

    表单组合标签,仅仅用于表单的组合。只是语义层面的事情。

    可以影响到reset按钮的效果。

    Legend标签用于组合标签的标题。

    <fieldset>

                <legend>用户组2</legend>

                用户名2:<input type="text">

                <br>

                密码2:<input type="text">

            </fieldset>

     

    1.1.6    Lable标签

    Lable标签可以让 标签文本点击的时候让label指向的标签表单标签获得焦点。

    两种方式,使用for属性指向 表单标签。

    用lable标签包裹表单标签。

    案例:

        <label for="txtName">文本框获得焦点</label>

    <label><input type="button" value="普通的按钮"> 选中按钮</label>

     

    1.1.7    表单总结

    Form:包裹标签,action:#

     

    Input:文本框、单选按钮、多选按钮type:checkbox、提交的按钮、按钮、重置的按钮。

    <input type=”text” >

    Type:radio ,单选

    <input type=”submit” value=”提交”>

    <input type=”button”  value=”普通的按钮”>

    Checked属性:标识单选或者多选按钮是否被选中。单属性。

     

    Lable标签,for属性指向要提供服务的 标签的id值。

    Lable直接包裹标签,可以实现点击标签的文字内容,让包裹的表单标签 标签获得焦点。

        <label for="txtName">文本框获得焦点</label>

    <label><input type="button" value="普通的按钮"> 选中按钮</label>

     

    Select:下拉列表,列表。  Multiple,单属性。

    Option设置我们的列表的选项。

     

    Textarea文本域标签:当输入大量的文本的时候需要使用文本域标签。

    Cols设置文本域可以输入多少列 字符。宽度。

    Rows 设置文本域的可以输入的行 字符数,高度。

     

    Fildset标签

    Legend,组合标签的标题。

     

     

    1.2   Iframe标签

    iframe标签,元素会创建包含另外一个文档的内联框架(即行内框架)。

    <iframe src="demo_iframe.htm" width="200" height="200"></iframe>

    可以设置高度和宽度(height,width)

    去掉边框:frameborder设置为0;

     

    不建议使用了。

     

    1.2.1    Mate标签的补充

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    上面代表如果是用ie打开的当前页面,那么就使用最新的ie版本打开此页面。

     

    SEO优化的设置:

          <meta name="keywords" content="招聘java,php,android,ios,c/c++,网页设计,平面设计,UI设计,JavaScript,网络营销讲师">

     

        <meta name="description" content="IT培训的龙头老大,年薪30万-50万招聘Java,PHP, android,ios,c/c++。" >

     

     

    <base target="_blank">

    Base标签可以让当前页面中的所有的a标签都拥有相同 的属性,比如targent属性。

    1.3   字符实体

    怎么才能实现在HTML页面中显示HTML的代码呢?

    比如说:要在页面中显示:

        <HTML5>

        <p>这是p标签的写法</p>

     

    HMTL:

    1. 网页结构:HTML

      Div、span、strong、em、table、tr、td

      Ul、li、ol、dl、dt、dd

      Input  select  textarea lable form fielset

       

    2. CSS,描述样式

    3. JavaScript,实现页面交互的效果。

    相关文章

      网友评论

        本文标题:【第四天】03-HTML的内容标签笔记(下)

        本文链接:https://www.haomeiwen.com/subject/kdqrwttx.html