Web学习-HTML（一）
Web学习-HTML（一）
HTML定义
HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一。
HTML骨架标签
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
- 一对html标签构成了网页
- head标签是网页的头部信息
- title标签在head标签中，用于表示网页的标题
- body标签是网页的身体，几乎所有展示的内容都被body标签包住
HTML标签分类
- 常规元素(双标签)
刚刚介绍的骨架标签都是属于双标签
- 空元素(单标签)
单标签写法：
<br />
单标签是少数的，大部分使用的还是双标签
HTML标签关系
HTML标签关系主要是两种：
- 嵌套关系
用骨架标签举例：head和title这两个标签的关系就是嵌套关系
- 并列关系
用骨架标签举例：head和body这两个标签的关系就是并列关系
开发工具
HTML的开发工具有很多。Dreamweaver、HBuilder、Sublime、VSCode，甚至直接使用记事本都可以，根据我的学习路径，后续使用sublime。
sublime的使用
- 下载：百度搜索
- 使用注意点：在新建文件时，先保存为
.html文件，这个时候再写html代码会有智能提示，自动补齐，页面骨架快速生成等等，具体的大家可以在网上了解，另外sublime插件的使用可以参照官网
自动补齐
使用sublime快速生成骨架，会看到下面的代码
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
- lang="en"：代表网页主要使用的语言是英语，若为中文，可以这样写lang="zh-CN"
- charset="utf-8"：这句表示的是编码格式，类似简体中文可以使用GB2312，简繁共用使用GBK，“utf-8”就是一个通用并且流行的编码格式，可以用来表示简体中文、繁体中文和英文，一般来说使用的都是utf-8。编码格式设置不正确，会导致出现乱码。
标签语义化
目的：根据标签的语义，在合适的地方给一个合理的标签，使结构更清晰。
如果有一大段文章显示在网页上，那么没有进行语义化的时候，这个文章的标题、副标题等等都是和内容连接在一起的，可读性很差。进行标签语义化后，标题、副标题等就会和文章内容分开，使文章条理清晰，可读性强
HTML常用标签
一、排版标签
1.标题标签(h)
释义：作为标题使用，根据重要性递减
注：加了标题的文字会变粗，一行只能有一个标题
<h1> 这是一个标题 </h1>
<h2> 这是一个标题 </h2>
<h3> 这是一个标题 </h3>
<h4> 这是一个标题 </h4>
<h5> 这是一个标题 </h5>
<h6> 这是一个标题 </h6>
显示效果：
这是一个标题
这是一个标题
这是一个标题
这是一个标题
这是一个标题
这是一个标题
2.段落标签(p)
释义：可以将html文档切分为若干个段落
注：在html文档中，回车与空格符号都不能提现出来，如果文本想要分段落展示，这时就需要用到<p> </p>标签
<body>
文本内容
文本内容
文本内容
文本内容
文本内容
</body>
如上写法是无法显示出段落的，想要有段落格式，需要使用p标签
<body>
<p>
文本内容
</p>
<p>文本内容</p>
<p>文本内容</p>
<p>文本内容</p>
<p>文本内容</p>
</body>
3.水平线标签(hr)
释义：可以在需要的位置插入一条水平线
<body>
<h3>这是一个标题</h3>
<hr />
<p>没错，水平线标签是一个单标签</p>
</body>
如上代码，会在标题下插入一条水平线
4.换行标签(br)
释义：break，打断、换行
<body>
没错，br标签是一个单标签，<br />
在我的前面使用br标签，代表换行的意思
</body>
p和br的区别：p代表段落，br代表换行，使用p时，行间距很大，br就只是换行
5.div和span
释义：这两个标签并没有语义，只是在网页布局中两个重要的盒子
注：用来布局使用，一行只能放一个div，会换行显示。span则反过来，一行上可以放很多个span，不会换行。
二、文本格式化标签
- 加粗显示（b/strong）,推荐使用strong
<b>文本内容</b>
<strong>文本内容</strong>
- 斜体显示（i/em）,推荐使用em
<i>文本内容</i>
<em>文本内容</em>
- 加删除线（s/del）,推荐使用del
<s>文本内容</s>
<del>文本内容</del>
- 加下划线（u/ins）,推荐使用ins
<u>文本内容</u>
<ins>文本内容</ins>
三、标签属性
释义：主要是为了让标签提供更多的信息，颜色、大小等等
<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>
<手机 颜色="红色" 大小="5寸"> </手机>
注：标签属性必须写在开始标签中，属性之前不分先后，但要用空格隔开
四、图像标签(img)
释义：image的缩写
<img src="图像url" />
img的标记属性
- src ：图片的路径
- alt ：图片不能显示时的替换文本
- title ：鼠标悬停时显示的内容
- width ：图片的宽度
- height ：图片的高度
- border ：图片边框宽度
五、链接标签(a)
释义：包裹一些元素，使这些元素可以点击跳转
<a href="跳转的链接" target="新窗口的打开方式"> 打开链接 </a>
<a href="http://www.baidu.com" target="_blank"> <img src="图像url" /> </a>
- href：就是点击后跳转的目标地址
- target：链接打开方式，默认为self，代表当前窗口打开，另外还有一个值为blank，代表在新窗口中打开
- 空链接：可用#填充链接，代表空链接
链接有内部和外部的区分，外部链接直接填入网址就好，内部链接需要填入你想要打开的网页的路径url，例如
/user/Desktop/html/index.html
六、注释标签
<!-- 这里写的是注释内容 -->
- 快捷键：Mac：command+/。 Windows：ctrl+/。
路径
目录文件夹：存放做页面的相关素材，如html文件等的文件夹
根目录：打开目录文件夹，显示的第一层，就是根目录
- 相对路径：以当前编辑文件为基准，建立目录的路径，叫相对路径，
../../demo.html
> 同一级路径：不用任何方式表示，直接引用即可
> 上一级路径：使用../表示上一级路径，可以看为上一次文件夹
> 下一级路径：使用/表示下一级路径，可以理解为进入文件夹 - 绝对路径：资源的全路径名称，例如
D:/picture/beautiful.jpg，用的少，不提倡使用
> 使用绝对路径时，无论在哪个文件，访问的资源路径写法都是一致的
锚点定位
1.将需要跳转的目标标签设置一个id
<h2 id="mubiao">目标在这里<h2>
2.点击跳转到的地方需要用到a标签
<a href="#mubiao">点我跳转到目标</a>
base标签
base标签可以设置整体链接的打开状态
base标签写于之间
<head>
<base target="_blank" />
</head>
预格式化文本标签（pre）
<pre>
这个标签
会按照我们写好的
文字格式来显示
，保留了空格和换行
</pre>
特殊字符
html中有很多字符都无法直接显示，比如<和>，这时就需要用到一些特殊字符来展示
个人公众号
浙公网安备 33010602011771号