首页 > 其他分享 >HTML速查笔记

HTML速查笔记

时间:2022-12-09 14:11:54浏览次数:38  
标签:form 标签 笔记 HTML 提交 input 速查 type id

一.html结构
    <html>
        <head>
            head内的标签标用户是看不到的,是给浏览器看的,主要定义一些配置
            放置head内常用的标签
        </head>
        <body>
            body内写什么浏览器就渲染什么,用户就能看到什么
            放置body内常用的标签
        </body>
    <html>

二.标签的分类
   分类a:
   1 双标签 例如<a>xxx</a>
   2 单标签 例如<img/>
   分类b:
   1 块标签:独占一行 例如 h1-h6,p,div
     * 块标签可以修改长宽
     * 块级标签内部可以嵌套任意的块标签和行内标签
     * 特例 p 标签只能嵌套行内标签,不能嵌套块标签
   2 行内标签:自身的文本多大就占多大  例如 span,img,a
     * 行业不能嵌套块标签

三.head内常用标签
   1 title:网页标题
   <titile>网页标题</title>
   2 stytle:内部用来书写css代码的
   <stytle>
        <h1>{
        color:greenyellow
        }
   </stytle>
   3 script:内部用来书写js代码的,还可以引入写好的js代码
   &lt;script src="引入的js代码"&gt;
        alert(123)
   &lt;/script&gt;
   4 link:引入外部css文件
   <link rel='stylesheet' href='外部的css文件'>
   5 make:定义网页原信息
     a:keywords:网页推荐 通过搜有content后面的关键字 就可能搜索到这个网页
       <meta name="keywords" content='wfw,wfw01,wfw001'>
     b:description 添加描述信息
       <meta name="description" content='对xxxx网站的详细说明'>

四. body内常用标签:标签内可以直接添加文字
    1 <h1>xxx</h1>  标题,后面的数字表示几级标题
    2 <b>xx</b> 加粗
    3 <s>xx</s> 删除线
    4 <u>xx</u> 下划线
    5 <i>xx</i> 斜体
    6 <p>xx</p> 段落 一个p一段
    7 <br> 换行
    8 <hr> 水平分割线

五. 特殊符号
    1 &nbsp; 空格
    2 &gt; 大于号
    3 &lt; 小于号
    4 &amp; &符号
    5 &yen; ¥符号
    6 &copy; 圆圈c
    7 &reg; 圆圈r
六. 常用标签:在页面布局最常使用的标签
    1 div 可以把它看成一块区域,主要作用是提前布局,先用div划分好区域,之后往里面填写内容
    2 span 普通文本先用span占位,之后给它加样式
    3 img 图片标签,常用属性有以下几个
      <img src="" alt="" title="" width="" height="" >
      alt="图片加载不出来时的描述信息"
      src="图片路径,可以是网上的也可以是本地的"
      title='鼠标悬浮图片上展示的信息'
      height='调整图片高度'
      width='调整图片宽度'
      *如果修改类2个参数且没有考虑等比例问题,那么会失真
    4 a:连接标签,常用属性
      <a href="" target= >点击这里的文字跳转到连接</a>
      href="":"点击就会跳转到的url网址
      target=_blank:点击网址打开一个新的页面打开
      target默认是_self:点击在当前页面跳转
      a标签的锚点功能:通过id设置id值,其他a标签配置跳转到id值,如下例子:
      <a href="",id="d1">顶部</a>
      <a href="">中间</a>
      <a href="#d1">底部</a>
七. 标签必备的2个属性---->重点
    1 id值:不能重复,一个标签只能有一个
    2 class值:类似与继承
八. 列表标签
    <ul type="circle">xxx</ul>:无序列表,
    <ol> <li>1</li> </ol>:有序列表 自动标记编号
    <dl>xxx</dl>:标题列表,了解即可
    
九. 表格标签:只要是展示数据一般都需要展示表格
     例如展示数据
     wfw  123 read
     tack 445 write
     jack 888 play
     <table>
        <thead>
            <tr> 一个tr表示一行
                <th>username</th> 字段名,加粗 td 不加粗
            </tr>
        </thead> 放置表头 字段信息
            
        <tbody>
            <tr> 一个tr表示一行数据
                <td>xxxx</td> 字段值,不加粗
                td内用到的参数:colspan="2":水平方向占几行
                              rowspan="2":垂直方向占几行
            </tr>
        </tbody> 放置表单 数据信息
    </table>
    总结:以上是原生的表格标签,掌握结构即可,后面使用框架封装好的
