列表标签、图片标签、超链接、iframe框架标签、表格标签、表单

列表标签

<ul></ul>无序列表，<ol></ol> 有序列表，<ul><ol>标签内不写内容，不能包含其他标签，只能嵌套<li>标签

<li></li>,<li>标签必须包含在<ul>或者<ol>内

自定义列表<dl></dl>

<dl>

<dt>名词</dt>

<dd>解释</dd>

</dl>

 ul、ol、、li、dl、dt、dd都是块状元素

图片标签

<img src="添加目标文件路径">

绝对路径：从最大的一个范围；

网络上的绝对路径： https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3d47879ec183e25a36e67e0219636e60.jpg?thumb=1&w=234&h=300&f=webp&q=90

本地的绝对路径：file:///D:\test\3.png

相对路径：当前文件和目标文件的相对位置关系；

                 当前文件：要添加路径的文件；

                 目标文件：要显示出来的文件，也就是路径所指向的文件；

./     当前文件位置，可写可不写，默认也是在当前文件位置；

../    返回上一级,向上返回两级 ../../

图片标签的属性：

src=""  用来添加目标文件路径（必须的）；

alt=""  图片描述，在优化（SEO）的角度上alt属性是必须要有的；具有提示作用，提示用户和浏览器；

alt的表现形式:适当图片因某种情况没有加载出来的时候，显示在图片位置上的提示信息；

title="" 添加标题，其他标签也都可以添加title属性；具有提示作用，提示浏览器和用户；

title的表现形式：在鼠标放在该元素上时，显示在鼠标右下角的提示标题；可加可不加；

border="" 添加边框，边框属性；属性值是数值，可不加单位；（已被废弃）

width="" 设置宽度

height="" 设置高度

超链接标签

<a href="目标文件路径"></a>

<a href="#"></a>  空连接，在当前页面刷新； 

属性：href="url"  添加目标文件路径 （必须的）；

                    url : 可以连接本地的html文件；

                    url : 可以设置网页和网页之间的跳转，

                        如：<a href="http://www.baidu.com">百度</a>

                    url: 可以连接文件（图片，文本文件,pdf 等）；

                        如： <a href="1.gif">图片</a>

                    url:可以连接邮箱地址，以mailto:开头；

                        如： <a href="mailto:chenyanqiu@atguigu.cn">邮箱地址</a>

                    url: 可是设置连接到页面内的某一个位置

                        锚点连接:是在页面内不同位置的快速跳转；

                        锚点连接的设置方式：

                            <a href="#one">html</a>

                            <div id="one">

                                <h1>html</h1>

                            </div>

注：使用锚点连接时，必须要配合id属性一起使用；

       超链接里面的href属性值里必须要加# ，后面跟随制定的元素的id名称（属性值）；

id="" 属性，具有唯一性，每个元素都可以添加id属性

每个元素只能有唯一的一个id属性，就像我们的身份证号码一样；

可以通过id找到位移的某一个元素；

id 属性的属性值是自定义的；

超链接的属性：

       title="" 提示信息，添加标题，所有标签都能添加title属性；

       download='下载文件的名称（可自定义）' 属性用来设置下载文件的名称(firefox/chrome支持) ；h5新增属性

注：如果href里面添加的文件类型是浏览器可以直接访问的类型，会出现跳转的效果，如果是浏览器不能直接访问的文件，会议下载的方式显示；

        链接内有download属性时， 在live sever里面打开，显示下载界面；在默认浏览器打开，直接打开，不下载               

target=""  设置超链接的打开方式；

    属性： _self  :  在当前窗口打开（默认值）；

                _blank :  在新窗口打开，原来的窗口保留；

                _parent ：将链接的内容，当成文件的上一个画面。需要在框架集中使用 （了解即可）

                _top ： 这个参数可以解决新内容被旧框窗包围的困扰，使用这参数，会将整个画面重新显示成链接的画面内容。你的网页在框架内，这个网页上有一个链接target设成_top，点击此链接时，目标网页就会在当前浏览器中打开，而框架会消失；（了解即可）

扩展：

            <base /> 标签为页面上的所有链接规定默认地址或默认目标。要写在head标签内；

            head内设置了base标签，body中的 href 除非是直接链接的是网址 或者绝对路径，不会改变，如果链接的是html页面或者图片，在网页打开时会默认打开是 base 中的链接

 

手机电话       <a href="tel:10086">10086</a>

短信信息       <a href="sms:10086">发短息给我</a>

 iframe框架标签

<iframe></iframe> 

属性：

                src=""  添加目标文件路径

                name="" 给当前的标签添加name名字（属性值），属性值是自定义的;

                frameborder=""  添加边框属性；属性值：0 (no) / 1 (yes ，是默认值)；

                scrolling=""  设置滚动条；auto / no / yes

                width="" 设置宽度

                height="" 设置高度           

