HTML学习日记（1）-HTML基础标签
文章目录
- 前言
- 一、工作原理？
- 二、开发工具
- 三、网页的基本结构
-
- 1.双标签
- 2.单标签
- 四、标题标签
-
- 1.标题标签的特点
- 四、段落标签
- 五、 文本换行标签
-
- 六、水平线标签
- 七、字体样式标签
- 八、图像标签
- 九 网页中的特殊符号
- 十、超链接标签
-
- 1. 文本超链接超链接
- 2. 图片超链接
- 3. 锚链接
- 4. 功能链接
前言
HTML是超文本标记语言，一个html的文件就是一个网页，一个网页由标签组成。
学习HTML最开始的时候就是学习并记忆HTML标签的语法、效果、语义。
- 语法： 标签的代码怎么写
- 效果： 浏览器渲染标签后的默认效果（可以通过css修改默认效果）
- 语义： 标签的含义，在合适的场景使用合适的标签
一、工作原理？
一个网页是一个扩展名为.html的文件，这个文件中由特定的网页标签组成。当用户在浏览器(终端)的地址栏中输入网址后，浏览器发起http请求目标服务器；服务器通过http响应请求，如果是一个网页，则响应的内容即html代码；浏览器通过解释并执行标签代码，最终渲染成为用户看到的页面效果。
二、开发工具
编写网页可以通过记事本，但是记事本使用起来非常的不方法，不能够提高开发效率
- sublime增强版的记事本
- notepad++
- HbuilderX（免费）
- webstorm(收费)
- [viso studio code]
三、网页的基本结构
一个网页必定由一个特定的结构构成,网页称为超文本标记语言。由标签构成。标签有双标签和单标签之分。
1.双标签
双标签的开始标签和结束标签必须是相同的，双标签之间可以编写子标签或者文本。换而言之，标签可以嵌套编写。
<开始标签 属性="值">结束标签>
2.单标签
<标签名 属性="值" />
一个完整的网页，就是由N个这样的单标签以及双标签构成。代码如下（示例）：
<!--告诉浏览器，我们的页面支持html5标签-->
<!DOCTYPE html>
<html>
<!--这个是html中的注释，注释的内容不会被浏览器解释执行-->
<!--网页的头部-->
<head>
<!--设置页面编码方式-->
<meta charset="utf-8" />
<title>选项卡内容</title>
</head>
<!--网页的主体-->
<body>
这里显示网页中看到的主体内容
</body>
</html>
四、标题标签
在一个完整的网页中，通常由多个区域组成，每个区域都应该有自己的标题。用户通过标题能够快速的定位到他所需要的内容。
在html网页中，有6个级别的标题标签。不同的级别显示的文本大小，间距都有差异。
<h1>标题1h1>
<h2>标题2h2>
<h3>标题3h3>
<h4>标题4h4>
<h5>标题5h5>
<h6>标题6h6>
1.标题标签的特点
- 标题标签中的文本都是加粗显示的
- h1字体最大，h6字体最小
- 标题标签上下有一定的间距，将来可以通过盒子模型设置外边距
四、段落标签
在页面中，如果有一段文章、一个评论、一条时间等等的文本时，就可以使用段落标签。
<p>
段落的文本
p>
tips: 在使用Hbuilder的过程中，可以利用自动补全代码的快捷方式补全html代码。
仅书写标签名，然后敲一下tab键，hbuilder就能够自动补全代码。
1. 在页面中敲 一个 p
2. 在p的后面敲一下tab键，就能够自动补全为 <p>p>
五、 文本换行标签
在网页中，文本默认按照从左到右的方向依次排列显示。在页面代码中，及时敲了回车键，浏览器也不会解析出来。
因此为了解决文本不能换行的问题，就有了文本换行标签。
<br />
六、水平线标签
一个水平标签在网页中呈现一根线条。
<hr />
七、字体样式标签
字体样式标签用于设置字体加粗以及字体倾斜。在以后学习了css，通常并不会使用这两个标签。
<strong>strong>
<em>em>
如果字体需要加粗并倾斜显示：
<strong>
<em>文本em>
strong>
html中很多的标签是可以相互套用的。标签之内编写另一个标签。 一定要注意标签的成对出现，并且在写的过程中，不能交叉别的标签。
错误示范：
<strong>
<em>
strong>
em>
八、图像标签
一个具有良好用户体验的网页应该具备良好的页面布局、图文并茂的效果、css3实现的动画效果等等。
常见的图像格式：
- jpg
最常见的一种图片文件格式。 - png
背景透明，通常用来做logo。 - gif
用来表示动态图片。
<img src="图片的路径" title="鼠标悬浮在图片上时的提示信息" alt="图片没有正常显示时的提示信息" width="图像的宽度" height="图像的显示高度" />
一个良好结构的网页，应该将不同的文件分别存放在不同的目录中。
- img
用于存放图片文件的目录 - css
用于存放整个项目用到的css文件 - js
用于存放JavaScript文件的目录
图片的宽度和高度属性通常不会直接写在img标签之内，而是通过css进行宽度的设置。在设置图片标签宽高时，注意设置后的宽度和高度要和图片原始的宽度高度比例相同。
否则出现图片被拉伸变形的问题
九 网页中的特殊符号
在html中，某些符号具有特殊的含义，因此编写代码时，具有特殊含义的符号是不能够直接编写的方式实现的。
网页为这些特殊的符号提供了具体的使用。
网页中的特殊符号有很多，就像是非主流使用的火星文一个意思。
网页中的特殊符号已&开头，并且已;结尾。
| 语法 | 含义 |
|---|---|
| 空格 | |
| > | 大于符号 |
| < | 小于符号 |
| " | 双引号 |
| © | 版权符号，© |
| ® | 注册商标 |
十、超链接标签
在一个网页中，跳转到另外一个页面时就需要用到超链接。一个网页具有了超链接才使网页具有了交互性。
1. 文本超链接超链接
<a href="要打开的页面的路径" title="鼠标悬浮在a标签上时的提示文本" target="页面的打开方式">跳转的网页的文本a>
target属性规定了超链接的页面打开的方式，其有两个可用值。
- __self
默认值，不写target属性时，浏览器为a标签设置的默认值就是_self。目标页面在当前选项卡中打开。 - _blank
blank翻译过来为空白的意思。超链接打开的页面在新的选项卡中显示。
2. 图片超链接
把一张图片当做超链接，点击图片时，同样可以实现跳转页面的功能。
<a href="url地址">
<img src="图片的路径" />
a>
3. 锚链接
当一个页面比较高的时候，需要快速定位到网页中的某个区域时，就可以通过锚链接来实现。
也可以理解为锚链接能够在一个页面中的不同区域跳转的功能。
实现原理：
1. 在页面中某个位置通过``做好标记。
2. 使用超链接定位到标记处。`跳转到标记`。
`#`代表当前页面，`#mark`跳转到当前页面中mark的位置处去。
4. 功能链接
在以前的网页设计中，通常都会保留一个联系我们的功能，但是那个时候的联系我们又没有在线客服与客户即时沟通。大多数都是通过邮件的形式完成的。
功能链接实际上就是在a标签超链接中保存一个客服的邮箱地址，当用户点击了功能链接以后，则会在用户自己的电脑中打开outlook为客服发送邮件。
<a href="mailto:[email protected]">联系我们a>