文章目录

  • 一：HTML基础
  • 1、HTML介绍
  • 2、HTML语法
  • 3、HTML组成
  • 4、HTML基础标签
  • 5、结构元素
  • 6、分组结构
  • 7、页面交互元素
  • 8、文本层次语义元素
  • 9、全局属性
  • 二、HTML进阶
  • 1、div盒子元素
  • 2、视频和音频元素


一：HTML基础

1、HTML介绍

HTML又称超文本标记语用于创建言（标签+标记）,是一种用于创建网页的标准标记语言。可以配合Javascript和css3建立web网站，HTML运行于浏览器，由浏览器解释运行。

2、HTML语法

  • html语法构成：标签和属性
  • <标签名></标签名> 双标记
  • <单标签/> 单标记
  • <标签名 属性名01=“具体值” 属性名02=“具体值” ></标签名> ：属性可多个，空格隔开

3、HTML组成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    头部 --可在这引用外部文件和声明HTML基本信息
</head>
<body>
    主体 --在这编辑HTML代码
</body>
</html>

4、HTML基础标签

  • h1-h6 标题标签：用于做标题用的h1到h6的默认样式(字体大小、文本粗细)逐级减小
<h1>唯一性：同页面只能出现一次，放网站logo用的，不能嵌套<h1>
<h2>出现任意次，但不能嵌套</h2>
<h3>出现任意次，但不能嵌套</h3>
<h4>出现任意次，但不能嵌套</h4>
<h5>出现任意次，但不能嵌套</h5>
<h6>出现任意次，但不能嵌套</h6>
  • 文本格式化标记标签
<b>字体加粗</b>
<strong>字体加粗</strong>
<u>字体有下划线</u>
<ins>字体有下划线</ins>
<sup>下标</sup>
<sub>上标</sub>
<s>字体有删除线</s>
<del>字体有删除线</del>
<i>字体倾斜</i>
<em>字体倾斜</em>
  • 段落标签p:这个标签占浏览器一行
<p>内容</p>
  • :可以放一段文字，但不占一行
  • 水平线
  • ,换行标签
  • 无序列表：前面带实心的列表符号（黑点）的列表
<ul>
    <li>标签1</li>
    <li>标签2</li>
</ul>
  • 有序列表：前面带123/abc/的列表
<ol type="a\A\i\I" start="从第几个开始">
    <li>标签1</li>
    <li>标签2</li>
</ol>
  • 自定义列表：前面可以自己定义的列表名
<dl>
    <dt>列表题</dt>
    <dd>列表</dd>
</dl>
  • 图片img标签
<img src="图片的地址" alr="图片无法加载的提示文字">
  • 超链接a标签:可以跳转网站
<a href="跳转的地址" target="_blank:弹出新窗口/_self:在当前页面"></a>
  • 表格标签table
<table border="表格线的粗细" cellspacing="边框间距" cellpadding='边框和内容距离'>
    <tr> tr:是一行
    	<td>
        	td:在行里的格子
            align="" ：水平对齐方式
            rowspan="数字"：合并行（数字代表几个单元格合并）
            colspan="数字"  合并列（数字代表几个单元格合并）
            注意：a、无论合并行还是和并列，操作的都是td
		 		 b、只要是跨行的都是合并行，没有跨行的都是合并列
		         c、和谁合并删除谁
		         sd、如果一个表格，既有合并行又有合并列，建议先合并列（为了方便自己好数和好删）
        </td>
    </tr>
</table>
  • 表单标签：用于向后端发送数据进行交互
<form name="表单名称" action='发送地址' method="数据传输方式 get/post">
    输入框：<input type="text">
    密码框：<input type="password">
    重置按钮：<input type="reset">
    单选按钮：<input type="radio">
    复选按钮：<input type="checkbox" name="v1">
    复选按钮：<input type="checkbox" name="v1">(name相同则是同一个复选)
    提交按钮：<input type="submit">
    按   钮： <input type="button">
</form>

5、结构元素

  • header元素：这个元素具有引导和导航作用。该元素可以包含通常放在页面头部的内容
