黑马程序员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内容总结(一)
发布评论