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

【学习笔记】：一天搞定HTML的更多相关文章

  1. shell脚本学习之6小时搞定(1)

    shell脚本学习之6小时搞定(1) 简介 Shell是一种脚本语言,那么,就必须有解释器来执行这些脚本. Unix/Linux上常见的Shell脚本解释器有bash.sh.csh.ksh等,习惯上把 ...

  2. Chrome扩展,应用开发学习笔记之2---恶搞百度一下

    Chrome扩展,应用开发学习笔记之2 恶搞百度一下 前面我们介绍了一个最简单的chrome扩展时钟,如今我来介绍一下一个恶搞百度一下的chrome扩展程序. 前面说过,manifest.json文件 ...

  3. netty权威指南学习笔记五——分隔符和定长解码器的应用

    TCP以流的方式进行数据传输,上层应用协议为了对消息进行区分,通常采用以下4中方式: 消息长度固定,累计读取到长度综合为定长LEN的报文后,就认为读取到了一个完整的消息,将计数器置位,重新开始读取下一 ...

  4. shell脚本学习之6小时搞定(6)-重定向及其他

    shell学习之-重定向及其他 目录 shell学习之-重定向及其他 1.输出重定向 2.输入重定向 3.重定向深入讲解 4./dev/null 文件 5.awk Unix 命令默认从标准输入设备(s ...

  5. Nginx深入学习（一篇搞定）

     我们的口号是:人生不设限!  一.nginx简介 1.什么是nginx Nginx (engine x) 是一个高性能的HTTP和反向代理服务器,特点是占有内存少,并发能力强,事实上nginx的并发 ...

  6. （数据科学学习手札100）搞定matplotlib中的字体设置

    本文示例文件已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 matplotlib作为数据可视化的利器,被广泛 ...

  7. 100天搞定机器学习|Day35 深度学习之神经网络的结构

    100天搞定机器学习|Day1数据预处理 100天搞定机器学习|Day2简单线性回归分析 100天搞定机器学习|Day3多元线性回归 100天搞定机器学习|Day4-6 逻辑回归 100天搞定机器学习 ...

  8. 100天搞定机器学习|Day33-34 随机森林

    前情回顾 机器学习100天|Day1数据预处理 100天搞定机器学习|Day2简单线性回归分析 100天搞定机器学习|Day3多元线性回归 100天搞定机器学习|Day4-6 逻辑回归 100天搞定机 ...

  9. [struts2学习笔记] 第二节 使用Maven搞定管理和构造Struts 2 Web应用程序的七个步骤

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/40303897 官方文档:http://struts.apache.org/releas ...

  10. sass笔记-1|Sass是如何帮你又快又好地搞定CSS的

    Sass学习笔记持续整理中,开篇不讲怎么安装,sass是什么,这些搜索引擎会告诉你,我们从sass的作用开始讲起,知道sass用来干什么,有什么作用,我们才能相信用sass的好处,并且时时刻刻想着sa ...

随机推荐

  1. No

    1.为什么A/D转换前需要采样保持电路,它的基本原理是什么? 因为被取样的信号是动态,随时改变的,而A/D转换需要时间,在这个转换的过程中,信号是变化的,为了弥补A/D转换的时间差,所以需要采样保持. ...

  2. go接口详解

    go面向接口编程知识点 接口定义与格式 隐式实现及实现条件 接口赋值 空接口 接口嵌套 类型断言 多态 接口定义与格式 接口(interface)是一种类型,用来定义行为(方法).这句话有两个重点,类 ...

  3. 题解 SP1716 【GSS3 - Can you answer these queries III】

    \[ Preface \] 没有 Preface. \[ Description \] 维护一个长度为 \(n\) 的数列 \(A\) ,需要支持以下操作: 0 x y 将 \(A_x\) 改为 \( ...

  4. 实例探究Aspectj，解析SentinelResourceAspect

    为了学习SentinelResourceAspect,这篇文章里我用Aspectj实现一个AOP实例,一起来看下. Sentinel 提供了 @SentinelResource 注解用于定义资源,支持 ...

  5. lwip stats

    lwip统计量分两种,一种是lwip自己的,一种是snmp的. 直接用snmp的 /* ----------------------------------- ---------- Statistic ...

  6. 处理异常未知端口 Lsof命令

    需要使用的命令:  ss -tnl 显示所有tcp已被监听的端口  lsof -i:端口 显示所有打开该端口的进程 工作实例: 某天通过ss -tnl发现有不认识的正在被监听的端口 ? 于是使用lso ...

  7. OSPF配置实验(一)

    单区域OSPF 命令: R1(config)#router ospf 1        //启动OSPF进程 R1(config-router)#router-id 1.1.1.1        // ...

  8. C语言RH850 F1L serial bootloader和C#语言bootloader PC端串口通信程序

                   了解更多关于bootloader 的C语言实现,请加我QQ: 1273623966 (验证信息请填 bootloader),欢迎咨询或定制bootloader(在线升级程 ...

  9. python pandas合并多个excel(xls和xlsx)文件（弹窗选择文件夹和保存文件）

    # python pandas合并多个excel(xls和xlsx)文件(弹窗选择文件夹和保存文件) import tkinter as tk from tkinter import filedial ...

  10. 献给即将35岁的初学者，焦虑 or 出路？

    导言:“对抗职场“35 岁焦虑”,也许唯一的方法是比这个瞬息万变的商业社会跑得更快!” 一直以来,都有许多人说“程序员或测试员是个吃青春饭的职业”,甚至还有说“35 岁混不到管理就等于失业”的言论. ...