web前端基础

HTML

1.标题标签——<h1></h1>（h1~h6逐级递减）

2.段落标签——<p></p>

3.文本格式化标签——<del></del> <b></b> <em></em>   <ins></ins>下划线 <s></s>

4.换行标签及水平线标签——<br />换行 <hr />水平线、

5.图片——<img src="地址" title="我要去抓羊了" width="宽" border="边界宽" align="对齐方式">

6.视频——<video src="地址" controls="controls" loop="loop" autoplay（自动播放） muted（静音）></video>

7.音频——<audio src="地址" controls loop></audio>

8.超链接——<a href="链接地址" target="链接打开方式"></a>

9.锚链接——<a href="标签id"></a>

10.特殊字符

11.有序列表——

<ol type="A">

        <li>椒麻鸡

            <a href="#">去百度</a>             

        </li>

        <li>榴莲</li>

        <li>螺蛳粉</li>

    </ol>

 

 

12. 无序列表——

你喜欢的明星是：

<ul type="square">

        <li>梁朝伟</li>

        <li>蔡徐坤</li>

        <li>黄子韬</li>

        <li>周杰伦</li>

</ul>

 

 

 

 13.只定义列表——

<dl>

        <dt>线下门店</dt>

        <dd>web之家</dd>

        <dd>服务网点</dd>

        <dd>web之家</dd>

</dl>

 

 14.框架——将其他页面嵌入到自己页面

<a href="https://www.taobao.com" target="目标name">点击我进入淘宝</a>

    <iframe name="nn" frameborder="" width="800px" height="400px"></iframe>

15. 表单——必须嵌套在form标签里

<form action="#">

        用户名：<input type="text" name="userName" autocomplete="off" placeholder="提示词">

        密码：<input type="password" name="one" maxlength="最大长度">

        <br>

        <input type="radio" name="r1" value="女" checked>女

        <input type="radio" name="r1" value="男">男

 

        <br>

        爱好：

        <input type="checkbox" name="love" value="sing" checked>爱唱歌

        <input type="checkbox" name="love" value="dance">爱跳舞

        <input type="checkbox" name="love" value="打豆豆">爱打豆豆

 

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

            <option value="西安">西安</option>

            <option value="成都" selected>成都</option>

            <option value="南京">南京</option>

        </select>

       

 

        <textarea name="jianjie" id="" cols="列" rows="行" maxlength="最大长度"></textarea>

        <br>

 

 

        <input type="file" name="wenjian" id="" multiple>

        

 

 

        <input type="email" name="number" id="">

 

        <input type="date" name="" id="">

 

        <input type="time" name="" id="">

 

        <input type="color" name="" id="">

 

 

        <button>提交</button>

    </form>

16.labe标签——使点字时也能勾选方框

<label for="sing">爱唱歌</label><input type="checkbox" name="love" id="sing">——第一种用法 

 <label> 爱跳舞<input type="checkbox" name="love" id=""></label>——第二种用法

17.表铬——嵌套在table标签下使用

<table border="边界宽" cellspacing="单元格之间的距离" width="800px" height="500px">

         <caption>学生信息</caption>——标题

         <thead height="200px" align="center" valign="middle">——表示头

                 <tr>———表示一行

                         <th width="">姓名</th>——表示一列

                 </tr>

         <tbody height="400px" align="center" valign="middle">——表示内容主体

            <tr>

                <td>张三</td>

            </tr>

        </tbody>

        <tfoot align="center">——表示尾部

           <tr>

                    <td></td>

           </tr>

        </tfoot>

</thead>

18.单元格合并——

<table border="1" width="400px" height="400px" cellspacing="0" bgcolor="blue">

        <tr bgcolor="pink">

            <td rowspan="合并单元格数量"></td>——跨行合并

        </tr>

        <tr>

            <td colspan="合并单元格数量"></td>——跨列合并

        </tr

</table>

19.无语义标签——

<div>我是一个盒子</div>——划大区域使用，独占一行

<span>我是一个小容器</span>——划小区域，独占一行