第三节 元素

元素(element)

其他叫法:标签,标记

  • 元素的字母都应该小写,除了文档声明可以用大写字母。

元素的分类:

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

元素的构成

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

元素的缺失

  • 有些元素没有结束标记这样的元素叫做 “空元素”,我称之为单元素如:<meta>,<img>
1
<meta charset="UTF-8">
  • 有些元素也缺乏元素属性元素内容:如<br>

元素的嵌套:

  • 元素可以嵌套,但是不能相互嵌套。

一些常用的元素

链接元素

a元素 超链接

href属性:hyper reference (超级参考,引用):通常表示跳转地址
  1. 普通链接 ``

  2. 锚链接:表示跳转某个锚点 ``

    • 目录代码写法:a[href="#lianjie$"]*6>{章节$
    • 章节代码写法:((h2[id="lianjie$"]>{章节$})+p>lorem1000)*6
      • $ 表示占位符,数字递增
      • Lorem 表示英文的假文乱字,1000表示有1000个乱字假文
      • + 表示兄弟
  3. 功能链接:点击以后触发某个功能。 ``

    • 执行js代码 javascript:
    • 发送邮件 malito: 要求用户计算机上安装有邮件发送软件,如exchange
    • 拨打电话 tel: 要求用户计算机上安装拨号软件,或者使用移动端。
target属性
  • 表示跳转窗口位置

target的取值:

  1. _self* 在当前页面窗口打开(默认值)
  2. _blank* 在新页面打开,不覆盖当前页面。
title属性(全局属性)

鼠标停留,显示一个完整的描述

表格元素

table元素 表格

  • caption 标题
  • th 表头
  • tr
  • td
  • colspan 跨行;
  • rowspan 跨列

li 列表条目元素

列表元素本身就是一个块,可以直接设置宽和高。也可以在li元素中间套a元素,再将a元素转化为块,设置宽和高

  1. ol 有序列表
  2. ul 无序列表
  3. menu 菜单
value属性(全局属性)

这个整数型属性表明了本 <li> 元素在有序列表(由 <ol> 元素定义)中的序号。本属性值只能用数字,即使列表使用罗马数字或字母来展示。随后的列表条目会从设置的值开始计数。value 属性对于无序列表 (<ul>) 或者菜单(<menu>)无效。

type属性(本属性已废弃:使用 CSS:list-style-type 属性来代替。)
  • 这个字符型属性表明了数字的类型: a: 小写字母 A: 大写字母 i: 小写罗马数字 I: 大写罗马数字 1: 数字 本属性值将覆盖 <ol> 元素中的同名属性值(若存在)。

P元素 段落

src属性样式

  1. 图片链接:img元素
    • <img src="url或路径">
  2. 音乐链接:audio元素
1
2
3
4
5
6
7
	方案1:
		<audio controls src=".mp3"></audio>

	方案2:
		<audio controls>
			<source src=".mp3">
		</audio>	
  1. 视频链接:video元素
1
2
3
4
方案2:
	<video controls >
    <source src=".mp4">
	</video>

controls:按钮;loop循环播放;autoplay自动播放(html5被禁止,不能用) width:宽

橘子泡酒
Built with Hugo
主题 StackJimmy 设计