黑马程序员Pink老师HTML内容总结(一)"/>
黑马程序员Pink老师HTML内容总结(一)
黑马程序员Pink老师HTML内容总结(一)
Web标准主要包括结构、表现和行为。
结构用于对网页元素进行整理和分类，现阶段主要学习HTML。
表现用于设置网页元素的版式、颜色、大小等外观样式，主要指CSS。
行为是指网页模型的定义及交互的编写，现阶段主要学习Javascript
HTML基本结构标签
每一个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。
<html></html>
上述为HTML标签，它是页面中最大的标签，我们也称之为根标签
<head></head>
文档的头部，注意在head标签中我们必须要设置的标签是title。
<title></title>
文档的标题，让页面拥有一个属于自己的网页标题。
<body></body>
文档的主体，元素包含文档的所有内容，页面内容基本都是放在body里面的。
字符集（Character Set）是多个字符的集合，一遍计算机能够识别和存储文字。在head标签内，可以通过设置meta标签的charset属性来规定HTML文档应该使用哪种字符编码。
<meta charset = "UTF-8"/>
文本格式化标签
在网页中，有时需要为文字设置粗体、斜体 或下划线等效果，这时候需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。
标签语义：突出重要性，比普通文字更重要。
加粗 ：<strong></strong>或者<b></b>
两个标签均是起到加粗字体的作用，在大多数情况下所表现出来的效果也大致相同，所不同的是，<b>标签是一个实体标签，它所包围的字符将被设为bold（粗体），而<strong>标签是一个逻辑标签，它的作用是加强字符的语气，一般来说，加强字符的语气是通过将字符变为bold（粗体）来实现的。但是在不同的HTML解释器下，情况也可能有所不同。推荐使用<strong>。
倾斜：<em></em>或者<i></i>
< i > 是视觉要素（presentationl elements），表示无意义的加粗，无意义的斜体，仅仅表示样式上是粗体或斜体，而没有强调的语义，< em > 是表达要素(phrase elements)。这个标签具有语义。该标签中的daozhuan在搜索引擎中更受重视,一些语音阅读器也会根据它在阅读时加强语气。推荐使用<em>
删除线：<del></del>或者<s></s>
显示结果一样，推荐使用<del>
下划线：<ins></ins>或者<u></u>
推荐使用<ins>
<div> 和<span>标签
这两个都是没有语义的，它们就是一个盒子，用来装内容。div是division的缩写，表示分割、分区。span意为跨度、跨区。
<div> 这是头部 </div>
<span> 今日价格 </span>
特点：
（1）<div>标签用来布局，一行只能放一个。大盒子。
（2）<span>标签用来布局，一行可以放多个。小盒子。
图像标签和路径
在HTML中，<img>标签用于定义HTML页面中的图像。
<img src = "图像URL"/>
src是<img>标签的必须属性，它用于指定图像文件的路径和文件名。
图像标签的其他属性:
| 属性 | 属性值 | 说明 |
|---|---|---|
| scr | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本。图像不能显示的文字 |
| title | 文本 | 提示文本。鼠标放在图像上，显示的文字 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 像素 | 设置图像的边框粗细 |
图像标签属性注意点：
- 图像标签可以拥有多个属性，必须写在标签名的后面。
- 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
- 属性采取键值对的格式，即key = “value”的格式，属性 = “属性值”。
相对路径：以引用文件所在位置为参考基础而建立出的目录路径，简单来说，图片相对于HTML页面的位置。
| 相对路径分类 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | 图像文件位于HTML文件同一级 | |
| 下一级路径 | / | 位于HTML文件下一级 |
| 上一级路径 | …/ | 位于HTML文件上一级 |
绝对路径是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的。例：“D:\web\img\logo.gif”或完整的网络地址“.gif”。
超链接标签
语法格式：<a href = "跳转目标" target = “目标窗口的弹出方式”>文本或图像</a>
| 属性 | 作用 |
|---|---|
| herf | 用于指定目标的URL地址，(必须属性) 当为标签应用herf属性时，它就具有了 超链接的功能 |
| target | 用于指定链接页面的打开方式，其中_self为默认值，_black为在新窗口打开方式 |
链接分类
| 外部链接 | 例：<a href = "">百度</a> |
|---|---|
| 内部链接 | 网站内部页面之间的相互链接，直接链接内部页面名称即可，例：<a href = "index.html">首页</a> |
| 空链接 | 如果当时没有确定链接目标时，href内容用 # 代替。例：<a href = "#">首页</a> |
| 下载链接 | 如果href里面的地址是一个文件或者压缩包，会下载这个文件。例：<a href = "img.zip">下载文件</a> |
| 网页元素链接 | 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。例：<a href = ""><img src = "img.jpg"/></a> |
| 锚点链接 | 点击链接可以快速定位到页面的某个位置。 |
更多推荐
黑马程序员Pink老师HTML内容总结(一)
发布评论