html 即 超文本标记语言，其中，超文本是指连贯单个网站内或多个网站间的网页的链接

切记：html 不是编程语言，它只是一种标记语言

1、根本的构造标签

html 中的根本构造标签是指 页面中的最根本的标签，也称为骨架标签，包含 <html>、<head>、<title>、<body>

其关系为：

<html>    <head>        <title> 骨架构造 </title>    </head>    <body>        <div>Hello world!</div>    </body></html>
  • <html> 元素：蕴含整个页面中的内容，也称为根元素、根标签
  • <head> 元素：文档头部，该内容对用户是不可见的，其中包含：搜索引擎的搜寻关键字、页面形容、字符编码申明、页面题目以及CSS样式表
  • <title> 元素：文档头部，显示页面标签上，也作为珍藏的形容文字，放在 <head> 中
  • <body> 元素：页面主体内容，包含文本、图像、多媒体等等，是用户能够看见的内容

2、页面开发的根本骨架

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title> 页面的根本骨架 </title></head><body>    未曾与你分享的工夫，我在提高！</body></html>

这就是页面开发的根本骨架，包含了根本根本标签和一些申明

  • <!DOCTYPE html>：文档类型申明，通知浏览器我想要采纳HTML5版本来显示页面

    1、<!DOCTYPE> 申明标签必须卸载文档的最后面

    2、留神：<!DOCTYPE> 不是一个HTML标签，而是一个文档申明标签

  • <html lang="">：定义以后文档显示的语言，en 为英语，zh-CN 为中文

  • <meta>：形容HTML文档的元数据

    1. charset属性来定义HTML文档要应用哪种文字编码，默认定义为 UTF-8
    2. 能够指定页面的形容、搜索引擎关键词、文档最初批改工夫等等

3、罕用标签

题目标签

h1 ~ h6 6级标签，h1 最大，h6 最小

div 和 span 标签

块级标签：div

行内标签：span

这两个是用得最多的标签，然而当初提倡用 html5 的语义化标签了

段落换行分隔标签

段落标签：<p>

换行标签：<br />

分隔标签：<hr>

<p>未曾与你分享的工夫，我在提高！</p><br /><hr>

文本格式化标签

语义标签阐明
加粗<strong></strong> 或者 <b></b>举荐应用<strong>加粗标签，语义更加强烈
歪斜<em></em> 或者 <i></i>举荐应用<em>歪斜标签，语义更加强烈
删除线<del></del> 或者 <s></s>举荐应用<sel>删除标签，语义更加强烈
下划线<ins></ins> 或者 <u></u>举荐应用<ins>下划线标签，语义更加强烈
须要留神一下：文本格式化标签是行内标签

图像标签

<img>： 图像标签，在HTML中，该标签用于定义HTML页面中的图片

<img src="图片门路">

<img> 标签的属性：

属性属性值阐明
src图像门路==必须属性==
alt文本==替换文本==；图片不能显示时，就显示该文本
title文本==提醒文本==；鼠标放在图像上时，显示的文字
width像素设置图片的宽度
height像素设置图片的高度
border像素设置图片的边框粗细
<img src="./image/images1/01.jpg" alt="加载失败" title="图片" width="50px" border="5">
  • 宽高是要任意设置一个，另一个会等比例缩放

超链接

<a href='url' target=''> 文本或图形 </a>
  • href：就是连贯指标的url地址

  • target：指定链接页面关上的形式

    1. _self：在以后页面关上（默认）
    2. _target：在新窗口中关上

表格、列表、表单

表格

表格标签的根本语法

<table>    <tr>        <td> ... </td>    </tr>    ...</table>
  • <table></table>：定义表格的标签
  • <tr></tr>：定义表格的行
  • <td></td>：定义行中的格

个别咱们为了更加语义化，会这样写：

<table>    <thead>        <tr>             <th> ... </th>         </tr>    </thead>    <tbody>        <tr> <td> ... </td> <tr>        ....    </tbody><table>
  • <thead></thead>：表头
  • <th></th> ：表头的行（会主动加粗）
  • <tbody></tbody>：表格的主体

合并表格

  • 跨行合并：rowspan=合并单元格的个数
  • 跨列合并：colspan=合并单元格的个数

间接写在单元格上，如：<td rowspan='2'> </td>

列表

表单