学海无涯

HTML基本元素

2020/6/1 HTML CSS

HTML元素

文本元素

h 标题 head

h1~h6 元素

<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
1
2
3
4
5
6

p 段落 paragraph

表示一个段落

span [无语义]

无语义元素。仅仅用来设置样式

CSS需要元素包裹文字。

某些元素在显示时会独占一行(块级元素)，运行检查工具会看到占整行

  • h1~h6
  • p

某些不会(行级元素)。HTML5中已经弃用块级和行级元素的说法4.01版本以前。内容类别-》转化成流媒体，内容

  • span

元素和显示无关

换行可以通过 {display:block/inline}来切换

pre

Text that is preformatted in the HTML code.

预格式化文本元素。 无语义元素。

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

因为源代码中经常会出现缩进。避免这些缩进和换行对页面格式造成影响。

例外: pre元素，取消空白折叠。pre元素内部出现的内容， 会按照源代码的格式输出

字体需要另外设置

通常用于在网页中显示代码。

补充。pre元素功能的本质：它有一个默认的css属性 white-space:pre

The following example shows how a block of code could be marked up using the pre and code elements.
<pre><code class="language-pascal">var i: Integer;
begin
   i := 1;
end.</code></pre>
1
2
3
4
5

实体字符（字符编码）

HTML书写代码的时候全局。

https://www.w3school.com.cn/html/html_entities.asp

>

a元素

路径的写法

站内资源 站外资源

  1. 绝对路径的书写格式：
schema://host:port/path
schema协议名: http、https、file(本地文件 file://D:/file.txt)
host主机名：域名、IP地址(127.0.0.1)
port端口号：http浏览器默认端口是80，https浏览器默认端口是443；
path路径：
当跳转的协议和当前的协议一致的时候，可以省略
1
2
3
4
5
6
7
  1. 相对路径的写法：

以./开始表示当前资源所在文件夹 以../开始表示上级路径

./可以省略

图片元素

img元素

<img src="" alt="">

src属性: source，资源。图片路径。

alt属性：当图片资源失效时的替代文字

和a元素联用

<a href="">
    <img src="" alt="">
</a>
1
2
3

和map元素联用

图片的不同位置，链接到不同的地方

map需要增加name属性

map的子元素 area - 空元素

<a href="map元素外跳转的地址">
    <img usemap="#solarMap" src="显示图片的地址" alt="">
</a>

<!-- 驼峰命名 或者 短横线连接 -->
<map name="solarMap">
    <area shape="" coords="399，223,48" href="跳转地址" alt="" target="_blank">
    <!-- shape: 圆形circle/矩形rect/多边形poly -->
    <!-- coords:圆形: 圆心坐标x,y + 半径 | 矩形:左上和右下坐标 | 多边形：依次描述各个顶点的坐标 -->
</map>
1
2
3
4
5
6
7
8
9
10

坐标衡量，专业工具：

ps、pxcook、cutpro（渡一教育获取资源）

和figure元素联用

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

子元素，figcaption

<figure>
    <a href="map元素外跳转的地址">
        <img usemap="#solarMap" src="显示图片的地址" alt="">
    </a>
    <figcaption>
        <h2>图片标题</h2>
    </figcaption>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor architecto quos pariatur aspernatur, earum nostrum maxime laudantium delectus exercitationem eveniet odio voluptatibus veritatis porro optio! Minima accusantium dolores sapiente dolor.</p>
</figure>
1
2
3
4
5
6
7
8
9

多媒体元素

video

<video src="" style="width:500px"></video>

视频格式：.mp4 .webm

<video  controls="controls">
    <source src="media/open.mp4">
    <source src="media/open.webm">
    <p>您的浏览器不支持，请下载最新版的浏览器</p>
</video>
1
2
3
4
5

默认没有播放控件 属性添加： controls="controls" 布尔属性。 特点是可以不用书写属性值

<video src="" style="width:500px" controls></video>

aotoplay :进入网页后自动播放。和用户设置有关。

muted ：静音播放

loop :循环播放

preload="auto" :

audio

<audio src=""></audio>

格式：.mp3

用法同video

列表元素

有序列表

  • ol: ordered list (子元素之间是有数字的)
    • li: list item
<ol>
    <li>list1</li>
    <li>list2</li>
    <li>list3</li>
</ol>
1
2
3
4
5

属性1：

  • type="1" ： 按数字展示;
  • type="I"或者"i"：罗马数字展示;
  • type = "A"或者"a"： 按字母排序;

文档推荐用CSS显示，type用于比较重要的编号；

element.style {
	list-style-type:很多取值,
}
1
2
3

属性2：

  • reversed boolean 属性： 倒序；

无序列表（用的比较多）

  • ul: unordered list
    • li
<ul style="list-style-type: decimal">
    <li>list1</li>
    <li>list2</li>
    <li>list3</li>
    <li>list4</li>
</ul>
1
2
3
4
5
6

常用于制作菜单，或新闻列表

定义列表

通常用于一些术语的定义

  • dl: definition list
    • dt: definition title
    • dd: definition description
HTML中的术语解释
<dl>
    <dt>HTML</dt>
    <dd>
        超文本标记语言
    </dd>
    <dt>元素</dt>
    <dd>
        组成HTML文档的单元
    </dd>
</dl>
1
2
3
4
5
6
7
8
9
10
11

容器元素（重要元素）

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

div元素

没有语义，没有含义

语义化容器元素

  • header: 页头，也可以使用文章的头部
  • footer: 页脚，文章的尾部
  • article: 通常用于表示整篇文章
  • section: 文章的章节
  • aside: 附加信息，侧边栏

其他， 按钮， 文本框

...

元素包含关系

以前： 块级元素可以包含行级元素。行级元素不可以包含块级元素，a元素除外；

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

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

关键点：

  • 容器元素可以包含任何元素
  • a元素几乎可以包含任何元素；
  • 某些元素有固定的子元素： 如ul>li or>li dl>dt/dd
  • 标题和段落不能相互嵌套，并且不能包含容器元素

深入了解文档： 内容类别 mdn

Last Updated: 10/1/2020, 11:04:14 AM