专栏首页李才哥HTML基础入门
原创

HTML基础入门

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、使用场合

图文混排时使用

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 浅谈JavaScript 数据属性和访问器属性

    创建自定义对象通常有两种方法,第一种就是创建一个Object的实例,然后再为其添加属性和方法,例如:

    李才哥
  • 内训前端题

    行内元素:a、b、span、img、input、strong、select、label、em、button、textarea

    李才哥
  • css应知应会 第六集

    作用:匹配的是,class属性值是一个由多个类选择器来组成的值列表(多类选择器),value是该列表中的一个独立选择器 的元素

    李才哥
  • opencv: 获取 图像属性 (源码)

      说明了读取的图片是一张 大小 为 (424, 600, 3) ,数据类型 为 uint8 ,像素总数 为 763200 的图片。

    JNingWei
  • CSS BFC实现多栏自适应布局

    要说web上实现两栏自适应布局的方法,一双手都数不过来。不知大家有没有细想过,为什么这些方法可以实现自适应布局呢?

    javascript.shop
  • python2.7搬运--->TensorFlow - 深度学习破解验证码

    谷歌的开源深度学习工具 --py 简介 验证码主要用于防刷,传统的验证码识别算法一般需要把验证码分割为单个字符,然后逐个识别,如果字符之间相互重叠,传统的算法就...

    98k
  • 计算机视觉101:使用Python处理彩色图像

    每个计算机视觉项目(无论是猫/狗分类器还是为旧图像/电影添加颜色)都涉及处理图像。最后,模型只能与基础数据一样好- 垃圾回收。这就是为什么在这篇文章中,着重于解...

    代码医生工作室
  • C语言进阶内置函数补充

    1、如果有足够空间用于扩大mem_address指向的内存块,则分配额外内存,并返回mem_address 。这里说的是“扩大”,我们知道,realloc是从堆...

    老九学堂-小师弟
  • 【AlexeyAB DarkNet框架解析】四,网络的前向传播和反向传播介绍以及layer的详细解析

    前面我们已经成功的获取了目标检测的网络结构(cfg文件的内容),并将网络保存在了一个network结构体中,然后我们还分析了数据加载方式。现在数据和网络结构都有...

    BBuf
  • 告别内存不足,手机和浏览器在线使用PS、AI、ACD、Excel.....

    各位大佬好,橙c昨天本来想在公司电脑上安装一个ps来学习学习的无耐的卡到我放弃了这想法,我还是安安静静的吃零食干活吧!

    IT小侠公社

扫码关注云+社区

领取腾讯云代金券