前端学习——ｈｔｍｌ

一、常见标签

只记录部分，其他若干标签可直接翻阅官方文档查看。
　（１）img标签：图片标签，是一个单标签，它有一些属性，src是位置，alt是如果找不到路径中的图片显示的内容，title是鼠标放上去显示的内容，width：图片宽度，height：图片高度，border：边框宽度
ｓｒｃ路径注意

• 相对路径
  ．／或者什么都不写是当前目录
  ．．．／是上一级目录
  ／是根目录

• 绝对路径
  　线上路径
  　本地路径

（２）a标签：必须属性为href，是链接的地址。还有targret属性，是链接的打开方式，默认值是_self，本页打开，可以改为_blank，在新的页面打开。·······链接分为内部链接和外部链接以及空链接，空链接用#代替

<a href="http://www.baidu.com" title="百度网页" target="_blank"><h1>外部链接</h1></a>
<!-- 只写一个#表示打开当前页面 -->
<a href="#">空链接</a>
<!-- 打开本地页面 -->
<a href="./demo1.html">内部链接</a>

锚点：＃＋id

（３）特殊字符，很多地方直接输入是不能在网页中显示的，所以需要用到特殊字符

二、表格和列表标签

（1）表格：
tr定义行，th定义表头，td定义单元格，th是自带加粗和居中功能，ｔｈｅａｄ放表头一行，ｔｂｏｄｙ放表体

<table>
         <tr>
             <td></td>
         </tr>
 </table>

在VScode中这里有很多快捷键可以用，(tr>td*4)*4 这个快捷键，是将圆括号里的元素创建4遍

（2）合并单元格的步骤：1.先确定是跨行还是跨列 2.找到目标单元格，写上合并方式（跨行rowspan，跨列colspan）
（3）列表标签：无序列表ul和li－常用，有序列表ol和li

三、表单标签

表单域、表单控件、提示信息。
表单域是整个表单区域，用form来定义（双标签），主要功能就是给服务器提交数据。
action 提交数据的地址，
method 提交数据的方式　GET / POST
target 在哪里查看结果
name表单域名字

  <form action="./what" method="GET" target="_blank" ></form>

（１）ｉｎｐｕｔ标签
input是一个单标签，有type属性，type属性值有如下：

<label for="username">用户名</label>
        <!-- 1.单行文本框 -->
        <!-- pattern:对输入的内容做校验，比如数字0-9，2-5位  maxlength是输入的最大值 -->
        <input type="text" id="username" pattern="[0-9]{2,5}" maxlength="6">
        <!-- 2.密码框  input:password + tab 快捷键-->
        <label for="pwd"></label>
        <input type="password" id="pwd">
        <hr>
        <!-- hr是水平线的意思 -->
        <!-- 3. 单选框 radio:只能选择一次 
            单选框要统一设置name属性,通过value来设置不同的值,通常要通过label标签来说明input-->
        <label>性别</label>
        <label for="man">男</label>
        <input type="radio" name="sex"  id="man" value="男">
        <label for="woman">女</label>
        <input type="radio" name="sex" id="woman" value="女">
        <hr>
        <!-- 4. 多选框 -->
        <label>兴趣爱好</label>
        <label for="basketball">篮球</label>
        <input type="checkbox" id="basketball" name="intrest" value="篮球">
        <label for="baseball">排球</label>
        <input type="checkbox" id="baseball" name="intrest" value="排球">
        <label for="tennis">羽毛球</label>
        <input type="checkbox" id="tennis" name="intrest" value="羽毛球" >

        <!-- 5. 图片 -->
        <input type="image" src="./1.png" width="50" height="10"><hr>
        <!-- 6.上传文件 -->
        <input type="file" >
        <!-- 7.隐藏文本 -->
        <input type="hidden">

        <!-- 按钮 -->
        <input type="button" value="普通按钮">
        <!-- 充值按钮 -->
        <input type="reset" value="重置按钮">
        <!-- 提交按钮 -->
        <input type="submit" value="提交按钮">

注意事项
１、ｌａｂｌｅ标签是做什么的？
相当于给ｉｎｐｕｔ标签的注释，这样点击ｌａｂｌｅ标签定义的文字也可以选中元素。ｌａｂｌｅ标签的ｆｏｒ属性内容需要和input标签中的保持一致。
２、name　id　value　的区别？
ｉｄ是供前端人员使用的。
name和value是每个表单都有的属性，主要供后台人员使用。
单选和复选中的name必须一样，这样才能实现多选一和多选多的效果。

（2）input标签-checked属性：主要用于单选框和多选框，设置它们的默认值

（3）select标签，用法如下。ps：定义默认值是可以加上selected=“selected”，select标签中至少有一对option

       <form action="">
            <label for="choose">选择游戏</label>
            <!-- 下拉框  size：显示数量-->
            <select id="choose">   <!--multiple是选择多个的属性-->
                <option>赛博朋克2077</option>
                <option selected="selected">地铁：离去</option>
                <option>地平线4</option>
                
            <!-- 分组 这里的label属性是给分组起标题 -->
                <optgroup label="弹出选项">
                    <option>动作类</option>
                    <option>角色扮演</option>
                    <option>沙盒</option>
                    <option>第一人称射击</option>
                    <option>策略类</option>
                </optgroup>
            </select>
    </form>

（4）textarea标签没有value属性，是双标签，默认值写在标签中间，而input中的text是有value属性的