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. 教你5分钟做个手机APP[视频]

    天天宅在家里,没什么事做,录个教学视频吧! 发到了视频网站上去根本没人看,伤心ing啊! 不知cnblogs上面是否让我发! 先上一张效果图看看哈: 如果播放不正常请点这里:https://www.b ...

  2. eclipse运行python 安装pydev 版本匹配问题

    Eclipse 4.5, Java 8: PyDev 5.2.0 PyDev 5.2.0 版本路径:https://dl.bintray.com/fabioz/pydev/5.2.0 1.安装时注意: ...

  3. [python之路]变量和字符编码

    变量和字符编码 #变量##声明变量```#_*_coding:utf-8_*_ name = "Tom"```上述代码声明了一个变量,变量名为: name,变量name的值为:&q ...

  4. Codeforces_492_E

    http://codeforces.com/problemset/problem/492/E 题目规定了gcd=1,可以在纸上模拟一下,发现每一个起点,都会经历过n个点,n个点都是不同行不同列.可以把 ...

  5. GTMD并查集！

    徐州的A我因为并查集写错T了整场.. int find(int x){ return fa[x]==x?x:fa[x]=find(fa[x]); } GTMD!

  6. Descriptor - Python 描述符协议

    描述符(descriptor) descriptor 是一个实现了 __get__. __set__ 和 __delete__ 特殊方法中的一个或多个的. 与 descriptor 有关的几个名词解释 ...

  7. 什么是JWT以及具体应用

    jwt理论阮大神已经解释的很到位了 http://www.ruanyifeng.com/blog/2018/07/json_web_token-tutorial.html jwt官网收录了多种实现库, ...

  8. 数据算法 --hadoop/spark数据处理技巧 --（15.查找、统计和列出大图中的所有三角形 16.k-mer计数）

    十五.查找.统计和列出大图中的所有三角形 第一步骤的mr: 第二部mr: 找出三角形 第三部:去重 spark: 十六: k-mer计数 spark:

  9. RFC笔记—IP Version 6 Addressing Architecture

    IP Version 6 Addressing Architecture,RFC4291 It includes the basic formats for the various types of ...

  10. 搭建ELK 集群 rpm安装

    上次是使用docker搭建的ELK,三个软件都跑在一台机器的一个docker中,这个就当是测试环境吧. 下面开始搭建正式环境下的ELK集群. 三台服务器 A:logstash B:Elasticsea ...