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. [python]bytes和str

    Python 3.6.1 (v3.6.1:69c0db5050, Mar 21 2017, 01:21:04) [GCC 4.2.1 (Apple Inc. build 5666) (dot 3)] ...

  2. 永久解决AndroidStudio Aapt2的问题

    https://blog.csdn.net/qq_37280248/article/details/80142260 修改电脑c://user/王明 中文名去掉 https://www.jb51.ne ...

  3. CentOS使用465端口发送邮件

    1)邮件发送示例 方法1:echo "This is a test mail" | mail -s '邮件测试' 452666750@qq.com 方法2:mail -s '服务运 ...

  4. 免费网盘！无限申请5TB容量并且不限速的网盘！

    鸽了好久没有更新博客了哎…… 前言 这里我先说一下下,本人深受百度网盘坑害,自己上传的文件,16GB下载花了3天时间 最后下载失败? 所以找到的一个新的储存个人文件的方法. 这个网盘是onedrive ...

  5. php面试笔记（5）-php基础知识-自定义函数及内部函数考点

    本文是根据慕课网Jason老师的课程进行的PHP面试知识点总结和升华,如有侵权请联系我进行删除,email:guoyugygy@163.com 在面试中,考官往往喜欢基础扎实的面试者,而函数相关的考点 ...

  6. Hexo搭建静态博客踩坑日记(一)

    前言 博客折腾一次就好, 找一个适合自己的博客平台, 专注于内容进行提升. 方式一: 自己买服务器, 域名, 写前端, 后端(前后分离最折腾, 不分离还好一点)... 方式二: 利用Hexo, Hug ...

  7. TCP加速方式

    使用windows scaling TCP Extensions for High Performance, RFC1323,https://www.ietf.org/rfc/rfc1323.txt ...

  8. vSphere虚拟系统 添加虚拟服务器

    虚拟插槽数:插槽的概念与物理服务器的物理CPU类似,为虚拟机分配m个插槽,相当于为物理服务器配置了m颗物理CPU: 每个插槽的内核数:相当于物理服务器每颗物理CPU的核心数为n: 在上述条件下虚拟机获 ...

  9. Navicat 导入数据时报Incorrect datetime value: '0000-00-00 00:00:00.000000' 错误

    今天重装了个系统,装好MySQL和Navicat之后导入SQL时报了Incorrect datetime value: '0000-00-00 00:00:00.000000' 错误, 查了资料说是m ...

  10. shell脚本自动备份MySQL数据库

    脚本如下: #!/bin/bash #数据库IP dbserver='127.0.0.1' #数据库用户名 dbuser='root' #数据密码 dbpasswd=' #数据库,如有多个库用空格分开 ...