HTML第一章 (WEB基础知识、 HTML入门、HTML的语法规则、HTML常用标签汇总、图片与超链接、HBuilder的快捷键)

本文链接：https://blog.csdn.net/a2499797637/article/details/127104868

一、WEB基础知识

我们可以做什么？
1. WEB前端大前端技术
2. PC页面移动端页面微信公众号小程序
3. 游戏数据可视化
4. 全栈工程师
web与internet
1. 互联网上存在很多的服务和应用，其中，最多的就是网站
2. 网站的服务就叫做www
3. 列举一些其他的服务 FTP/TELNET/DNS….
web页面需要用到的两种工具
1. 用户浏览页面的工具——浏览器
  1. 功能:发送请求，并接收渲染服务器响应回来的结果
  2. 产品:
    Netscape Navigator /Mozilla Firefox
    Microwsoft IE / Edge
    Google Chrome （快速安全稳定程序员的最爱)
    Apple Safari
2. 程序员编写网页的工具都有哪些——网页编辑器
  记事本 notepad++ editplus Dreamweaver Eclipse MyEclipse IDEA HBuilder VScode

二、HTML入门

1. 前端开发涉及到的三种语言——"前端三剑客"
1. HTML:内容层——负责页面的内容
2. CSS:样式层——负责页面的样式
3. Javascript:行为层——负责页面的行为/交互
定义
1. HTML 超文本标记语言 Hyper Text Markup Language
2. 简单的理解成我们的网页
3. 超文本:文本图片视频音频超链接控件…
4. 标记:html的语法标签<标签名>
5. html是一种语言，由大量的标签组成，html文件运行在浏览器上
HTML的特点
1. 以 .html 或者 .htm为后缀的
2. 由浏览器解析执行(默认代码从上往下，同一行从左往右按顺序执行)
3. 页面中可以嵌套JS脚本

三、HTML的语法规则

HTML语法基础
1. 标签: <标签名> 用尖括号包裹标签名
2. 双标记标签，封闭类型标签 —— <开始标签>内容区域</结束标签> <b>你好</b>
3. 单标记标签,非封闭类型标签 —— <标签名> h5的语法可以省略斜杠 <br>
文档的类型声明
1. <!DOCTYPE html>
2. 写在html文件中的第1行
3. 告诉浏览器，当前html是使用h5的语法编写的，请用h5的规范解析
HTML网页结构
1. <html> 代表的是网页的开始与结束，一个页面中，有且只有一对html标签
  <head></head> 网页的头部，定义了当前页面中的一些配置信息
  <body></body> 网页的主体，要展示的内容
  </html>
2. head标签里可以放的内容
  1. <title>网页的标题</title>
  2. <link rel="stylesheet"> 引入css文件样式
  3. <meta charset="utf-8"> 元数据，配置信息——设置编码
HTML网页的注释
1. 不被浏览器解析运行的文本，增强代码的可读性，解释代码
2. 格式 
3. 注释内部不能嵌套注释
4. 在<>内部不能有注释

四、HTML标签

文本样式标签
1. b 加粗
2. I 斜体
3. s 删除线
4. u 下划线
5. X<sup>2</sup> 上标字
6. log<sub>2</sub>4 下标字
7. h5提供了一些带有语义的标签 strong加粗 em斜体 del删除线
转义符号
1. 圈C 版权声明 ©
2. 圈R 注册商标 ®
3. TM商标符号 ™
4. 关闭符号 ×
5. 带圈的关闭符号 &otimes;
6. 大于号 >
7. 小于号 <
8. 空格   存在空格的折叠现象，所以多个空格要使用此转义符号
换行标签
1. <br> 或者 <br/> 单标记标签
预格式化标签
1. pre
2. 保留源文档中的格式，即保留原来的换行和文本中的空白
标题字标签
1. h1~h6
2. 单独成行，h1最大 h6最小，字体加粗，上下有垂直的行间距
3. h4大小为默认字体
段落标签
1. p
2. 单独成行，上下有垂直的行间距
水平分割线标签
1. <hr> 或者 <hr/> 单标记标签
2. 在页面上添加一条独占一行的分割线，即使后面有文本也会出现在下一行
3. 属性：
  1. align="" 水平对齐的方式
  2. color="" 颜色
  3. size="" 分割线的粗细
  4. width="" 分割线的宽度
属性和值
1. 属性：也称为特征，描述标签某一方面的特点
2. html定义了很多的属性和值，用来修改元素的样式和状态
3. 写法:
  1. <开始标签属性名1="属性值1" 属性名2="属性值2"></结束标签>
  2. 属性的声明必须在开始标记里
  3. 一个元素可能不只有一个属性，多个属性之间使用空格隔开
  4. 多个属性之间不区分先后顺序
  5. 属性名与属性值之间使用等号连接
  6. 属性值要包裹在引号中
4. html通用属性:
  1. title="" 鼠标悬停在页面上显示的文本
  2. style ="" CSS中定义行内样式
  3. id="" 页面中元素的唯一标识符，在同一个页面中id值不能重复
  4. class = "" CSS中引入类选择器
分区元素
1. 分区元素用于为元素分组，常用于页面布局
2. 块分区
  1. div
  2. 独占一行，专门用于页面布局，是最简单的块级元素
3. 行分区
  1. span
  2. 处理同一行文本有不同样式的时候，不换行，是最简单的行内元素

五、图片与超链接

图片 —— <img> 单标记标签
1. 属性:
  1. src="图片资源的路径/url"
  2. width="图片的宽度单位(% 或 px)"
  3. height="图片的高度单位(% 或 px)"
  4. alt = "资源加载失败时显示的替换文字"
  5. 使用图片的时候要注意图片本身的尺寸
  6. 如果设置的宽高不符合图片本身的宽高比，图片会变形——图片的失真
  7. 解决方案:宽或者高只写一个，另外一个自动适应
URL
1. uniform Resource Locator 统一资源定位符，俗称路径，用来标识网络中的任何资源
2. 绝对路径
  1. 是一个完整的路径，要使用网络资源的时候，用绝对路径
  2. 从最高级目录下开始的完整路径，无论当前路径是什么，使用绝对路径总能找到要连接的文件
  3. 优点：节省本服务器的本地存储空间
  4. 缺点: 资源不稳定，如果远程服务器删除资源，本地服务器就引用不到了
3. 相对路径 -- 参照物其实就是当前的html
超链接 —— <a href=""></a>
1. 属性：
  1. href = "要跳转的页面路径"
  2. target=""
    1. _self 默认值，在本页面打开新链接
    2. _blank 在新的选项卡页面打开链接
2. 去除超链接下划线 —— text-decoration: none;
3. 锚点
  1. 在页面上定义一个位置，叫做锚点
  2. 使用a标签，跳转到锚点，页面会直接在这个位置显示
  3. 定义锚点的方式:
    1. H5定义锚点，使用元素的id值直接当做锚点名称，如<h3 id="c3">第三章龙宫借宝</h3>
    2. 跳转锚点的方式:
      1. <a href="#锚点名称"></a>，
      2. 如：<a href="#c3">快速跳转到第三章</a> 跳转到页面顶部:
      3. <a href="#">快速跳转到页面顶部</a>
4. 超链接的其它表现形式：
  1. ```
  <a href="javascript:fn()">调用JS脚本</a>
  <script>
          function fn(){
              alert(666)
          }
  </script>
```