安装 Vscode

安装拓展

新建一个.html文件

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dome01</title>
    <link rel="stylesheet" type="text/css" href="demo.css" />
</head>
<body>
    
</body>
</html>

meta标签

meta标签：主要用于设置网页中的一些元数据，元数据不是给用户看的

标签	描述
name	指定的数据名称
content	指定的数据的内容
keywords	表示网站的关键字，可以同时指定多个关键字，根据搜索的关键字显示对应的网页
title	标签的内容作为搜索结果的超链接上的文字显示
name	指定的数据名称

<meta name="keywords" content="HTML,CSS,JavaScript,vue">

表示网页根据用户搜索的关键字，来进行相关网页数据的呈现，关键词越多，被搜索到的几率越大。

语义标签

h、p、hgroup、em、strong、blockquote、q、br……

标签	描述
h	h1 ~ h6 重要性依次递减，h1仅次于title标签，一般情况下一个页面中只有一个h1
p	标签表示页面中的一个段落
em	标签表示用于表示语音语调的一个加重，不会独占一行，称为行内元素（inline element）说人话--斜体
strong	标签表示强调说人话--加粗
b	加粗
br	标签表示换行
hgroup	标签用来为标题分组，可以将一组相关的标题同时放入到hgroup中
blockquote	指定的数据名称
q	标签表示短引用

 h 标签
 标题标签都是块元素
 在页面中独占一行的元素称为块元素（block element）

列表

标签	描述
ol	定义有序列表
ul	定义无序列表
li	定义列表项
dl	定义列表
dt	自定义列表项目
dd	定义自定列表项的描述

ol

<ol start="50">
<!-- 第一个的序号 -->
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

ul

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

dl dt dd

<dl>
  <dt>11</dt>
  <dd>qqq www</dd>
  <dt>22</dt>
  <dd>www eee</dd>
</dl>

11: qqq www
22: www eee

表格

标签	描述
table	定义表格
th	定义表格的表头
tr	定义表格的行
td	定义表格单元
caption	定义表格标题
colgroup	定义表格列的组
col	定义用于表格列的属性
thead	定义表格的页眉
tbody	定义表格的主体
tfoot	定义表格的页脚

 可以用CSS 调样式

<h4>一行三列:</h4>
<table border="2" cellspacing="10">
      <!-- 有边框, 间距10-->
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
</table>

<h4>两行三列:</h4>
<table border="0" cellspacing="0">
    <!-- 无边框, 间距零-->
<tr> 
  <th>Header 1</th> 
  <th>Header 2</th> 
  <th>Header 3</th> 
  <!-- 表头-->
</tr>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

一行三列:

100

200

300

两行三列:

Header 1	Header 2	Header 3
100	200	300
400	500	600

表单

文本域（Text Fields）

文本域通过 <input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

<form>  
    First name: <input type="text" name="firstname"><br>  
    Last name: <input type="text" name="lastname">  
</form>

密码字段

密码字段通过标签 <input type="password"> 来定义:

<form>  
    Password: <input type="password" name="pwd">  
</form>

单选按钮（Radio Buttons）

<input type="radio"> 标签定义了表单的单选框选项:

<form action="">  
    <input type="radio" name="sex" value="male">男<br>  
    <input type="radio" name="sex" value="female">女  
</form>

复选框（Checkboxes）

<input type="checkbox"> 定义了复选框。复选框可以选取一个或多个选项：

<form>  
    <input type="checkbox" name="vehicle" value="Bike">我喜欢自行车<br> 
    <input type="checkbox" name="vehicle" value="Car">我喜欢小汽车  
</form>

标签	描述
form	定义供用户输入的表单
input	定义输入域
textarea	定义文本域 (一个多行的输入控件)
label	定义了 `<input>` 元素的标签，一般为输入标题
select	定义了下拉选项列表
optgroup	定义选项组
option	定义下拉列表中的选项
button	定义一个点击按钮

布局

布局标签

header、main、footer、nav、aside、article、section、div、span