<header>
	<h1>网页主题</h1>
</header>
  • nav元素：用于定义导航链接，该元素可以将具有导航性质的链接归纳在一个区域内，使页面语义更加明确
<nav>
	<ul>
        <li></li>
    </ul>
</nav>
  • article元素：代表文档、页面或者应用程序中与上下文无关的独立部分，经常用于定义一篇日志、一条新闻
<article>
</article>
  • aside元素：用来定义当前页面或者文章的附属信息部分，可以包含当前页面或主要内容相关的引用、侧边栏、广告、导航栏
<asize></asize>
  • section元素：用于对网站页面的内容分块。通常section元素由内容和标题
<section>
	<h2>标题</h2>
    <article>内容</article>
</section>
  • footer元素：用于定义一个页面或者区域的底部，它可以包含所有通常放在页面底部的内容
<footer>
	文章分页列表
</footer>

6、分组结构

  • figure元素和figcaption元素 ：

figure用于定义独立的流内容(图像、图表、照片、代码)一般指一个单独的单元。figure元素的内容应该与主内容相关，但如果被删除，也不会对文档流产生影响。figcaption用于为figure添加标题。一个figure可放多figcaption，且置于头或尾部。

<figure>
	<figcaption>标题</figcaption>
    <p>内容</p>
    <img>
</figure>
  • hgroup元素：用于将多个标题(主标题和副标题或者子标题)组成一个标题组，通常与h1-h6标题组合使用
<hgroup>
	<h1></h1>
    <h2></h2>
</hgroup>

7、页面交互元素

  • details元素和summary元素
    details元素用于描述文档某个部分的细节。summary元素经常与details元素配合使用，作为details的第一个子元素，用于为details定义标题。标题可见，当用户点击标题是details中的其他内容就会显示或隐藏。
<details>
	<summary>显示列表</summary>
    	<ul>
        	<li>隐藏列表</li>
    	</ul>
</details>
  • progress元素：用于表示一个任务的完成进度（value:已经完成的进度,max：总量大小）
<progress value="50" max="100"></progress>
  • meter元素:用于表示指定范围内的数值
<meter value="65" min="0" max="65" low="定义度量最低值的点" optimum="定义最佳值"></meter>

8、文本层次语义元素

  • time元素：用于定义时间日期，能够给搜索引擎智能识别出，一般无任何特殊效果
<time datetime="用于定义相应的时间或日期，取值为具体时间" pubdata="定义文档的发布时间"></time>
  • mark元素：文本高亮显示某些字符引用户注意
<mark>高亮显示的文字</mark>
  • cite元素：创建一个引用标记，用于对文档参考文献的引用说明
<cite>--路遥《平凡的世界》</cite>

9、全局属性

  • draggable属性：用于定义元素是否可以拖动，true值可拖动/false不可拖动
<article draggable="true">可拖动</article>
  • hidden属性：用于定义元素是否可以显示，true值可显示/false不可显示
  • spellcheck属性：用于Input元素和texttarea输入框,是否开启语法检查，true值可检查/false不可检查
  • contenteditable属性:规定是否可编辑元素的内容

二、HTML进阶

1、div盒子元素

盒子模型就是把HTML页面的元素看作是一种矩阵的盒子，也就是一个盛装内容的容器。每个盒子都由元素的内容、内边距、外边距和边框组成。

<div>
    <div>
        div中可以多层嵌套
    </div>
</div>

2、视频和音频元素

<video src="视频文件路径" controls='controls'>
	autoplay="autoplay":单页面载入完成后自动播放视频
    loop="loop":音频结束后重新开始播放
    preload="preload"：页面加载时进行加载，并预备播放
    poster="地址":但视频缓存不足时，该属性链接一个图像，必将该图像按照一定的比例显示出来
</video>

<auto src='音频文件路径' controls='controls'>
	autoplay="autoplay":单页面载入完成后自动播放音频
    loop="loop":音频结束后重新开始播放
    preload="preload"：页面加载时进行加载，并预备播放
</auto>