一、HTML

1.1 元素

<!-- <!DOCTYPE html> 文档声明，放在最前面，不能省略，告诉浏览器当前页面是HTML5页面 -->
<!DOCTYPE html>
  <!-- lang =language，值为en、zh-CN等 -->
  <!-- w3c建议添加lang属性，一帮助语音合成工具确定使用的发音，二帮助翻译工具确定要使用的翻译规则 -->
  <html lang="en">
  <head>
    <!-- <meta> 元数据：描述数据的数据，一般用于描述网页的各种信息，比如字符编码、网页标题、网页图标 -->
    <!-- charset：字符编码:ASCII(英文), GB2312(中英文), GBK(中英文，中文繁体), utf-8(涵盖几乎所有国家语言) -->
    <meta charset="UTF-8"> //元数据，描述往回走那的各种信息
    <title>Title</title> // 网站名称
    <link rel="icon" href="favicon.ico"> // 网站图标
    <link rel="stylesheet" href="style.css"> // 引入样式
    <style>
      // 样式
    </style>
  </head>
  <body>

  </body>
</html>

1.2 基本元素

<h1>一级标题</h1> ··· <h6>六级标题</h6>
<p>段落</p> // <p>标签里面不能加<div>标签
<strong>加粗</strong>
<img src="图片路径" alt="当图片加载失败时显示的文字" title="当鼠标悬浮在图片上时显示的文字"> //图片
<span>行内元素</span>
<div>一般作为其它元素的父容器，把其它元素包住，代表一个整体</div>
<a href="跳转链接" target="_blank">定义超链接</a> // target： ——self(默认值)：自己， 当前标签页打开； _blank: 空白，新标签页打开; 
<iframe src="链接"></iframe>

1.3 其它元素

<code>代码, font-family:monospace; 等宽字体</code>
<br> // break，打断，换行
<hr color="red"> // 分割线，很少用
&nbsp; 空格，&lt; 小于, &gt; 大于// 字符实体(Character Entity)，text-indent：2m; 缩进两个空格

二、内容详解

2.1 a元素的补充

  • 锚点链接(点击a标签，跳到相应位置) 
<a href="#title1">标题1</a>
<a href="#title1">标题1</a>
<a href="#title1">标题1</a>

<h2 id="title1">
    标题1
</h2>

<h2 id="title2">
    标题2
</h2>

<h2 id="title3">
    标题3
</h2>
  • 伪链接：没有指明具体链接地址的链接，有时候可以把a链接当作按钮使用 
<a href="#">锚点链接，跳到顶端</a>
<a href="#" onclick="return false;">伪链接1</a>
<a href="javascript: alert('javascript:后面写一些js代码')">伪链接2</a>
<a href="" onclick="alert('javascript:后面写一些js代码')">伪链接3</a>
  • a链接不一定跳转页面，可下载资源，发送邮件等

2.2 URL(Uniform Resource Locator 统一资源定位符)

  • 域名通过dns服务器解析为ip地址

  • URL的基本格式：协议://主机地址:端口（默认80）/路径

  1. 协议：不同的协议，代表着不同的资源查找方式、资源传输方式（http://（远程网络资源 ）、file://（本地资源）、mailto:（电子邮件）、ftp://（共享资源）、ed2k://（通过支持ed2k(专用下载链接)协议的P2P软件访问该资源，代表软件：电驴）、thunder://（通过支持thunder（专用下载链接）协议的P2P软件访问该资源，代表软件：迅雷））
  2. 主机地址：存放资源的主机的ip地址（域名）
  3. 路径：资源在主机中的具***置
  4. 端口号范围（0~65535），HTTP默认端口号是80，FTP默认端口号是21

三、常见图片格式

  • png：静态图片，支持透明

  • jpg：静态图片，不支持透明

  • git：动态图片、静态图片、支持透明

  • webp：有静态与动态两种模式，同时提供了有损压缩和无损压缩的图片文件格式，google

四、URL/SEO优化

4.1 SEO优化

  • h元素有助于网站的SEO(Search Engine Optimization 搜索引擎优化)优化，可以促进关键字排名

  • 建议网页中最多只有1个h1元素

  • 乱用h元素会被认为作弊，最后导致k站

五、标签语义化

  1. 选择标签的时候要尽量让每一个标签都有正确的语义
  2. 虽然很多标签之间互换之后也能实现功能，但还是要遵守“标签语义化”的原则
  3. 好处：方便代码维护，减少开发者之间沟通成本
  4. 能让语音识别及搜索引擎正确识别