基础语法
HTML
HTML,全称“Hyper Text Markup Language(超文本标记语言)”,简单来说,网页就是用HTML语言制作的。HTML是一门描述性语言,是一门非常容易入门的语言。
HTML文档结构
如以下代码中实例:
<!DOCTYPE html> //文档类型,此处为声明该文档为html文档!
<html lang="en"> //(根元素)语言类型,此处为英文界面(en == english)!
<head> //(头元素),用于HTML文档的信息!
<meta charset="UTF-8"> //字符编码类型,此处为UTF-8编码,即国际编码,GB2132为国标编码
<meta http-equiv="X-UA-Compatible" content="IE=edge"> // X-UA-Compatible 是针对 IE8 版本的一个特殊文件头标记,用于为 IE8 指定不同的页面渲染模式。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> //网页标题
</head> //(头元素)结束
<body> //(主体元素)开始
//主体内容
</body> //(主体元素)结束
</html> //(根元素)结束
HTML文本元素
特殊字符
对于空格和一些特殊字符并不能直接输入,而是需要通过&符号加上对应的实体名称并以;符号结束才能正确输出。如:
- 空格—— ;
- "——"; >——& gt;
- &——&; +——& plusmn;
- ©——& copy; ®——& reg;
段落标记< p>
段落标记内的内容为一个段落,其会在段前和段后各添加一个空行。如:
如以下语法格式:
<P>这是第一个段落</p>
<P>这是第二个段落</p>
换行标记< br>
换行标记用于文字的换行显示,如果直接在html文档中输入类似于word等文本编辑器中常用的换行符ENRTER是无效的!
如以下语法格式:
<br>
标题标记< h>
标题标记用于创建不同级别的标题。标题等级范围为1~6,其中1级最大,字体也最大,6级最小,字体最小。亦可通过align参数来修改文字的对齐方式。
如以下语法格式:
<h1>这是第1级标题</h1>
<h2>这是第2级标题</h2>
<h3>这是第3级标题</h3>
<h4 align="left">这是第4级标题</h4>
<h5 align="right">这是第5级标题</h5>
<h6 align="center">这是第6级标题</h6>
文字列表标记< ul>&< ol>
文字列表标记可以将文字以列表的形式依次排列,使读者阅读更加清晰易懂。
注意点:
-
文字列表分为以下两种:
- 无序列表:无序列表会在每个列表项的前面添加一个原点符号,通过< ul>可以创建一组无序列表项,其中每一个列表项以< li>标记来表示!
如以下语法格式:
<ul>
<li>这是第1个无序列表</li>
<li>这是第2个无序列表</li>
<li>这是第3个无序列表</li>
</ul>
- 有序列表:有序列表会在每个列表项的前面添加一个顺序号,通过< ol>可以创建一组有序列表项,其中每一个列表项以< li>标记来表示!
如以下语法格式:
<ol>
<li>这是第1个有序列表</li>
<li>这是第2个有序列表</li>
<li>这是第3个有序列表</li>
</ol>
HTML图片与超链接
图片标记< img>
图片标记用于插入图片,既可展示内容又可美化封面。
注意点:
- 图片标记的属性如下:
- src用于指定图片的来源!
- width用于指定图片的宽度!
- height用于指定图片的高度!
- border用于指定图片外边框的高度,默认值为0!
- alt用于指定当前图片无法显示时显示的文字!
如以下语法格式:
<img src="./solar.jpg" width=300 height=200 border=10 alt="这是星系图片">
超链接标记< a>
超链接标记用于链接不同网页,一个网站由多个页面组成,页面之间是根据链接确定相互的导航关系。
注意点:
- 超链接标记的属性如下:
- herf用于指定超链接地址,可为绝对路径亦可以相对路径!
- herflang用于指定超链接位置所使用的语言!
- name用于指定超链接的标识名!
- type用于指定超链接所使用的MIME类型!
- charset用于指定超链接所使用的编码方式!
- target用于指定超链接的目标窗口!可选值如下:
- _parent:在上一级窗口中打开,一般使用框架页时使用!
- _blank:在新窗口中打开!
- _self:在同一个窗口中打开!
- _top:在浏览器的整个窗口中打开,忽略任何框架!
- tabindex用于指定按下Tab键时移动的顺序,从属性值最小的开始移动,其取值范围为0~32767!
- linkcontent用于指定设置超链接的内容,可以是文字,亦可是图片!
- accesskey用于为超链接设置快捷键!
如以下语法格式:
<a target="_blank" href="https://www.baidu.com/" herflang="CN" name="baidu" type="mimetype" charset="UTF-8" ></a>
HTML5新增的语义元素
< header>元素
< header>元素表示页面中一个内容区域或整个页面的标题。通常情况下,他可能是一个页面中的第一个元素,可以包含站点的标题、logo、旗帜广告等。
如以下语法格式:
<header>
<img src="picture.jpg" >
<h1>这是一张图片</h1>
</header>
< footer>元素
< footer>元素表示整个页面或页面中一个内容区域块的脚注,脚注通常包含日期、作者、版权信息等。
如以下语法格式:
<footer>
<ul>
<li>CoptRight © 2023 www.baidu.com 百度公司</li>
<li>本站使用IE9.0或以上版本为最佳显示效果</li>
</ul>
</footer>
< section>元素
< section>元素表示页面中的一个区域,如章节、页眉、页脚的其他部分。可以与标题标记结合起来使用,表示文档结构。
如以下语法格式:
<section>
<h2>section 标记的使用</h2>
<p>这是一个段落</p>
<footer>2023.3.2</footer>
</section>
< article>元素
< article>元素代表文档、页面或应用程序中的所有“正文”部分。
如以下语法格式:
暂定!
< aside>元素
< aside>元素用来表示当前页面或文章的附属信息部分。可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条等信息。
如以下语法格式:
暂定!
< nav>元素
< nav>元素用来表示页面中导航链接区域,其中包括一个页面中或一个站点内的链接。
如以下语法格式:
暂定!
HTML表格
表格标记< table>
表格标记用于表示整个表格。
注意点:
-
表格标记的属性如下:
-
width用于设置表格宽度!
-
border用于设置表格的边框!
-
align用于设置表格的对齐方式!
-
gbcolor用于设置表格的背景颜色!
-
如以下语法格式:
<table width="300" heigh="150" border="1" align="center">
///
</table>
标题标记< caption>
标题标记用于标记标题。
注意点:
- 标题标记的属性如下:
- align用于设置标题的水平对齐方式!
- valign用于设置标题的垂直对齐方式!
如以下语法格式:
<caption>学生成绩单</caption>
表头标记< th>
表头标记用于标记表头。
注意点:
- 表头标记的属性如下:
- align用于设置表头的水平对齐方式!
- background用于设置表头的背景!
- colspan用于设置
- valign用于设置
如以下语法格式:
暂定
表头行标记< th>
表头行标记用于表示表格中的一行。< tr>标记要嵌套在
标记中使用。注意点:
- 表头标记的属性如下:
- align用于设置表头的水平对齐方式!
- background用于设置表头的背景!
如以下语法格式:
暂定
单元格标记< th>
单元格标记用于表示表格中的一列。
注意点:
- 单元格标记的属性如下:
- align用于设置表头的水平对齐方式!
- background用于设置表头的背景
- valign用于设置
学生成绩表
如以下语法格式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table width="300" heigh="150" border="1" align="center">
<caption>学生成绩表</caption>
<tr>
<td align="center" valign="middle">姓名</td>
<td align="center" valign="middle">语文</td>
<td align="center" valign="middle">数学</td>
<td align="center" valign="middle">英语</td>
</tr>
<tr>
<td align="center" valign="middle">小米</td>
<td align="center" valign="middle">92</td>
<td align="center" valign="middle">92</td>
<td align="center" valign="middle">92</td>
</tr>
<tr>
<td align="center" valign="middle">斯克</td>
<td align="center" valign="middle">85</td>
<td align="center" valign="middle">85</td>
<td align="center" valign="middle">85</td>
</tr>
<tr>
<td align="center" valign="middle">恺</td>
<td align="center" valign="middle">65</td>
<td align="center" valign="middle">65</td>
<td align="center" valign="middle">65</td>
</tr>
</table>
</body>
</html>
运行如下:
HTML音频和视频
< audio>播放音频标记
< audio>播放音频标记专门用来播放音频数据。
注意点:
- < audio>标记支持多种音频格式,包括Ogg、MP3、AAC和WAV等!
如以下语法格式:
<audio src="iloveyou.ogg" type="audio/ogg" autoplay></audio>
<audio src="iloveyou.mp3" type="audio/mpeg"></audio>
< vedio>播放视频标记
< vedio>播放视频标记专门用来播放视频数据。
注意点:
- < video>标记支持多种音频格式,包括Ogg、MP4、WebM!
- < video>标记的属性如下:
- src属性用于指定要播放的视频,其属性值为该视频的URL地址!
- width属性用于指定播放器的宽度!
- height属性用于指定播放器的高度!
- autoplay属性用于指定是否自动播放视频,其属性值为True或False!
- controls属性用于指定是否显示播放控制组件,其属性值为True或False!
如以下语法格式:
<video src="iloveyou.mp4"autoplay="true" controls="true">你的浏览器不支持<audio>标记!</video>
HTML表单标记
< form>标记
< form>标记用于在页面中插入表单,在该标记中可以定义处理表单数据程序的URL地址等信息。
注意点:
- < form>标记的属性如下:
- name属性用于指定表单的名称!
- method属性用于指定表单的提交方式,其可选项包括POST和GET!
- action属性用于指定表单提交的URL地址,也就是表单的处理页!
- enctype属性用于设置表单内容的编码方式!其可选项如下:
- text/plain即以纯文本的形式传送信息!
- application/x-www-form-urlencoded即默认编码形式!
- multipart/form-data即使用MINE编码!
- target属性用于返回信息的显示方式!其可选值如下:
- _blank:将返回信息显示在新的窗口中!
- _parent:将返回信息显示在父级窗口中!
- _self:将返回信息显示在当前窗口中!
- _top:将返回信息显示在顶级窗口中!
如以下语法格式:
<form action="action.html"target="_blank" method="post" name="form" id="form1"></form>
</body>
< input>表单输入标记
< input>表单输入标记 用于向页面中添加单行文本、多行文本、按钮等。
注意点:
-
< input>表单输入标记的属性如下:
- type属性用于指定添加的是那种类型的输入字段,其可选值如下:
- text文本框
- submit提交按钮
- password密码域
- file文件域
- urlURL地址
- E-mail地址
- color颜色选择器
- datetime日期时间选择器
- number数字选择器
- range滑块
- reset重置按钮
- button普通按钮
- hidden隐藏域
- image图像域
- radio单选按钮
- date日期选择器
- checkbox复选框
- disabled属性用于指定输入字段不可用,即字段变成黑色,其可选值为空值或disabled!
- checked属性用于指定输入字段是否处于被选中状态,用于type属性值radio和checkbox情况下。其属性值为空值或checked!
- width属性用于指定输入字段的宽度,用于type属性值为type的情况下!
- height属性用于指定输入字段的高度,用于type属性值为type的情况下!
- maxlength属性用于指定输入字段可输入文字的个数,用于type属性值为text或password的情况下,默认没有限制!
- readonly属性用于指定输入字段是否为只读,其属性值为空值或readonly!
- size属性用于指定输入字段的宽度,用于type属性值为text或password的情况下,以文字个数为单位,当type属性为其他值时,以像素为单位!
- src属性用于指定图片的来源。只有当type属性值为image时有效!
- usemap属性为图片设置热点地图,只有当type属性值为image时有效。属性值为URL,URL格式为"#+
- alt属性用于指定当图片无法显示时显示的文字,只有type属性为image时有效!
- name属性用于指定输入字段的名称!
- value属性用于指定输入字段默认数据值,当type属性为checkbod和radio时,不可省略次属性,为其他值时,可以省略。当type属性值为button\reset\submit时,指定的是按钮上的显示文字;当type属性值为checkbod和radio时,指定的是数据项选定时的值。
- type属性用于指定添加的是那种类型的输入字段,其可选值如下:
< select>下拉菜单标记
< select>下拉菜单标记用于在页面中创建下拉列表,此时的下拉列表是一个空的列表,要使用< option>标记向列表中添加内容。