HTML基础语法

monkeyboots

已于 2022-03-12 15:36:26 修改

阅读量480

点赞数 1

文章标签：编辑器开发语言 html5

于 2022-03-02 23:26:25 首次发布

本文链接：https://blog.csdn.net/monkeyboots/article/details/123243093

版权

基础语法

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文本元素

特殊字符

对于空格和一些特殊字符并不能直接输入，而是需要通过&符号加上对应的实体名称并以;符号结束才能正确输出。如：

空格——&nbsp；
"——&quot； >——& gt;
&——&amp； +——& 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 &copy; 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">你的浏览器不支持&lt;audio&gt;标记！</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格式为"#+标记的name属性值"。例如：当< map>标记的name属性值为Map，该URL为#Map!
- alt属性用于指定当图片无法显示时显示的文字，只有type属性为image时有效！
- name属性用于指定输入字段的名称！
- value属性用于指定输入字段默认数据值，当type属性为checkbod和radio时，不可省略次属性，为其他值时，可以省略。当type属性值为button\reset\submit时，指定的是按钮上的显示文字；当type属性值为checkbod和radio时,指定的是数据项选定时的值。