HTML相关基础

HTML 介绍

(WEB)网页由HTML结构、CSS表现和JS行为组成。

HTML：超文本标记语言

HTML5：是HTML的第五个版本，也是前端技术的总称。

W3C：万维网联盟，是web领域最具权威的公益性中立组织。W3C (制定了结构(xhtml、xml)和表现(css)的标准，非赢利性的。)

HTML能做什么？

1. 网页开发（用的最多的，只要是浏览器能看到的，都需要用到前端）
2. 小程序，公众号（微信，支付宝，头条等好多都用前端语言进行开发）
3. Hybrid  App(混合应用开发，手机应用  例如，支付宝，淘宝等)
4. Native App(原生应用开发，例如React Native 等框架的开发）
5. 桌面应用开发（电脑软件）
6. 游戏开发（例如，微信小游戏，其实好多游戏都可以用前端语言进行编写）
7. 后端开发（前端学到的nodejs可以实现后端的开发）

HTML语法

1、常规标记、双标记
      <标记  属性=“属性值”  属性=“属性值”>文字内容</标记>

2、空标记、单标记
      <标记  属性=“属性值”  属性=“属性值” />

HTML常用标签

个数	含义	语法书写和语法
1	文本标题	<h1>文章或者重点标题</h1>        <h2>大模块的标题</h2>  <h3>小模块的标题</h3>               <h4>标题H4</h4>  <h5>标题H5</h5>                        <h6>标题H6</h6>
2	段落	<p>段落文本内容</p>
3	加粗	<b>加粗的内容</b>	<strong>加粗的内容</strong>
4	倾斜	<i>倾斜的内容</i>	<em>倾斜的内容</em>
5	变大	<big>变大标签</big>	变小		<small>变小标签</small>
6	强制换行	<br/>	水平线	<hr/>
7	上标	<sup></sup>	下标	<sub></sub>
8	特殊符号	&emsp; 大空格   &nbsp;  空格    &copy;  版权©   &reg； 商标®  &gt; 大于  &lt;  小于

标题  hn(n为1-6)      （h1-h6强调程度依次降低，字体大小依次变小）

变小标签 small （<small></small>标签可以叠加，但是不能小于浏览器支持的最小字体模型）

列表

 无序列表：

<ul>
    <li></li>
</ul>

有序列表：

<ol>
    <li></li>
</ol>

定义列表：

<dl>
	<dt>名词|图片</dt>
	<dd>解释说明</dd>
</dl>

图片

<img src='路径' width='宽度' height='高度' alt='替代文本' title='提示文本'>

 超链接

<a  href=“路径”  title=“鼠标悬停上去之后的提示信息”  target=“规定在何处打开文档">内容</a>

Target属性：规定在何处打开文档。
                     target=“_self“  默认值
                     target=“_blank“  新窗口打开

路径

相对路径： 就是相对于自己的目标文件位置。

• 1)当当前文件与目标文件在同一目录下，写法如下：                                                                直接书写目标文件的文件名+扩展名，<img src="pic4.gif" />
• 2)当当前文件与目标文件所处的文件夹在同一目录下，写法如下：                                         文件夹名/目标文件全称+扩展名，<img src="img/pic.png“/>
• 3)当当前文件所处的文件夹和目标文件在同一目录下，写法如下：                                         ../目标文件文件名+扩展名，<img src="../小可爱.png" />

绝对路径：绝对路径是指文件在硬盘上真正存在的路径。

注意：绝对路径在实际的开发过程中很少去使用，如果使用“E:\book\网页布\代码\第2章\bg.jpg”来指定背景图片的位置，在自己的计算机上 浏览可能会一切正常，但是上传到Web服务器上浏览就很有可能不会显示图片了，绝对路径可以使用“\”或“/”字符作为目录的分隔字符

2021-8-24