1、文本标记
1、在 HTML 中,标记通常会被分为 2大类
1、行内元素
多个元素能够在一行内排列出来
<b>,<i>,<s>,<u>,<sub>,<sup>,<span>
作用:为了包裹文本并处理文本的样式
display:inline;
2、块级元素
每个元素会独占一行
<h1>~<h6> , <p> , <div
作用:布局
display:block;
2、嵌套的注意
1、p元素是不能嵌套块级元素
2、行内元素中 不要 嵌套块级元素
2、元数据
元数据都是对网页进行解释说明的
1、<meta name="keywords" content="关键字1,关键字2">
2、<meta name="description" content=" ... ... ">
以上两个标记不面向用户,是面向搜索引擎的
==============================================
1、图像 和 链接
1、URL
URL : Uniform Resource Locator , 统一资源定位符,俗称:路径
目录结构:一个站点中的目录与目录之间的关系
URL 就是负责到目录中将资源文件的地址描述出来
资源文件:就是网页要用到的文件(如:图片,音频,视频,... ...)
URL 在 Web 上共有3种表现形式:
1、绝对路径
2、相对路径
3、根相对路径
路径详解:
1、绝对路径
指的是从资源文件所在的最高级目录下开始查找所经过的目录,就是绝对路径
1、获取网络资源
由四部分组成
1、协议名称
http / https
2、域名/IP地址/计算机名
www.baidu.com
3、目录路径
img
4、文件名称
childrens-day-start_e9fdc805825f196d9b367eec86e65d62.png
https://www.baidu.com/img/childrens-day-start_e9fdc805825f196d9b367eec86e65d62.png
2、获取本机资源
从文件所在的最高目录处开始查找
最高目录:盘符
E:\Images\jd_logo.png
2、相对路径
从当前文件所在目录位置处开始查找资源文件所经过的路径
1、同目录,直接用
2、子目录,先进入
3、父目录,先返回
通过 ../ 表示向上返回一级目录
3、根相对路径
永远都是从 WEB项目 所在的根目录处开始查找资源文件的位置
以 / 作为开始的路径表现形式就是 根相对路径
2、图像
1、图像的格式
1、 **.jpg
2、 **.png (透明背景的)
3、 **.gif (动图)
2、图像
标记:<img>
属性:
1、src
要显示的图像的URL
所有的URL都要严格区分大小写
2、width
宽度,以 px 或 % 为单位的数值
3、height
高度,以 px 或 % 为单位的数值
注意:
3、超链接
1、语法
<a>内容</a>
属性:
1、href :链接的URL
2、target
目标,指定打开新网页的形式
取值:
_blank : 在新标签页中打开网页
_self : 在当前标签页中打开网页
2、链接的表现形式
1、下载资源
链接地址为 rar / zip / exe 的时候,则为下载资源
2、电子邮件的链接
<a href="mailto:email地址">联系我们</a>
3、返回页面顶部的空连接
<a href="#">返回顶部</a>
4、链接到Javascript
<a href="javascript:..."></a>
3、锚点
锚点能够在页面的任意位置处做记号,允许在任何情况下跳转到该记号位置处
锚点的使用方式:
1、定义锚点
1、通过 a 标记的 name 属性来定义锚点
<a name="锚点名称">内容</a>
2、通过任意标记的 id 属性来定义锚点
<ANY id="锚点名称">
2、链接到锚点
<a href="#锚点名称">内容</a>
<a href="页面URL#锚点名称">内容</a>
2、表格
1、表格的介绍
表格的本质是由一些"单元格"按照从上到下,从左到右的顺序排列一起组合而成的。
2、表格的语法
1、创建表格:<table></table>
2、创建表行:<tr></tr>
3、创建列 / 单元格 :<td></td>
3、表格的属性
1、table 的属性
1、width :宽度
2、height :高度
3、align :水平排列(left/center/right)
4、border :边框宽度
5、cellpadding :单元格内边距
6、cellspacing :单元格外边距
7、bgcolor :背景颜色
2、tr 的属性
1、align
当前行内容的水平排列方式
取值:left / center / right
2、valign
当前行内容的垂直排列方式
取值:top / middle / bottom
3、bgcolo
当前行内容的背景颜色
3、td 的属性
1、width
2、height
3、align
4、valign
5、bgcolo
6、colspan :设置单元格跨列属性
7、rowspan :设置单元格跨行属性
4、表格中的其它标记
1、<caption></caption>
作用:为表格定义标题
注意:
1、caption 最多只能有一个
2、caption的位置必须位于 <table>下的第一条语句
2、<th></th>
所有的 td 都可以被替换成 th
th 中的文本 会以加粗,水平居中的效果显示出来
5、表格的复杂应用
1、行分组
可以将效果相同的连续的若干行划分到一个组中
1、表头行分组
允许将第一行 或 最上方的几行 划分到表头行分组中
语法:<thead></thead>
2、表尾行分组
允许将最后一行 或 最下方的几行 划分到表尾行分组中
语法:<tfoot></tfoot>
3、表主体行分组
所有的行都可以被划分成若干个表主体行分组
语法:<tbody></tbody>
注意:如果没显示的为tr指定行分组的话,那么默认都在 tbody 中
2、不规则的表格创建
可以通过 td 的 colspan 和 rowspan 两个属性来创建不规则的表格
1、colspan
合并列,也称为跨列
从指定单元格的位置处开始,横向向右合并几个单元格,其中包含自己。注意,被合并掉的单元格,要删除出去
2、rowspan
合并行,也称为跨行
从指定单元格的位置处开始,纵向向下合并几个单元格,其中包含自己。注意,被合并掉的单元格,要删除出去
3、表格的嵌套
被嵌套的内容必须放在td中
3、列表
1、列表的作用
按照从上到下的顺序来排列显示数据
2、列表的组成
1、列表的类型
1、有序列表
语法:<ol></ol> --- Order List
2、无序列表
语法:<ul></ul> --- Unorder List
2、列表项
列表中的内容
语法:<li></li> --- List Item
3、列表的属性
1、<ol>的属性
1、type
列表项前面的标识的类型
取值:
1、1 ,使用 数字 作为标识
2、a ,使用 小写字母 作为标识
3、A ,使用 大写字母 作为标识
4、i ,使用 小写罗马数字 作为标识
5、I ,使用 大写罗马数字 作为标识
2、start
设置 列表项前的标识的起始标号是从 几开始
2、<ul>的属性
1、type
列表项前面的标识的类型
取值:
1、square : 实心矩形
2、circle : 空心圆
3、disc : 实心圆(默认值)
4、none : 不显示标识
4、列表的嵌套
被嵌套的列表只能放在li里
5、定义列表
1、作用
用于给出一类事物的定义的情形
2、语法
<dl>
<dt></dt>
<dd></dd>
</dl>
dl : 定义一个定义列表
dt : 列表中要解释的专业术语 或 名词
dd : 对上述的专业术语 或 名词的解释
3、使用场合
图文混排时使用
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。