Web前端-Html部分笔记(一)

以下是我对Web前端-Html部分的笔记,因为博主也是初学Web前端,有很多东西都还停留在表层的理解,如果我的博客有任何错误,请及时评论或者私信我,我会及时更改。也欢迎同样初学Web-前端的你愿意关注我的博客,我会把我每周的学习内容进行整理和上传,方便大家沟通和交流学习经验。


由于是笔记,所以我只写需要记的部分,那些关于Web基础概念和Html的发展史这种了解的东西我就不陈述了。

一、什么是 HTML?

  1. HTML 是用来描述网页的一种语言。

  2. HTML 指的是超文本标记语言 (Hyper Text Markup Language)

  3. HTML 不是一种编程语言,而是一种标记语言 (markup language)

  4. 标记语言是一套标记标签 (markup tag)

  5. HTML 使用标记标签来描述网页

二、什么是 HTML标签?

  1. HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

  2. HTML 标签是由尖括号包围的关键词

  3. 标签对中的第一个标签是开始标签,第二个标签是结束标签

  4. 开始和结束标签也被称为开放标签和闭合标签

  5. 标签名必须为半角文字,大小写皆可。以前流行用大写,最近开始流行用小写,因为XHTML(可扩展超文本标记语言)里面规定标签名必须小写。标签名的前面不能有空格

三、HTML元素标签分类

  1. 单标签
    只有开始标签没有结束标签, 也就是由一个<>组成 ​
  2. 双标签
    有开始标签和结束标签, 也就是由一个<>和一个</>组成的

四、HTML元素类型

4.1、区块元素(display:block)

1、说明

  1. 每个块级元素都从新的一行开始,并且其后的元素也要另起一行。(一个块级元素独占一行)。

  2. 元素的高度、宽度、行高以及顶和底边距都可设置。

  3. 元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设置了宽度

  4. 一般是其他元素的容器元素,可以包含文本,内联元素和其他块元素

2、常用的块状元素

标签说明
div文档节
ul无序列表
ol有序列表
dl定义列表
p段落
h1...h6标题
table表格
address地址
form表单

4.2、内联元素(display:inline)

1、说明

  1. 和其他元素都在同一行;

  2. 元素的高、宽、行高以及边距均不可设置

  3. 元素的高、宽均取决于它包含的文字或图片的大小

  4. 内联元素只能容纳文本或者其他内联元素

2、常用的行内元素

标签名说明
a锚点
span常用内联容器,定义文本内区块
label表格标签
br换行
i斜体
em强调
strong粗体强调
textarea多行文本输入框

4.3、内联块(display:inline-block)

1、说明

  1. 和其他元素在同一行;

  2. 元素的高度、宽度、行高及边距可以设置

2、常用的行内块状元素

标签名说明
img图片
input输入

五 、基础结构

5.1、网页整体结构

<html>
  <head>
      <title></title>
  </head>
  <body>
  </body>
</html>

5.2、html标签(双标签)

1、作用

用于告诉浏览器这是一个网页, 也就是说告诉浏览器我是一个HTML文档

2、注意

其它所有的标签都必须写在html标签里面, 也就是写在html开始标签和结束标签中间

5.3、head标签(双标签)

1、作用

双标签,用于给网站添加一些配置信息

2、例如

  1. 指定网站的标题 / 指定网站的小图片

  2. 添加网站的SEO相关的信息(指定网站的关键字/指定网站的描述信息)

  3. 外挂一些外部的css/js文件

  4. 添加一些浏览器适配相关的内容

3、注意

     一般情况下,写在head标签内部的内容都不会显示给用户看

5.4、body标签(双标签)

1、作用

双标签,专门用于定义HTML文档中需要显示给用户查看的内容(文字/图片/音频/视频)

2、注意

  1. 一个html开始标签和一个html结束标签只能有一对body标签

  2. 默认样式:margin:8px;


下一篇:Web前端-Html部分笔记(二)

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

XeeP--H

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值