zoukankan      html  css  js  c++  java
  • 【学习笔记】:一天搞定HTML

    PS:许多控制样式的标签在HTML5中都不推荐使用,建议使用CSS,如align,border等。

    一、概念

    HTML的英文全称:Hypertext Marked Language 超文本标记语言。

    超文本

    超文本是一种组织信息的方式,它通过超链接的方法将文本中的文字、图表与其他信息媒体相关联。

    标记语言

    • 由标签构成的语言,格式: <标签名称>

    • 标记语言不是编程语言。

    • 通过html的属性可以控制样式,但是不推荐使用。

    二、语法

    • html文档后缀名 .html

    • 标签分为:

      • 围堵标签:开始和结束标签,如<html> </html>
      • 自闭合标签:开始标签和结束标签在一起,如<br/>
    • 标签可以嵌套:需要正确嵌套,不能你中有我,我中有你。

    • 在开始标签中可以定义属性,属性由键值对构成,值需要用引号引起来

    • html标签不区分大小写,但是建议用小写。

    三、标签

    1. 文件标签

    • <html>:定义HTML文档
    • <head>:用于指定html文档的一些属性,引入外部的资源
    • <title>:定义文档的标题
    • <body>:定义文档的主体
    • <!DOCTYPE html> :html中定义该文档是html文档

    2. 文本标签

    • 注释:<!-- xxx -->
    • <h1>to<h6>:标题标签
    • <p>:段落标签
    • <br>:换行标签(空标签)
    • <hr>:水平线
    • <b>:字体加粗
    • <i>:字体斜体
    • <font>:字体标签(不赞成使用)

    3. 图片标签

    <img>:图片标签

    • 必需属性
      • alt:规定图像的替代文本,如果图片没有正常加载,将会显示alt文本。
      • src:规定显示图像的URL。
        • 绝对URL:指向其他站点,如src="https://www.baidu.com"
        • 相对URL:如指向上一层同级目录images的1.png文件,src="../images/1.png"
    • 可选属性
      • width:图像宽度
      • height:图像高度

    4. 列表标签

    • 有序列表

      • <ol type=''>
        • type:规定列表的标记类型。
        • start:规定有序列表的起始值。
        • reversed:规定降序。
      • <li>:定义列表项目
    • 无序列表

      • <ul type=''>
        • type:规定列表的标记类型,不赞成使用。
      • <li>:定义列表项目

    type属性可以选择标记类型

    5. 链接标签

    • <a>:定义一个超链接。
      • href:规定链接指向的页面的 URL
      • target:规定在何处打开链接文档,如果不使用href,就不能有target。
        • _self:默认在当前页面打开
        • _blank:在空白页打开

    6. div和span

    • <span>:文本信息在一行展示,行内标签,内联标签。
    • <div>:每一个div占满一行,块级标签。

    这俩标签配合id、class属性调整样式,格外有效。

    7. 语义化标签

    提高程序可读性。

    • <header>
    • <footer>

    8. 表格标签

    • <table>:定义表格

      • width:表格宽度

      • border:表格边框长度

      • cellpadding:定义内容和单元格的距离

      • cellspacing:定义单元格之间的距离,如果为0,则线合为一条

    • <tr>:定义行,一个<tr>可以包含多个<td><th>

    • <td>:定义单元,正常字体左对齐。

    • <th>:定义表头单元格,粗体居中。

      • <td><th>跨行、列的属性:
        • rowspan:定义单元格可跨的行数。
        • colspan:定义单元格可跨的列数。
    • <caption> :表格标题,居中于表格上


    下面这仨需要配套使用:

    • <thead>:定义表头
    • <tbody>:定义表主体。
    • <tfoot>:定义脚注。

    9. 表单标签

    表单项中的数据想要被提交,必须指定其name属性

    <form>

    <form>用于定义表单,可以定义一个范围,代表采集用户数据的范围。

    • <form>属性
      • action:指定提交数据的URL

      • method:指定提交方式共七种,get/post比较常用

        • get:请求参数会在地址栏显式,参数大小有限制,不太安全
        • post:请求参数不会在地址栏中显式,会封装在请求体中,参数大小没有限制,较为安全
      • target:规定在何处打开链接文档。

        • _self:默认在当前页面打开
        • _blank:在空白页打开

    <input>

    <input>用于定义输入空间,搜集用户信息,根据不同的type属性值,拥有很多样式:

    • text:默认文本框。
    • password:密码框。
    • radio:单选框。要想达到单选的效果,必须name值一致,且建议每种选择定义一个value。
    • checkbox:复选框。复选框name值建议也一致,value值不一致。
    • file:文件选择框。
    • image:将图片作为提交按钮。
    • submit:提交表单数据的按钮。
    • reset:重置数据的按钮。
    • button:普通按钮。
    • email:邮箱。

    <input> 标签还有其他的属性,比如:

    • placeholder:定义输入字段的提示。
    • checked:规定该元素首次加载被选中。
    • value:
      • 对于button、reset、submit:value值是按钮上显示的文本。
      • 对于text、password、hidden:value是输入字段的初始值。
      • 对于checkbox、radio、image:value是输入相关联的值。

    表单其他元素

    <textarea>:定义多行的文本输入空间。

    • cols:定义宽度。
    • rows:定义行数。
    • placeholder:定义预期提示字。

    <select><option>

    • <select>定义单选或多选菜单。
    • <option>定义下拉列表中的一个选项。
      • selected:规定该选项首次显示时为选中状态。
      • value:选项值。

    <label>:为<input>元素定义标注。

    • for属性:可以绑定到指定id的元素,在点击label文本的时候,就会自动聚焦到相关元素上,非常好用。

    四、全局属性

    全局属性可以应用于所有的HTML元素。

    • id:规定元素唯一的id,作为链接锚。
    • class:规定元素的一个或多个类名(不能以数字开头)。
    • style:规定行内CSS样式。

    五、重要实体名称

    结果 实体名称
    > &gt;
    < &lt;
    & &amp;
    ' &apos;
    " &quot;

    参考:https://www.w3school.com.cn/tags/html_ref_byfunc.asp

  • 相关阅读:
    蒙特卡洛法(随即取样法) 数模 笔记
    【数模学习】Matlab 符号微积分 计算微分、雅可比矩阵、不定积分与定积分、求解微分方程
    Length of Last Word
    基于视频深度学习的人物行为识别 资料汇总
    3S比赛预定
    求解一元多次方程 牛顿迭代法
    LeetCode | Climbing Stairs
    LeetCode | Palindrome Number
    LeetCode | Merge Sorted Array
    LeetCode | Valid Palindrome
  • 原文地址:https://www.cnblogs.com/summerday152/p/12358476.html
Copyright © 2011-2022 走看看