HTML相关知识总结

爱笑的狐狸
321 阅读11分钟

一、HTML简介

1.HTML是什么

  • HTML是超文本标记语言（Hypertext Markup Language）
  • 和普通文本比，内容更丰富。
  • 标记文本要变成超文本，就需要用到各种标记符号。
  • 语言同类物种进行沟通交流的表达方式

2、HTML发展史

IETF

（了解即可）全称：Internet Engineering Task Force（国际互联网工程任务组），成立于1985年底，是全球互联网最具权威的技术标准化组织，主要任务是负责互联网相关技术规范的研发和制定，当前绝大多数国际互联网技术标准出自IETF

W3C

（了解即可）全称：World Wide Web Consortium（万维网联盟），创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。到目前为止，W3C已发布了200多项影响深远的Web技术标准及实施指南，如广为业界采用的超文本标记语言（标准通用标记语言下的一个应用）、可扩展标记语言（标准通用标记语言下的一个子集）以及帮助残障人士有效获得Web内容的信息无障碍指南（WCAG）等，有效促进了Web技术的互相兼容，对互联网技术的发展和应用起到了基础性和根本性的支撑作用。

W3School（一个知名学习网站）：www.w3school.com.cn/

W3C官方网站：www.w3.org/

WHATWG

（了解即可）全称：Web Hypertext Application Technology Working Group（网页超文本应用技术工作小组）网页超文本应用技术工作小组是一个以推动网络HTML 5 标准为目的而成立的组织。在2004年，由Opera、Mozilla基金会和苹果这些浏览器厂商组成。

二、HTML基础知识

1、HTML初体验

1.1 标签

  • 标签也叫做标记或者元素
  • HTML 标签是由尖括号包围的关键词，比如**<marquee>**
  • 标签分为：双标签 与 单标签 （绝大多数都是双标签）
  • 标签名不区分大小写，<marquee>和<MARQUEE>表示意思是一样的,但推荐小写，因为小写更规范。
  • 浏览器不会显示html标签，而是使用标签来解释页面的内容

1.2 标签属性

  • HTML属性一般都出现在HTML的开始标签中，是HTML标签的一部分

  • 标签可以有属性,它包含了额外的信息.属性的值双引号，也可以写成单引号，建议双引号。

  • 标签可以拥有多个属性。

  • 属性由属性名和值成对出现。

  • 标签中不要出现同名属性，否则后写的会失效

<标签名 属性名1="属性值" 属性名2="属性值" ... 属性名N="属性值"> <!– 输出内容… --> </标签名>

1.3 代码编辑器

