【web开发学习笔记】01.HTML核心知识

第一个网页

Emmet插件:自动生成HTML代码片段

注释

注释为代码的阅读者提供帮助,注释不参与运行

在HTML中,注释使用如下格式书写:

<!-- 注释内容 -->

元素

其他叫法:标签、标记

<a href="http://www.baidu.com" title="baidu">百度</a>
<title>Document</title>

整体:element (元素)

元素 = 起始标记(begin tag) + 结束标记(end tag) + 元素内容 + 元素属性

属性 = 属性名 + 属性值

属性的分类:

  • 局部属性:某些元素特有的属性
  • 全局属性:所有元素通用
<meta charset="UTF-8">

有些元素没有结束标记,这样的元素叫做:空元素

空元素的两种写法:

  1. <meta charset="UTF-8">
  2. <meta charset="UTF-8" />

元素的嵌套

元素不能相互嵌套

父元素、子元素、祖先元素、后代元素、兄弟元素(拥有同一个父元素的两个元素)

标准的文档结构

HTML:页面、HTML文档

<!DOCTYPE html>

文档声明,告诉浏览器,当前文档使用的HTML标准是HTML5。

不写文档声明,将导致浏览器进入怪异渲染模式。

<html lang="en">
</html

根元素,一个页面最多只能一个,并且该元素是所有其他元素的父元素或祖先元素。

HTML5版本中没有强制要求书写该元素

lang属性:language,全局属性,表示该元素内部使用的文字是使用哪一种自然语言书写而成的。

<head>

</head>

文档头,文档头内部的内容,不会显示到页面上。

<meta>

文档的元数据:附加信息。

charset:指定网页内容编码。

计算机中,低压电(0~2 V)0,高压电(2~5 V)1,表示2,使用10

计算机中,只能存储数字

文字和数字进行对应

比如:a —— 97, A —— 64

该字典叫做字符编码表,GB2312,GBK

UTF-8 是 Unicode 编码的一个版本

<title>Document</title>

网页标题

<body>
</body>

文档体,页面上所有要参与显示的元素,都应该放置到文档体中。

文本元素

HTML5中支持的元素:HTML5元素周期表

h

标题:head

h1h6:表示1级标题6级标题

p

段落,paragraphs

lorem,乱数假文,没有任何实际含义的文字

span【无语义】

没有语义,仅用于设置样式

以前:某些元素在显示时会独占一行(块级元素),而某些元素不会(行级元素)
到了HTML5,已经弃用这种说法。

pre

预格式化文本元素

空白折叠:在源代码中的连续空白字符(空格、换行、制表),在页面显示时,会被折叠为一个空格

例外:在pre元素中的内容不会出现空白折叠

在pre元素内部出现的内容,会按照源代码格式显示到页面上。

该元素通常用于在网页中显示一些代码。

pre元素功能的本质:它有一个默认的css属性

显示代码时,通常外面套code元素,code表示代码区域。

HTML实体

实体字符, HTML Entity

实体字符通常用于在页面中显示一些特殊符号。

  1. &单词;
  2. &#数字;
  • 小于符号

< &lt

  • 大于符号

> &gt

  • 空格符号

  &nbsp

  • 版权符号

© &copy

  • &符号

& &amp

a元素

超链接

href属性

hyper reference:通常表示跳转地址

  1. 普通链接
  2. 锚链接

id属性:全局属性,表示元素在文档中的唯一编号

  1. 功能链接

点击后,触发某个功能

  • 执行JS代码,javascript:
  • 发送邮件,mailto:

要求用户计算机上安装有邮件发送软件:exchange

  • 拨号,tel:

要求用户计算机上安装有拨号软件,或使用的是移动端访问

target属性

表示跳转窗口位置。

target的取值:

  • _self:在当前页面窗口中打开,默认值
  • _blank: 在新窗口中打开

路径的写法

站内资源和站外资源

站内资源:当前网站的资源

站外资源:非当前网站的资源

绝对路径和相对路径

站外资源:绝对路径

站内资源:相对路径

  1. 绝对路径

绝对路径的书写格式:

url地址:

协议名://主机名:端口号/路径

schema://host:port/path

当跳转目标和当前页面的协议相同时,可以省略协议

  1. 相对路径

以./开头,./表示当前资源所在的目录

可以书写…/表示返回上一级目录

相对路径中:./可以省略

图片元素

img元素

image缩写,空元素

src属性:source

alt属性:当图片资源失效时,将使用该属性的文字替代图片

和a元素联用

和map元素

map:地图

map的子元素:area

和figure元素

指代、定义,通常用于把图片、图片标题、描述包裹起来

子元素:figcaption

多媒体元素

video 视频

audio 音频

video

controls: 控制控件的显示,取值只能为controls

某些属性,只有两种状态:1. 不写 2. 取值为属性名,这种属性叫做布尔属性

布尔属性,在HTML5中,可以不用书写属性值

autoplay: 布尔属性,自动播放。

muted: 布尔属性,静音播放。

loop: 布尔属性,循环播放

audio

和视频完全一致

兼容性

  1. 旧版本的浏览器不支持这两个元素
  2. 不同的浏览器支持的音视频格式可能不一致

mp4、webm

列表元素

有序列表

ol: ordered list

li:list item

无序列表

把ol改成ul

ul:unordered list

无序列表常用于制作菜单 或 新闻列表。

定义列表

通常用于一些术语的定义

dl: definition list

dt: definition title

dd: definition description

容器元素

容器元素:该元素代表一个块区域,内部用于放置其他元素

div元素

没有语义

语义化容器元素

header: 通常用于表示页头,也可以用于表示文章的头部

footer: 通常用于表示页脚,也可以用于表示文章的尾部

article: 通常用于表示整篇文章

section: 通常用于表示文章的章节

aside: 通常用于表示侧边栏

元素包含关系

以前:块级元素可以包含行级元素,行级元素不可以包含块级元素,a元素除外

元素的包含关系由元素的内容类别决定。

例如,查看h1元素中是否可以包含p元素

总结:

  1. 容器元素中可以包含任何元素
  2. a元素中几乎可以包含任何元素
  3. 某些元素有固定的子元素(ul>li,ol>li,dl>dt+dd)
  4. 标题元素和段落元素不能相互嵌套,并且不能包含容器元素
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值