内联框架；

                作用：

                    1、可以把其他页面连接到当前页面打开；

                    2、指定超链接指向的文件在当前框架里打开；

                        如：

                            <a href="http://www.taobao.com" target="taobao">淘宝</a>

                            <iframe name="taobao"></iframe>

                    3、指定表单提交后在iframe里打开？

                        form标签内设置target属性值 和 iframe里的name值相等 ，绑定后，提交的表单接口链接会在iframe框架内显示

    <form action="http://www.taobao.com" target="taobao">     
        你的性别：
        <input type="radio" name="sex" id="man">
        <label for="man">男</label>

        <input type="radio" name="sex" id="woman">
        <label for="woman">女</label>
        <br><br>
        <input type="submit" value="提交">
    </form>
    <iframe name="taobao" frameborder="1" width="100%" height="400"></iframe>

                    4、可以在框架里插入广告或者图片等；

框架外链接，点击可以在框架内打开，在iframe内设置 name="名字"

外面的超链接设置属性target="名字"，将框架与框架外标签连接起来

 

 表格标签： 

表格作用：展示数据

表格分组标签

行分组：

<thead></thead>   表头
<tbody></tbody>   表体
<tfoot></tfoot>   表尾

说明：一个Table中，只能包含一个thead,一个tfoot,但可包含多个tbody。 

列分组：

<table>

        <!-- 第一列为一组 -->

        <colgroup span="1" bgcolor="pink"></colgroup>

        <!-- 第二列和第三列为一组 -->

        <colgroup span="2" bgcolor="yellow"></colgroup>

        <!-- 第四列和第五列为一组 -->

        <colgroup span="2" bgcolor="tomato"></colgroup>

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

</table>

表格属性：

水平对齐属性：align=""

                    left  左对齐 （默认值）

                    center 居中对齐

                    right 右对齐

                当把该属性添加给table标签时，改变的是表格的对平对齐位置，而不是表格里面的单元格内容的对齐方式；

垂直对齐属性：valign=""

                    top     顶对齐

                    middle  居中对齐（默认值）

                    bottom  底对齐

<caption>属性的插入位置，位于<table>属性之后，<tr>表格行之前，一般用于添加表格标题

语法：

        <table>

            <tr>

                  <th></th>

                  <td></td>

            </tr>

        </table>

table  表格、tr   行  、td   单元格（列）、th（th标签自带加粗和水平居中显示效果）

表格的属性：

                border=""  设置边框 （添加给table标签，已被废弃）；

                cellspacing="" 设置单元格和单元格之间的间距；(添加给table标签)

                cellpadding=""  设置单元格和内容之间的间距的；(添加给table标签)

                width=""  设置宽度

                height=""  设置高度

                bordercolor="" 边框颜色（给td添加的时候，在ie浏览器支持）

                bgcolor="" 背景颜色               

                frame属性：控制表格边框最外层的四条框线

                rules属性：控制是否显示以及如何显示单元格之间的分割线

                rules="rows/cols/all/none/groups"  添加分隔线

               说明：rows:位于行之间的线条

               cols:位于列之间的线条

               all：位于行和列之间的线条

               none:没有线条

               groups:位于行组和列组之间的线条

rowspan=""单元格所占行数、colspan=""单元格所占列数

如果有5行5列的表格。第一行是大标题，一个单元格，在第一个单元格内设置colspan="5"，后面四个单元格都需要删掉，同理，如果是第一行第一个单元格需要和第二行第一个单元格合并，那么在第一行单元格的设置rowspan="2"，表示两个单元格为同一单元格，那么第一列的单元个数变为4个，

    <table border="1" cellspacing="0">
        <caption>
            <h1>课程表</h1>
        </caption>
        <tbody align="center">
            <tr bgcolor="#ffff00">
                <td>项目</td>
                <td colspan="5">上课</td>
                <td colspan="2">休息</td>
            </tr>
            <tr bgcolor="#adff2f">
                <td>星期</td>
                <td>星期一</td>
                <td>星期二</td>
                <td>星期三</td>
                <td>星期四</td>
                <td>星期五</td>
                <td>星期六</td>
                <td>星期日</td>
            </tr>
            <tr>
                <td rowspan="4">上午</td>
                <td>语文</td>
                <td>数学</td>
                <td>物理</td>
                <td>化学</td>
                <td>体育</td>
                <td>电竞</td>
                <td rowspan="6">休息</td>
            </tr>
            <tr>
                <td>语文</td>
                <td>数学</td>
                <td>物理</td>
                <td>化学</td>
                <td>体育</td>
                <td>电竞</td>
            </tr>
            <tr>
                <td>语文</td>
                <td>数学</td>
                <td>物理</td>
                <td>化学</td>
                <td>体育</td>
                <td>电竞</td>
            </tr>
            <tr>
                <td>语文</td>
                <td>数学</td>
                <td>物理</td>
                <td>化学</td>
                <td>体育</td>
                <td>电竞</td>
            </tr>
            <tr>
                <td rowspan="2">下午</td>
                <td>语文</td>
                <td>数学</td>
                <td>物理</td>
                <td>化学</td>
                <td>体育</td>
                <td>电竞</td>
            </tr>
            <tr>
                <td>语文</td>
                <td>数学</td>
                <td>物理</td>
                <td>化学</td>
                <td>体育</td>
                <td>电竞</td>
            </tr>
        </tbody>
    </table>

