html之标签的使用

1.img：width、height、src、arlt
在Html文档中代表图片。
<img src= " images/phone.jpg " alt= “图片找不到了…” width= ”200px" >
  src 表示图片的URL地址（必须）
  alt 表示替换图片的文本内容，当url地址出错时，将会显示alt的内容
  width 设置图片的宽度，单位为px
  height 设置图片的高度，单位为px
2.br：换行符（单标签）<br>
3.hr：水平线（单标签）<hr>
对于hr而言私有属性：
   size:设置水平线高度
   width:设置水平线的宽度
   align:水平线的位置 left、center、right
   <hr size="10px" width="100px" align="right">
4.sub:下标
5.sup:上标
eg:10<sup>2</sup>  <!--10的二次方-->
eg:log<sub>10</sub>2 <log以10为底2的对数>

–body中的代码如下

–浏览器中的效果如下

6.h1-h6 标题标签
<h1>hello</h1>（h1-h6块级元素）
<h2>hello</h2>
<h3>hello</h3>

–body中的代码如下

–浏览器中的效果如下

7.a：标签 超链接
（1）href：设置链接地址
-1标准url
  相对路径
  绝对路径
  eg：<a href="http://www.baidu.com">百度一下</a>默认在当前页面中打开
-2锚点值
  通过id属性设置锚点位置
  #id属性
-3邮箱地址
  mailto：邮箱地址
（2）target：设置页面的打开方式
 _blank：打开新页面
  eg：<a href="http://www.baidu.com" target="_blank">百度一下</a>
 _self：在当前页面打开
 _top：在*框架中打开
 _parent：在父框架中打开

1）跳转页码
–在body中的代码

–在浏览器中的效果

2）跳转章节内容（超链接之锚点值的设置#id属性）

8.table：表格
直接子元素： 
   caption：设置表格标题
   thead：设置表格头部
   tbody：设置表格体部
   tfoot：设置表格脚部
         tr：一行（tr的父标签是tbody）
            td/th：一个单元格（td普通单元格 th有样式单元格）
 table私有属性：
               align：
               border：
               cellpadding：设置单元格内容与单元格边框之间的空白距离
               cellspacing：设置单元格与单元格边框之间的空白间距
               width：
               height：
               bgcolor：
 td/th私有属性：
              width：宽度
              height：高度
              colspan：跨列合并数 将当前td的宽度修改为属性值的宽度
              rowspan：跨行合并数 将当前td的高度修改为属性值的高度
              colgroup：写在所有tr之上
                        col：标识列
                             span:number（私有属性）

1.在head中设置样式<style></style>

–在body中的代码如下

–border-collapse：collapse是设置表格的行或之间是否留有距离的样式。
2.在body中的<table></table>中设置表格的每列背景颜色。

–<col span="2" style="backgorund-color:blue"> col 标识列 span:numeber 表示两列背景颜色均为蓝

–在浏览器中的效果如下

3.在body中设置表格及cellpadding与cellspacing区别、rowspan、colspan使用

–在body中代码如下

–在浏览器中的效果

9.列表标签（块级元素）
ul：无序列表
    li：子标签
ol：有序列表
    私有属性：
      start：number
      reversed：布尔属性
    li：子标签
    默认序号从1开始
dl：标题列表
    dt：标题标签
    dd：列表项

（1）无序标签
ul:无序列表
li:子标签

–在body中的代码

–在浏览器中的效果

（2）有序标签ol、li

–在body中代码如下

–在浏览器中的效果

–加入私有属性start：number的body代码中如下

–在浏览器中的效果如下

–加入属性reversed：布尔属性在body中的代码如下

–在浏览器中的效果如下

（3）标题列表dl、标题标签dt、列表项dd

–在body中的代码如下

–在浏览器中的效果如下

10.form:表单
   客户端和服务器端发生数据交互时，需要使用表单
（1）私有属性：
 action:设置表单提交地址
 target：表单提交之后打开方式
       _self:
       _blank:
 method:设置表单提交方式
       get（默认）:
           1.将数据拼接在浏览器的地址栏上
           2.安全性较低
           3.只能提交轻量级数据
       post：
           1.将数据封装在请求体中
           2.安全性较高
           3.可以提交重量级数据
       表单默认使用get请求方式
       enctype：设置表单提交的数据类型/编码格式
 （2）子组件:
      input:表单组件
        私有属性：
          *type:
                text：单行文本框
                password：密码框
                submit：提交按钮
                reset：重置按钮
                image：图片按钮 
                       src
                       alt
                       width
                       height
                radio：单选框
                checkbox：多选框
                button：普通按钮
                hidden：隐藏域
                file：文件上传按钮
           value：
                  1.写在按钮上，修改按钮名称
                  2.写在输入框上，代表输入框的默认值
                  3.卸载单选或者多选框上，代表交互数据的value
           name：设置前后交互数据的key值
           checked：布尔值，默认选中
                    针对单选框和多选框
           size：设置文本框的宽度
                 默认宽度20
         maxlength:控制文本框最大输入字符长度
         redonly：只读 设置给文本框
         disabled：布尔属性，禁用组件，可以用给其他组件
         autofocus：聚焦
         placeholder：提示
         required：必填项
         pattern：表单验证规则
         step：
         min/max：
         formmaction
         formmethod
         formnovaliadte：在提交表单时不对其进行验证
 label：关联文字和组件
 fildest：
    legend：设置区域标题
 button：
    按钮
    type：
       submit
       reset
       button
       如果button写在form标签内，type默认为submit
       如果button写在form标签外，type默认为button
 select：
       下拉框
       私有属性：
             size：设置每次展示的项数
             multiple：布尔属性，是否可以多选
             disabled：布尔属性，禁用
             name：设置前后交互数据的key值
            
       子组件：
             option：选项
                  disabled
                  selected：布尔属性，默认选中项
             optgroup:
                  分组option
                      label属性：设置分组标题
             textarea：
                  多行文本输入框
                  cols：控制列数
                  rows：控制行数
                  disabled：
                  redonly：
                  wrap：
                      off
                      hard
                      soft

补充：
11.iframe标签：
  <iframe   src="规定在 iframe 中显示的文档的 URL" width="" height=""   frameborder="1/0"  name="iframe名称"     scrolling="yes/no/auto">   
</iframe>
在src中写入你要嵌入到当前网页的html文件即可
  私有属性：
  scr：规定在iframe中显示文档的url
  align：center、right、left
  framborder：规定是否显示框架周围的边框
              属性值：0、1
  height：
  width：
  name：iframe的名称
  scolling：规定是否在iframe中显示滚动条
            yes
            no
            auto

–在body中的代码


–在浏览器中的效果

本文地址：https://blog.csdn.net/weixin_45060861/article/details/112507465