HTML5新建文件代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>新建</title>
</head>
<body>
</body>
</html>
这就是html新建是的基础代码。在body标签内写内容,在head标签内写入css样式。在html里标签基本都是成对出现的但也有些是单个的具体看下面介绍。
HTML基本标签
HTML标签包括标题标签,段落标签,图片标签超链接等很多标签以下将详细介绍各种标签及其用法。
- 首先介绍的是标题和段落标记h标签和p标签 ,h标签有h1-h6这六种标题大小设置其标题大小依次递减,下面是其运行后的效果;
强调标签
- 强调标签;em,strong,mark标签等,em标签表示斜体,strong标签表示加粗,mark标签实在文本中高亮显示某些符号;
特殊字符标签
- html中方一些特殊字符标记如 空格符,大于号,小于号等 下面通过一个表格对常用的一些特殊字符标签进行说明;
特殊字符 | 字符代码 |
---|---|
空格 |   |
小于号 | < |
大于号 | > |
平方 | ² |
立方 | ³ |
图像及超链接标签
- 图像标记和超链接标记及锚点链接
图像标记:
<img src="图片路径" alt="当图片不能显示时显示的文本"/ >
超链接标记:
<a href="链接到的路径" > 链接显示的名字</a>;
锚点链接:当一个网页的页面内容过多,页面过长时浏览网页将需要不断拖动动条。锚点链接可以快速定位到目标内容,提高检索效率。当点击网页标题2会立即跳转到网页标题2的内容地方无需自己滑动滚动条。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>锚点链接</title>
</head>
<body>
课程介绍:
<ul>
<li><a href="#1">网页标题</a></li>
<li><a href="#2">网页标题2</a></li>
</ul>
<h id="1">网页标题</h>
<p>省略</p></br></br></br></br></br></br></br>
<h id="2">网页标题2</h>
<p>省略</p></br></br></br></br></br></br></br>
</body>
</html>
列表元素
- 列表元素;
列表元素 | 代码 |
---|---|
无序列表 | ul,li |
有序列表 | ol,li |
定义列表 | dl,dt,dd |
结构元素
- 结构元素;
header元素:一种具有引导和导航作用的元素,该元素可以包括所有通常放在页面头部的内容;
nav元素:用于定义导航栏链接;
article元素:代表文档或页面与上下文不相关独立部分,article元素通常使用多个section元素进行划分,一个页面article元素可以出现多次;
section元素:对页面上的内容进行分块;
footer元素:用于定义一个页面 或者区域的底部,它可以包括所有通常放在页面底部的内容;
aside元素:用来定义当前页面或者文章的附属内容;
分组元素
- 分组元素;figure元素和figcaption元素,figure元素用于定义独立的流内容(图像,图表,照片,代码等),figcaption元素用于为figure元素组添加标题,一个figure内最多允许使用一个figcaption元素;hgroup元素用于将多个标题组成一个标题组,通常放在header元素中,figcaption也与hgroup结合使用;
页面交互元素
8.页面交互元素;details元素,summary元素(用于定义第一个子元素时details的标题),当用户点击标题时会显示或隐藏details中的内容,具体用法如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>details,summary使用</title>
</head>
<body>
<details>
<summary>显示列表</summary>
<ul>
<li>列表1</li>
<li>列表2</li>
</ul>
</details>
</body>
</html>
代码效果图如下:
progress元素
- progress元素:(进度条),progress元素有两个属性值:
属性值 | 含义
-------- | -----
value | 已经完成的工作量
max | 总共有多少工作量
以下代码运行后将会显示进度条
<h1>我的工作进展1</h1>
<p><progress value="50" max="100"></progress></p>
time元素
10.time元素;time元素有两个属性
属性值 | 含义 |
---|---|
datetime | 定义相对于的时间或日期 |
pubdate | 用于定义time元素中的日期/时间是文档的发布日期 |
cite元素
11.cite元素可以创建一个引用标记,用于文档参考文献的引用说明;
全局属性
12.全局属性;draggable属性用来定义元素是否可以被拖动有true和false两个值为true时可以被拖动。hidden属性用来定义元素是否被隐藏同样也有ture和false两个值为ture时表示隐藏该元素。spellcheack属性有ture和false两个值,主要针对input元素和textarea文本输入框,对用户输入的内容进行检查,为ture时进行检查(默认值)。contenteditable属性规定是否可编辑元素内容。