十. form表单标签:获取前端用户传入的数据,包含上传的 选择的 写入的等等,这一块非常重要
    0.form表单结构
    <form action="">
        <p>
            <lable for="d2">password:<input type="password"></lable>
        </p>
    </form>
    form标签内的数据都会被form标签提交到后端
    1.action="":控制数据提交的后端路径,有3中方式
       a.什么都不写:默认向当前页面所在的url提交数据
       b.写全路径:例如 http://www.xxx.com 向指定的路径提交
       c.写路径后缀:例如 action="/index/" 自动识别书当前服务端的ip和端口,之后自动拼接
    2.input标签的使用
     第1种方式:lable包住input 关联input的id
     <lable for="d1">
         username:<input type="text" id="d1"> #input是输入框 前面可以指定输入框的名字
     </lable>
     第2种方式:lable直接关联input的id
     <lable for="d2"></lable>
      password:<input type="text">
     3.input标签内的属性:type
       type属性包含以下:
       输入框
        type=text:普通文本展示
        type=password:密文展示
       选择框:
        type=date:表示日期
        type="radio":单选框
        type="checkbox":多选框
       按钮:以下按钮需要给input指定value值,说明按钮的用途,例如<input="submit" valeu="提交">
        type=submit:触发提交的动作
        type=button:普通按钮,可以自定义各种功能
        type=reset:用来重置内容
        type=file:上传图片按钮
       补充知识:
        a.能够触发form表单提交数据的标签有哪些?<input="submit" valeu="注册">
        b.<button>点击<button> 也可以触发
        c.<type="radio" name="male" checked="checked">男:单选框 checked="checked" 代表默认选中
          总结:name就类似与字典的key,用户的数据类似与字典的value
     4.seletc标签的使用,表示下拉框,标签属性option的用法
        <select name="" id="">
            <option value="" selected="selected">北京</option>
        </select>
        multiple:多选
        selected:默认单选
     5.textarea标签的使用,大段文本框
        <textarea name="" id="" cols="30" rows="10"></textarea>
十一. form表单最重要属性
     1.method="post" 指定请求类型
     2.enctype="multipart/form-data" 可以支持提交文件数据,默认只能够提交普通数据
     3.选择标签内需要指定value的值  

标签:form,标签,笔记,HTML,提交,input,速查,type,id
From: https://www.cnblogs.com/wfw001-2018/p/16968768.html

相关文章

  • CSS速查笔记
    什么是CSS?控制页面样式的,通常放在HTML的head标签内使用CSS结构选择器{css样式}css样式:{属性:值,属性:值,属性:值}CSS的引入方式有3种:一般都是在html种的head标签内加css......
  • 机器学习的基础图表!学习记录笔记
    文章目录​​机器学习的基础图表!​​​​*一、机器学习概览​​​​1.什么是机器学习?​​​​2.机器学习和人工智能的关系​​​​3.机器学习的工作方式​​​​4.机器......
  • 【集成学习(下)】Task 12 Blending学习笔记
    1.导言在前几个章节中,我们学习了关于回归和分类的算法,同时也讨论了如何将这些方法集成为强大的算法的集成学习方式,分别是Bagging和Boosting。本章我们继续讨论集成学习方法......
  • Linux 操作命令 小笔记
    1.更改文件名名字mv要更改的文件名想要更改后的名字2.cat查看文件内容3-rm删除文件......
  • My Task09 Boosting的思路与Adaboost算法 笔记
    文章目录1.导论2.Boosting方法的基本思路3.Adaboost算法Zm越小证明分类分得越对总结:数学家太强了,respect1.导论Bagging思想的实质是:通过Bootstrap的方式对全样本数据集......
  • 【集成学习(上)】My_Task06_掌握分类问题的评估及超参数调优 笔记
    文章目录​​评估模型的性能并调参:​​​​当类别为两类时,可以绘制混淆矩阵与ROC曲线​​评估模型的性能并调参:更详细的可以查看大佬的知乎:https://zhuanlan.zhihu.com/p......
  • Task5 作者信息关联 笔记
    文章目录​​任务5:作者信息关联​​​​5.1任务说明​​​​5.2数据处理步骤​​​​5.3社交网络分析​​​​5.3.1图类型​​​​5.3.2图统计指标​​​​5.4具体代......
  • CCSP学习笔记-chap5-云运营安全
    1支持数据中心设计的规划流程2设施和构建云环境中的物理基础架构3运行云环境中的物理基础架构4管理云环境中的物理基础架构5构建云环境中的逻辑基础架构6管理云......
  • CCSP学习笔记-chap6-法律、风险与合规
    1理解云环境中的法律要求和独特风险2理解审计流程、方法论与云环境所需的调整3理解数字证据的收集和保管4理解隐私问题,包括司法管辖权的差异5理解外包和云合同设......
  • CCSP学习笔记-chanp4-云应用程序安全
    1识别应用程序安全所需的培训和意识宣贯2理解软件研发生命周期(SDLC)流程3理解云应用程序架构的特性4实现安全软件研发生命周期5理解应用程序安全标准6理解云软件......