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. 解决Apple Mobile Device USB Driver

    在设备管理器里找到便携设备:APPLE IPHONE 更新驱动 自定义更新:在设备管理器里找到便携设备:APPLE IPHONE 更新驱动 自定义更新:C:\Program Files\Common ...

  2. 谈恋爱就像TCP连接

    这是一张很内涵的漫画--爱情是靠不住的,即使你使用TCP连接也是如此.一心要握手成功,却被RST的男人就是个彻底的杯具-- 小知识: 一个虚拟连接的建立是通过三次握手来实现的. 第一次握手:建立连接时 ...

  3. 【C/C++】概念： VC虚函数布局引发的问题

    在网上看到一个非常热的帖子,里面是这样的一个问题: 在打印的时候发现pFun的地址和 &(Base::f)的地址竟然不一样太奇怪了?经过一番深入研究,终于把这个问题弄明白了.下面就来一步步进行 ...

  4. Spacemacs安装

    Spacemacs官网 为什么选择Spacemacs Spacemacs是一个已经配好的Emacs和Vim,正如官网所说的The best editor is neither Emacs nor Vi ...

  5. 2020年，手把手教你如何在CentOS7上一步一步搭建LDAP服务器的最新教程

    同步滚动:关 什么是LDAP 什么是LDAP? 要想知道一个概念,最简单的办法就是wikipedia,当然也可以百科. LDAP全称是轻型目录访问协议(Lightweight Directory Ac ...

  6. VFP 用 SPT 来发布一条 SELECT 到一个新的 SQL Server 表

    为了发布一条 SQL SELECT 语句来创建一个新的 SQL Server 表,  SQL Server 数据库的 select into/bulkcopy 选项必须是可用的. 在默认情况下, 对于 ...

  7. jenkins 介绍 安装

    Jenkins是一个开源软件项目,是基于Java开发的一种持续集成工具,用于监控持续重复的工作, 旨在提供一个开放易用的软件平台,使软件的持续集成变成可能. Jenkins是可扩展的持续集成.交付.部 ...

  8. golang-练习ATM --面向对象实现

    package utils import ( "fmt" "strings" ) type StructAtm struct { action int loop ...

  9. 《python可以这样学》第二章

    Python序列 列表与列表推导式 列表创建与删除 创建列表对象 >>> a_list = list((3, 5, 7, 9, 11)) >>> a_list = ...

  10. Oracle中将列查询结果多行逗号拼接成一个大字段

    在11G以下版本中oracle有自带的函数wm_concat可以实现,如: select wm_concat(id) from table where col='1' 但是在12C版本中此函数无法使用 ...