注：默认情况下：表格的宽度/高度跟table的宽度和单元格里面的内容的多少有关；

       表格的每一行的高度，都是统一的，是以最大的单元格高度显示整行的高度；

       表格的每一列的宽度，都是统一的，是以最大的单元格的宽度来显示整行的宽度；

table的css属性：

1) 单元格间距：border-spacing:value;
    说明：单元格间距(该属性必须给table添加) 表示单元格边框之间的距离， 不可取负值

2) 合并相邻单元格边框：border-collapse:separate/collapse;
    说明：合并相邻单元格边框 (该属性必须给table添加) separate(边框分开)默认值； collapse(边框合并)

表单：

作用：收集用户信息；

表单域：表单区域；一个表单域代表一个表单信息；

表单元素都要写在表单域内；

表单域标签：<form>表单元素</form>

属性：                  

         action = '接口地址' （用于指定接受并处理表单数据的服务器程序的url地址）    

         method = 'get / post' （请求方式，用于设置表单的提交方式）

**post和get的区别**；

- GET在浏览器回退时是无害的，而POST会再次提交请求。 
- GET产生的URL地址可以被Bookmark，而POST不可以。
- GET请求会被浏览器主动cache，而POST不会，除非手动设置。
- GET请求只能进行url编码，而POST支持多种编码方式。
- GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。 
- GET请求在URL中传送的参数是有长度限制的，而POST么有。
- 对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
- GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。

         name = '表单名称'（用于指定表单的名称，以便于区分同一个页面的不同的表单域）

表单元素（表单控件）：<input type="">

属性： type="" 类型，定义表单元素显示的类型；

属性值（单元素显示的类型）：

          text 单行文本框

          password  密码框

          submit  提交按钮

          reset   重置按钮

          button  普通按钮

          radio   单选按钮，一般都是成组使用，多选一；要配合name属性使用；属于同一组数据的单选按钮，要拥有相同的name属性值；

          file    文件域（上传文件框）

          hidden  隐藏表单，一般用来传递参数,而又不想显示在客户端。

value="" 设置表单的值；在表单元素里，都可以添加；

表单-button标签： <button type=""></button> 按钮标签

type="属性值"

        submit    提交按钮

        reset     重置按钮

        button    普通按钮

        不写type属性  提交按钮

button标签、button标签内设置submit---------value值不显示、可提交表单

input标签设置submit---------显示value值、可提交表单

input标签设置button---------显示value、不提交表单

表单-下拉菜单标签：

            <select>

                <option></option>

                <option></option>

                ...

            </select>

说明：

         select 是下拉菜单标签

         option是select的子元素，是显示每一项的内容；

         默认情况下，select里面显示的是第一个option；

下拉菜单 组标签（分组）

            <optgroup label="组标题"></optgroup>  添加子啊select里面，给option分组用；       

下拉菜单属性：

            selected="selected"   显示该选项          

            当属性和属性值一样时，有三种设置方式；

                1、selected

                2、selected=""

                3、selected="selected"

表单-多行文本框：<textarea></textarea>

注：留言、自我介绍等；

多行文本框里的空格和换行符是会被保留的，显示在页面上；

            属性：

                cols  设置宽度（列数，以字符为单位）

                rows  设置高度（行数，以字符为单位）

取消多行文本框的可拖拽效果：

                css属性：

                    textarea{

                        resize: none;

                    }

表单-属性：

            type=""  表单类型

            value="" 表单的值，根据表单不同，显示的形式也不同；

                     当提交表单时，是通过value获取表单里的信息的；

            placeholder="" 设置表单的提示信息，只是起到提示作用；

表单-属性：

            maxlength=""  设置可输入的最多的字符数；

            size：控制框的宽度（以字符为单位）,默认显示20个字符的宽度；

            默认选中 ：

                checked="checked"    

                checked=""

                checked

禁用：disabled="disabled"

表单-提示信息标签：

语法：<label for="绑定控件id名"></label>

说明：

label元素用来定义标签，为页面上的其他元素指定提示信息。

要将label元素绑定到其他的控件上，可以将label元素的for属性设置为与该控件的id属性值相同。

 第一种方法：label标签内不能设置属性值，否则无法获取信息

        性别：
        <label>
            <input type="radio" name="sex">男
        </label>

        <label>
            <input type="radio" name="sex">女
        </label>



        <label for="">
            点击聚焦
            <input type="text">
        </label>

        <label>
            点击聚焦
            <input type='text'>
        </label>

 第二种方法：

        爱好：
        <input type="radio" name="hobby" id="eat">
        <label for="eat">吃饭</label>
        
        <input type="radio" name="hobby" id="sleep">
        <label for="sleep">睡觉</label>

表单-字段集标签：

            语法：<fieldset></fieldset>

            说明：是一个带有边框的区域（块）；给表单元素划分区域，或者理解为给表单元素分组用的；fieldset是可以嵌套自己，和其他标签；

字段级标题标签：

            语法：<legend></legend>

            说明：给字段集标签添加标题用的，要配合fieldset使用，必须要写在fieldset里面的第一子元素的位置上；