2021-05-06 html第二部分

一.图片标签

常用的图片格式

 .png

    .jpg

    .gif

    .jpeg

    .webp

src 图片的路径

title 鼠标悬停在图片上出现的文字

width宽度

height高度

alt图片加载失败出现的文字

<img src="./../img/img2/f4.jpg" alt="我是f4" title="请点击我" width="100px" height="200">

二.列表

列表有三种，分别是

1.有序列表 ol

属性值为 type 序号为数字（默认）A/a序号为大小写英文字母，I/i 序号为罗马数字，start 序号从第几个开始 一定是数字

  <ol type="i" start="10">
      <li>第一行</li>
      <li>第二行</li>
      <li>第三行</li>
  </ol>

2.无序列表ul

   属性  type 修改序号样式

            circle 空心小圆点

            disc 黑色小圆点

            square 黑色小方块

  <ul>
      <li>第一行</li>
      <li>第二行</li>
      <li>第三行</li>
      <li>第四行</li>
  </ul>
  <ul type="circle">
    <li>第一行</li>
    <li>第二行</li>
    <li>第三行</li>
    <li>第四行</li>
  </ul>
  <ul type="disc">
    <li>第一行</li>
    <li>第二行</li>
    <li>第三行</li>
    <li>第四行</li>
  </ul>
  <ul type="square">
    <li>第一行</li>
    <li>第二行</li>
    <li>第三行</li>
    <li>第四行</li>
  </ul>

3.自定义列表 dl 

         dt ：列表项标题

         dd:列表

    <d1>
    <dt>男生喜欢什么</dt>
    <dd>法拉利</dd>
    <dd>萝卜丁</dd>
    <dt>女生喜欢什么</dt>
    <dd>法拉利</dd>
    <dd>萝卜丁</dd>
</d1>

三.表格

1.表格标签：table

    属性：

        border 边框(border="10" 边框粗细)

        cellspacing 单元格与单元格之间的距离 

        cellpadding 单元格内字体到边框的距离

        align='center' 水平居中

        width  宽度

        height 高度

        th 表头 加粗居中 

tr行

td列

       rowspan 合并行

          colspan 和并列

    caption ：表格标题

    <table border="10" cellspacing="0" cellpadding="10" align="center" width="400" height="300">
        <caption>我是表格标题</caption>

        <tr align="center" >
            <td rowspan="2">1-1</td>
            <td colspan="2">1-2</td>
            <!-- <td>1-3</td> -->
        </tr>
        <tr align="center" >
            <td>2-1</td>
            <td rowspan="2" >2-2</td>
            <!-- <td>2-3</td> -->
        </tr>
        <tr align="center">
        <td colspan="2">3-1</td>
        <!-- <td>3-2</td> -->
        <!-- <td>3-3</td> -->

四.表单

1.表单 form

属性 action 数据提交的地址

method 表单的提交方式两种（get，post）

get 将用户信息显示在地址栏上 不安全 传送数据量小 传送速度快

post 不会将用户信息显示在地址栏上 相对安全 传送数据量大(理论上无限大) 传送速度慢

input 输入框

属性 type

text：文本输入框

password：密码输入框

radio：单选框按钮 （同一组单选框必须有相同的名字）

checkbox：复选框(同一组复选框必须有相同的名字)

lable： 扩大选择范围 <lable for="input中id的值">

button ：按钮 在表单中有默认提交功能

select：下拉表单

option列表项 属性 selected下拉列表默认选中项

textarea :文本域

               属性 cols 表示列数（宽度）

                       ·rows 表示行数（高度）

    <form action="xxx.php" method="Method">
        <!-- action 数据提交的地址，methed 表单的提交方式 -->
        用户名：<input type="text" name="username">
        <br>
        密码：<input type="password" name="password">
        <br>
        性别：
        <label "nan">男：</label>
        <input type="radio" name="sex" id="nan" value="nan">
        <label "nv">女：</label>
        <input type="radio" name="sex" id="nv" checked="checked" value="nv">
        <br>
        爱好：
        吃<input type="checkbox" name="hobby" value="chi">
        睡<input type="checkbox" name="hobby" value="shui">
        玩<input type="checkbox" name="hobby" value="wan">
        <br>
        家乡：
        <select name="home">
            <option value="nj">南京</option>
            <option value="bj" selected>北京</option>
            <option value="dj">东京</option>
        </select>
        <br>
        自我介绍：
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <br>
        <input type="submit">
        <input type="reset" value="我要重置">
        <input type="button" value="我是普通按钮">
        <button>我是button</button>
        <!-- 这个按钮 有默认提交功能 -->

 

    五.html补充

1.span p div

span是普通文本标签

p是段落标签

div盒子标签

2.实体字符

 &copy; 版权符

             &reg;商标注册

             &lt;小于号

             &quot;大于号

             &nbsp;空格

            &quot;引号

例：< p >Copyright © 2004 - 2021 京东版权</ p >

  &lt; p &gt;Copyright &copy; 2004&nbsp;-&nbsp;2021 京东版权&lt;/ p &gt;<br>

3.iframe标签

    使用iframe 可以直接将页面嵌套在iframe指定的src中

        frameborder 取值0或者1 规定是否显示框架周围的边框

例：百度页面在页面实现

  <iframe src="https://www.baidu.com/" frameborder="0"></iframe>