html
概述:
- html语言是超文本标记语言,是一种使用标签来布局内容的语言。
- 基础的结构:
<html>
<head>
<meta charset="utf-8" />
<title>...</title>
</head>
<body>
<h1>...</h1>
<p>...</p>
</body>
</html>
标签:
- 标签就是<>包裹标签名构成的。可以是单个,也可以是一对。例如
<title>...</title>
就是一对标签,表示网页页面的标题。<meta charset="utf-8" />
是单标签,没有结束标签。/>表示标签结束。 - 常用标签含义:
<html>...</html>
表示html语言。<head>...</head>
表示网页头部,可以指定网页标题,网页编码,引入css和js文件等。<body>...</body>
表示页面显示内容,可以放入文字,图片,视频,音频,表格,超链接,表单等元素,是网页的主要构成内容。
网页的文字
- 标题:
<h1>主标题,只能存在一个,<h2>,<h3>,<h4>,<h5>,<h6>都是副标题且逐级递减,可以存在多个 ,标题最小到<h6>
。 - 段落:
<p>...</p>
包裹文字,在网页中显示成一段。是块级元素,显示时会独占一行。 - 换行符和分隔符:
<br />和<hr />
分别表示换行符和分隔符。
列表
- 无序列表:
<ul><li>...</li><li>...</li><li>...</li></ul>
表示无序列表。 - 有序列表:
<ol><li>...</li><li>...</li><li>...</li></ol>
- 自定义列表:
<dl><dt>...</dt><dd>...</dd><dt>...</dt><dd>...</dd><dt>...</dt><dd>...</dd></dl>
是自定列表,其中<dt>
中定义列表标题<dd>
中定义列表描述。
链接
- 格式:
<a href="https://www.leeyuyh.com">leeyuyh</a>
定义了一个指向www.leeyuyh.com的连接,在网页上显示的文本内容是leeyuyh。如果指向同一网站,则连接路径可以写成相对路径。 - #:连接中的路径写成#可以起站位作用。也可使用#id定位到指定元素位置。
- target:可以指定到新连接的打开方式:_blank表示新建窗口打开。
图片
- 格式:
<img src="..." alt="无法查看图像时的描述信息" title="鼠标悬停时的提示信息"/>
- 图像是一个行内元素,即显示时不会另起一行。插入图像时需验证像素和显示大小,可以用css控制。
表格
- 格式:
<table><tr><td>...</td></tr></table>
tr表示一行表格,td表示一个单元格,可以添加属性进行单元格合并(<td colspan="2">
表示合并临行,<td rowspan="2">
表示合并临列) - 标题:
<tr><th>...</th></tr>
th中放入表格标题,th有scope属性,可以指定row(行标题)或者col(列标题)
表单
- 格式:
<form action="www.leeyuyh.com" method="GET">...</form>
定义表单数据提交的地址和方式。<form>标签对可以包括一系列<input>标签用于收集信息
- input标签属性:type属性决定input显示方式,text表示标准文本,password表示密码,textarea表示文本框,radio表示单选框(通过value指定发送给服务器的值),checkbox表示复选框(通过value指定发送的值),file表示上传文件框,submit表示提交按钮(也可使用submit标签和button按钮)。
- select标签:表示下拉选框,默认是单选,可写multiple属性改为多选。select的选项需要通过option给出,同样也需在option的属性中指定value值(发送给服务器的值,不指定的话默认是和name与其包裹的文本一致)。
- fieldset,label,legend标签:fieldset标签可以指定一些元素为一组,legend标签能为这组元素添加标题,label标签用于指定元素的说明信息。
视频
- 格式(两种):i.
<video src="">...</video>
表示插入视频,可选属性有preload(是否需要预缓冲),loop(循环),controls(播放控制器),poster(封面),autoplay(自动播放)等。
ii.<source src="" type="video/mp4"/>
source可以指定插入的视频格式,可以根据特定浏览器来确定是否支持格式,确保能够正常播放。
音频
<audio>...</audio>
表示插入音频文件,和video具有的属性差不多。<source src="" />
第二种插入音频的方式。
div与span
- div是一个块级元素,可以使用div包裹元素起到分组作用,html中的标签都能指定id和class属性,使用这些属性可以快速布局。
- span是行内元素,使用span包裹内联元素可以完成分组作用,同样适合布局。
iframe
- 网页中的内联窗口使用iframe标签定义,格式:
<iframe src="资源地址" width="xxpx" height="xxpx"></iframe>
转义字符
- 用来向网页中插入特殊字符例如:<,>,&,",'等