代码编辑器是程序员用于编写[计算机程序的文本编辑器。它通常是一个独立的应用程序，或是作为集成开发环境的一部分存在，或者是一个运行于浏览器中的网页编辑器。由于程序员的主要任务就是编写代码，因此代码编辑器也就成为了最为重要的开发工具。

前端常见的代码编辑器：

编辑器下载地址
WebStormblog.jetbrains.com/webstorm/
VSCodecode.visualstudio.com/
HbuilderXwww.dcloud.io/hbuilderx.h…
Sublime Textwww.sublimetext.com/
Atomatom.io/
Bracketsbrackets.io/
NodePad++notepad-plus-plus.org/
EditPluswww.editplus.com/
Vimwww.oschina.net/p/gvim
Dreamweaverwww.adobe.com/cn/products…

企业级应用最多的编译器：vscode 和 webstorm

2.HTML结构

2.1 标准结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

2.2 注释

  • 注释就是html中对某一块内容的解释，不会被浏览器编译
  • 注释的快捷键 ctrl+/ 或者 ctrl+shift+/
  <!-- 吃饭睡觉打豆豆 -->
  <!-- 
    吃饭
    睡觉
    打豆豆
  -->

==注意：注释不能嵌套==

3、HTML标签分类

3.1 双标签

标签中第一个是开始标签，第二个是结束标签（闭合标签）

<div></div>
<html></html>

3.2 单标签

<meta/>
<br> 或 <br/>
<hr> 或 <hr/>

4、HTML标签关系

4.1 并列关系

<html>
  	<head>
  	</head>
  	<body> 
  	</body>  
</html>

4.2 嵌套关系

<html>
  	<head>
  	</head>
  	<body> 
  	</body>  
</html>

5、HTML常用标签

5.1 主体结构标签

标签名标签的语义、效果标签属性单还是双
html根标签lang ：指定：语言、国家/地区，通常为：zh-CN双
head页面头部双
meta设置网页元信息charset ：指定字符集编码，建议设置为：UTF-8单
title网页标题双
body页面主体双

5.2 排版结构标签

标签名标签的语义、效果单还是双
h1~h6标题（文字会加粗放大显示）双
p段落双
br换行（它的重点在效果）单
hr分割线单
pre按原文显示双
div最常见的标签，没有任何语义，用于页面布局双

  • 标题标签

    • h1 ~ h6分别依次表示不同级别的标签，

      定义最大的标题,

      定义最小的标题

    • 在浏览器的默认状态下，每种标题均为加粗效果，各自对应不同的文字大小

    • 注意：（1） 页面中h1最好只写一个，其他标题标签可以适当的多写

      ​ （2）h1~h6不要相互嵌套

  • 段落标签

    • p 标签用于定义一个段落 <p></p>
    • p 标签不能嵌套
    • p 标签很特殊！它里面不能有：h1~h6、p、div标签

  • 换行标签

    • br标签表示换行，单标签

    • <p>
   桃花坞里桃花庵，桃花庵里桃花仙。<br>
   桃花仙人种桃树，又折花枝当酒钱。
</p>

  • div标签

    • 整体页面布局当中最重要的HTML元素
    • 没有具体的含义，主要用于网页的布局，通过一个一个的div将页面划分为不同的部分，之后在针对部分进行开发
    • 注释：<div> 是一个块级元素，也就是说，浏览器通常会在 div 元素前后放置一个换行符。
    • 无语意标签，一般用于包裹其他标签。

​

5.3 文本标签

用于包裹：词汇。短语等等

标签名标签的语义、效果单还是双
em表示强调，斜体字双
strong表示强调（语气更强），粗体字双
span没有语义，用于包裹短语的通用容器双
del删除的文本双
ins插入的文本双
sub下标字双
sup上标字双

6、HTML功能标签

6.1 img标签

  • 基本使用
<img src="图片位置">
src 是标签的必须属性，它用于指定图像文件的路径和文件名
  • 属性
属性属性值说明
src图片路径必须属性
alt文本替换文字，图片不能显示，提示的文字
title文本提示文本，鼠标放到图像上显示的文字
width像素设置图像的宽度
height像素设置图像的高度
border像素设置图像的边框的粗细
  • 注意点
    • 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
    • 属性采取键值对的格式，即 key=“value" 的格式，属性 =“属性值”

6.2 超链接

  • 基本格式
<a href='要跳转的地址'>超链接文字</a>

  • 使用场景

    • 1、链接地址
    <a href="http://www.atguigu.com/">尚硅谷</a>
    • 2、下载地址
    <a href="atguigu.zip" download="自己起名字">下载一个zip压缩文件</a>
download属性用来设置下载文件的名称(firefox/chrome/opera支持)
    • 3、锚点
    <h1 id="1">
  我是1
</h1>
<a href="#1">回到1</a>

  • a标签的属性

    • href - 代表要跳转到什么网址
    • target - 用来指定那个窗口打开该网址

  • 扩展

网站链接       <a href="http://www.atguigu.com">尚硅谷</a>
电子邮件       <a href="mailto:lijing1@atguigu.cn">写信给我</a>
手机电话       <a href="tel:10086">10086</a>
短信信息       <a href="sms:10086">发短息给我</a>

6.3 列表标签

列表最大的特点就是整齐，有序

列表可以分为三大类：有序列表、无序列表、自定义列表

  • 无序列表

<ul> 标签表示 HTML 页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用

标签定义。

语法格式如下：

<ul> 
    <li>列表项1</li>   
    <li>列表项2</li>
    <li>列表项3</li>  
    ... 
</ul>

1、无序列表的各个列表项之间没有顺序级别之分，是并列的。

2、<ul></ul> 中只能嵌套 <li></li>，直接在 <ul></ul> 标签中输入其他标签或者文字的做法是不被允许的。

3、<li> 与 </li> 之间相当于一个容器，可以容纳所有元素。

4、<li> 与 </li> 内部也可以嵌套无序列表。

  • 有序列表

有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。在 HTML 标签中，<ol> 标签用于定义有序列表，列表排序以数字来显示，并且使用<li> 标签来定义列表项。

基本语法如下：

<ol>   
    <li>列表项1</li>   
    <li>列表项2</li>  
    <li>列表项3</li>   
    ... 
</ol>
  1. <ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的。
  2. <li> 与 </li>之间相当于一个容器，可以容纳所有元素。
  • 自定义列表

自定义列表的使用场景:自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。在 HTML 标签中，

基本语法如下：

<dl>   
    <dt>名词1</dt>   
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd> 
</dl>
  • 列表总结
标签名定义说明
    		无序列表里面只能包含li，没有顺序，使用较多。 li里面可以包含任何标签。
      		有序列表里面只能包含li，有顺序，使用相对较少。li里面可以包含任何标签。
      		自定义列表里面只能包含dt和dd，dt和dd里面可以放任何标签。

      6.4 表格标签

      • 表格的主要作用：用来展示数据。

      • 表格的具体用法：

      <table>
  	<caption>表格名字</caption>
    <tr>
        <td>单元格内的文字</td>
        ...
    </tr>
    ...
</table>
      • 表格属性
      属性名属性值描述
      width像素值设置表格的宽度 （建议用css设置）
      height像素值设置表格的高度 （建议用css设置）
      border1或者""设置表格的边框 （建议用css设置）
      alignleft center right对齐方式 left/top/center（建议用css设置）
      cellspacing像素值设置单元格之间的间隙 （建议用css设置）
      cellpadding像素值设置单元格内边距 （建议用CSS设置）
      • 表格总结
        • 表格的相关标签：table thead tbody head body tr th td
        • 表格的相关属性：cellspacing cellpadding width height border
        • 合并单元格：rowspan collspan

      6.5 表单标签

      • 什么是表单？

      网页中，我们需要跟用户进行交互，收集用户资料，此时就需要用到表单。使用表单的目的就是为了收集用户信息。一般用于注册和登陆页面的设计。

      • 表单的组成

        • 表单域

          表单域相当于一个容器，用来容纳所有的表单元素和提示信息

        • 提示信息

          一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。

        • 表单元素也叫做表单控件

          包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

      • 基本使用方式

      <form action="url地址" method="提交方式" name="表单域名称">
    各种表单元素控件
</form>
      • 表单属性
      属性属性值作用
      actionurl地址用于指定接受并处理表单数据的服务器程序的url地址
      methodget/post请求方式用于设置表单的提交方式
      name表单名称（使用不多）用于指定表单的名称，以便于区分同一个页面的不同的表单域
      • 表单标签总结
        • 以后做项目的时候使用比较多
        • 在登录页面中使用较多，需要将用户名和密码提交给后端，然后进行匹配。

      7、HTML字符实体

      字符实体有三部分：一个和号&和一个实体名称（或者一个# 和一个实体编号），以及一个分号;。

      符号描述实体名称实体编号
      空格&nbsp; 
      <小于号&lt;<
      大于号&gt;>
      &和号&amp;&
      "引号&quot;"
      ´反引号&acute;´
      ￠分（cent）&cent;¢
      £镑（pound）&pound;£
      ¥元（yen）&yen;¥
      €欧元（euro）&euro;€
      §小节&sect;§
      ©版权（copyright）&copy;©
      ®注册商标&reg;®
      ™商标&trade;™
      ×乘号&times×
      ÷除号&divide;÷

      8、HTML全局属性

      属性名含义
      classclass 规定元素的一个或多个类名（引用样式表中的类）class 属性不能在以下 HTML 元素中使用：base, head, html, meta, param, script, style 以及 title。
      id规定元素的唯一 id。
      dir规定元素中内容的文本方向。注意：dir 属性在以下标签中无效：base, br, frame, frameset, hr, iframe, param 以及 script。
      style规定元素的行内 CSS 样式。
      title规定有关元素的额外信息。
      lang规定元素内容的语言，值是语言代码，如 cn、zh。注意：lang 属性在以下标签中无效：base, br, frame, frameset, hr, iframe, param 以及 script。
      avatar
      文章
      阅读
      粉丝