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. 【WPF学习】第三十九章 理解形状

    在WPF用户界面中,绘制2D图形内容的最简单方法是使用形状(shape)——专门用于表示简单的直线.椭圆.矩形以及多变形的一些类.从技术角度看,形状就是所谓的绘图图元(primitive).可组合这些 ...

  2. 形象解释各种卷积算法（Convolution animations）

    No padding, no strides Arbitrary padding, no strides Half padding, no strides Full padding, no strid ...

  3. meta 的作用 搜集

    Meta标签中的format-detection属性及含义   format-detection翻译成中文的意思是“格式检测”,顾名思义,它是用来检测html里的一些格式的,那关于meta的forma ...

  4. Standby Redo Logs的前世今生与最佳实践

    编辑手记:使用过Data Guard的人应该对于Standby Redo Logs都不陌生,在配置了 Standby Redo Logs的standby中,能够进行日志的实时应用,同时Standby ...

  5. 利用视频解析网站免费观看各大平台VIP电影

    需求: 观看VIP电影.VIP电视 准备: 1.视频解析网站 2.VIP电影URL 教程开始: 1.百度搜索[视频解析],会索引出大量的视频解析网站,随便选择一个网站. 2.找到想观看的VIP视频,复 ...

  6. C++括号匹配检测（用栈）

    输入一串括号,包括圆括号和方括号,()[],判断是否匹配,即([]())或[([][])]为匹配的正确的格式,[(])或([())为不匹配的格式. #include<iostream> # ...

  7. mysql添加远程权限

    mysql -u root -p grant all privileges on *.* to root@'%' identified by "password"; flush p ...

  8. centos7.5下yum安装nginx-1.14.2

    rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm ...

  9. [Python]公司接口返回值规范

    返回值规范 json { "code":200, "message":"" "data":[ { "title ...

  10. vux-- Vue.js 移动端 UI 组件库

    1.使用 安装或更新: npm install vux --save npm install vux-loader --save 如果没有安装less: npm install less less-l ...