标签	描述
header	表示网页的头部，可以有多个
main	表示网页的主题部分，一个页面只有一个
footer	表示网页的底部
nav	表示网页中的导航
aside	表示和主题相关的其他内容（如侧边栏）
article	表示一个独立的文章
section	表示一个独立的区块，上边的标签都不能表示时使用section

     div  标签没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素，代替以上
     span 行内元素，没有任何的语义，一般用于在网页中选中的文字

div

<div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。
使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

span

<span> 元素是内联元素，可用作文本的容器
<span> 元素也没有特定的含义。
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

标签	描述
div	定义了文档的区域，块级 (block-level)
span	用来组合文档中的行内元素，内联元素(inline)

相对路径

 相对路径
     当我们需要跳转至服务器内部的页面时，一般我们都会使用相对路径，使用.或..开头

   一般./被省略
    ./表示当前文件所在目录
    ../表示当前文件所在目录的上一级目录

超链接 href、a

 超链接
 可以让我们从当前页面跳转至其他页面，或者跳转至其他位置
 
 使用 a 标签来定义超链接
      属性：
         href 指定跳转的目标路径
             -值 可以是一个外部网站的=地址
             -也可以写一个内部页面的地址
 
 超链接时应该行内元素，在 a 标签中也可以嵌套除了自身之外的任何元素

<a href="https://baidu.com">点击跳转百度</a>
<a href="demo02.html">

<a href="https://baidu.com" target="_blank">点击跳转百度</a>
<!-- 在一个新的页面中打开超链接 -->
<a href="https://baidu.com" target="_self">点击跳转百度</a>
<!-- 默认值 在当前页面中打开超链接 -->

可以直接将超链接的href属性设置为#，这样点击超链接以 页面不会发生跳转，而是跳转到当前页面的顶部位置

 <a href="#bottom">去底部</a>
 <a id="bottom" href="#">回到顶部</a>

<!--可以使用JavaScript:; 来作为href的属性，此时点击这个超链接什么也不会发生-->

<a href="javascript:;">这是一个新的没有指定地址的超链接</a>

这是一个新的没有指定地址的超链接

补充

html:
  <a onclick="goTo()">利用 scrollIntoView 跳转到 d</a>
  <p>-------------分隔线-------------</p>
  <div id="dd">ddd</div>

JS:
  var dd = document.querySelector('#dd')
  function goTo()
  {
    dd.scrollIntoView()
  }

图片格式

文件类型	特点
jpeg(jpg)	支持的颜色比较丰富，不支持透明效果，不支持动图。一般用来显图片
gif	支持的颜色比较少，支持简单透明，支持动图。颜色单一的图片，动图
png	支持的颜色丰富，支持复杂透明，不支持动图。颜色丰富，复杂透明图片
webp	这种格式是谷歌新推出的专门用来表示网页中的图片格式。它具备其他图片格式的所有优点，而且文件夹特别小。缺点：兼容性不好(主流可用)
base64	将图片使用base64进行编码（对数据进行加密），将图片转换为字符，通过字符的形式来引入图片。一般都是一些需要和网页以前加载的图片才会使用base64。加载速度快

音频播放 audio、embed

音频播放
     audio 标签用来向页面中引入一个外部的音频文件
           ——音频文件引入时，默认情况下不允许用户自己控制播放停止
 属性：
     controls 是否允许用户控制播放
     autplay  音频文件是否自动播放
             ——大部分游览器不会用音乐自动播放
     loop     音频是否循环播放

<audio src="……" controls autoplay></audio>

<audio controls>
    <source src="……">
</audio>

视频播放
     video 标签引入视频文件
         ——使用方式和audio基本上是一样的
         ——不同游览器使用不同的引入方式

<vedio controls>
    <source src="……">
</vedio>

HTML培训

HTML

HTML

meta标签

语义标签

列表

ol

ul

dl dt dd

表格

一行三列:

两行三列:

表单

文本域（Text Fields）

密码字段

单选按钮（Radio Buttons）

复选框（Checkboxes）

布局

布局标签

div

span

相对路径

超链接 href、a

图片格式

音频播放 audio、embed