HTML 5基础_<d1> 并非只包含经过适当排序的<dt> 和 <dd> 组及 <script>、<template-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45459388/article/details/101470561

本文深入讲解HTML5的基础知识，涵盖HTML5的结构、标签、特殊符号、图像与超链接的使用，列表、表格、媒体元素的语法，以及表单的设计与验证。适合初学者快速掌握HTML5的核心内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一：HTML 5基础

1.什么是HTML？

HTML是用来描述网页的一种语言，是一种超文本标记语言，也仅是一种标记语言。它是由一套标记标签组成，也使用此标记标签描述网页。

2. HTML 5文件的基本结构

二部分：头部（包括网页标题(title)等）和主体（网页的内容信息）。

3.基本标签

标题标签：<h1>~<h6>(且由大到小)
段落标签：<p></p>
换行标签： <br/>
水平线标签：<hr/>
字体样式标签：<strong/> (字体加粗)  <em></em>(字体倾斜)
 注释：<!--注释内容-->

如：

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<p>
   北京欢迎你,有梦想谁都了不起！
   有勇气就会有奇迹。
</p>
<strong>徐志摩人物简介</strong>
<em>1910年入杭州学堂</em>
北京欢迎你,有梦想谁都了不起！<br/>
有勇气就会有奇迹。<br/>
<hr />
<!--在黄土地刷新成绩。
北京欢迎你,像音乐感动你-->

效果：

标题：

段落：

北京欢迎你,有梦想谁都了不起！有勇气就会有奇迹。

加粗:

徐志摩人物简介

倾斜：

1910年入杭州学堂

换行：

北京欢迎你,有梦想谁都了不起！
有勇气就会有奇迹。

水平线：

有勇气就会有奇迹。

在黄土地刷新成绩。

4.特殊符号

空格：&nbsp
大于号：&gt
小于号:&lt
引号：&quot

5.图像标签

插入图片的语法：

< img src =“图片地址” alt=“图像的代替文字” title=“鼠标悬停提示文字” width=“图片宽度” height=“图片高度” />

6.超链接标签

语法：

<a  href ="链接地址"  target="目标窗口位置">链接文本或图像<a>

【target是指链接将在哪个窗口打开，且常用值有-self（自身窗口）、-blank（新建窗口）】

类型：

页面间链接（从A页到B页）、锚链接（从A页的甲位置到A页乙位置或A页的甲位置到B页乙位置）、功能性链接（在页面调用其他程序功能，如QQ等）

a:页面间链接

<!--如：-->
<a href="../../img/book.jpg" target="-blank">YL在线学习平台</a>

结果：
在这里插入图片描述
当点击【YL在线学习平台】时，就到【href="…/…/img/book.jpg"】这个地址页面中

b：锚链接

语法：

<a href ="#标记名">当前位置<a/>
<a name="标记名">目标位置<a/>

c：功能性链接

语法：

<a href="mailto:应用程序的网页地址"/>

二：列表、表格与媒体元素

1.列表

a.无序列表

语法：

<ul>   
    <li>第一项</li>   
    <li>第二项</li>
</ul>

注意：

ul标签中只能嵌套li标签，不能嵌套其他标签
li标签中可以嵌套任何标签

3.且每项都是平级的，没有级别之分

特性：

1.没有顺序，每一个li标签独占一行

2.默认li标签项前面有个实心小圆点

b.有序列表

语法：

<ol>
    <li>第一项</li>   
    <li>第二项</li>
</ol>

特性：

1.有顺序，每一个li标签独占一行

2.默认li标签项前面有顺序标记

c.定义列表

语法：

<dl>
    <dt>标题一</dt>
    <dd>第一项</dd>
    <dd>第二项</dd>
</dl>

2.表格

语法：

<table>    
    <tr>
    	<th></th>
    </tr>
    <tr>
    	<td></td>
    </tr>
</table>

跨行

语法：

  <table> 
      <tr>
            <td rowspan="所跨行数"></td>
      </tr>
</table>

跨列

语法：

 <table> 
      <tr>
            <td colspan="所跨列数"></td>
      </tr>
</table>

如：

<table border="1">          	<!--边框为1-->
			<tr>
				<th>总页面流量</th>			<!--标题-->
				<th>共计来访</th>
				<th>会员</th>
			</tr>
			<tr>
				<td rowspan="2">9756488</td>	<!--跨2行-->
				<td>97656</td>
				<td>7538087</td>
			</tr>
			<tr>
				<td colspan="2">46776686</td>		<!--跨2列-->
			</tr>
		</table>

效果
在这里插入图片描述

3：媒体元素

1.视频元素

语法：

<video src="路径" controls="controls"/>该浏览器不支持video元素</video>
或<video controls><source src="路径"/>该浏览器不支持video元素</video>

【注意：每个source元素对应一种格式的视频】

（如果需要自动播放，可以把语法中的 controls改为autoplay）

2.音频元素

语法：

<audio src="路径" controls="controls"/>该浏览器不支持audio 元素</audio>
或<audio  controls><source src="路径"/>该浏览器不支持audio 元素</audio >

（如果需要自动播放，可以把语法中的 controls改为autoplay）

如：

<video controls >
			<source src="img/vedio/vedio.avi"></source>
			<source src="img/vedio/video.webm"></source>
</video>
<audio controls>
			<source src="../img/Z01 示例素材/示例10：audio音乐播								放/music/music.ogg"></source>
</audio>

效果：在这里插入图片描述

3.页面布局

三部分：header(头部)\section(正文)\footer(脚部)

	<body>
		<header>
			<h4>头部</h4>
		</header>
		<section>
			<h3>正文</h3>
		</section>
		<footer>
			<h3>脚部</h3>
		</footer>
	</body>

结果：在这里插入图片描述

三：表单

1.表单是什么？

它是用来接收用户的输入及输入信息的提交。如登录时的用户名、密码、提交按钮等

2.创建表单

需要在form标签中，而form有二个属性action和method

action：接收表单内容的程序，若为空，则默认表单提交到本页
method：发送数据的方法。语法：method=“post/get”【post方法提交方式不会改变地址状态，且表单数据不会被显示。而get方法地址状态会变化，且表单数据会显示。】

3.表单元素

input标签（用type属性设置）

1.文本框和密码框

<!--文本框-->
<input name="" type="text" maxlength="" value="" size=""/>

<!--密码框-->
<input name="" type="password" maxlength="" value="" size=""/>

【其中name是文本框的名称，type="text"是类型为文本框，type="password"是类型为密码框。value是默认值（可写可不写），size是宽度（可写可不写），以字符为单位。maxlength是输入数据的长度】

如：

	<form method="post" action="S1.html">
		<p>
            名字:
             <input name="name" type="text" value="六六" maxlength="4" />
        </p>
		<p> 
            密码：
            <input name="pass" type="password" size="3"/> 
        </p>
     </form>

效果：在这里插入图片描述

2.单选按钮（只能选择一个）和复选框（可以有选多个）

<!--单选按钮-->
<input name="" type="radio" value="" checked/>按钮中的字

<!--复选框-->
<input name="" type="checkbox" value="" checked/>按钮中的字

【其中name是文本框的名称，type="radio"是类型为单选框，type="checkbox"是复选框，checked是默认选中此按钮】

如：

<form method="post" action="">
    <p>
		性别：
		<input name="gen" type="radio" value="男" checked/>男
		<input name="gen" type="radio" value="女" />女
    </p>
    <p>
        爱好：
        <input type="checkbox" name="interest" value="sport" checked/>运动
        <input type="checkbox" name="interest" value="talk" checked/>聊天
        <input type="checkbox" name="interest" value="play" />玩游戏
    </p>
</form>

效果：在这里插入图片描述

3.按钮

类型：普通按钮（button）、提交按钮（submit用来提交表单信息）、重置按钮（reset清除吧中已填写的信息）、图片按钮（image）

语法：

<input type="" name="" value=""/>
<input type="" src="图片路径"/>

【value是显示按钮上的文字】

如：

<form method="post" action>
    <p>
        <input type="reset" name="butReset" value="reset按钮" />
        <input type="submit" name="butSubmit" value="submit按钮" />
        <input type="button" name="butButton" value="button按钮" 
               onclick="alert(this.value)"/>
    </p>
    <input type="image" src="../img/练习2：人人网注册页面/image/renren.gif"/>		
</form>

效果：在这里插入图片描述

4.文件域

<form method="post" action="" enctype="multipart/form-date">
	<input type="file" name=""/>
</form>

5.邮箱、网址和搜索框

<!-邮箱-->
<input type="email" name="" value=""/>

<!--网址-->
<input type="url" name="" value=""/>

<!--搜索框-->
<input type="search" name="" value=""/>

【提交表单时会自动验证Email或url或search中的值是否是一个有效的邮箱地址或网址地址或合法，若无效则不能提交】

6.数字和滑块

<!--数字-->
<input type="number" name="" min="" max="" step=""/>

<!--滑块-->
<input type=range" name="" min="" max="" step=""/>

【min是最小值，max是最大值，step是数字之间的间隔】

7.只读和禁用

只读：不能修改，只能显示，可用readonly

禁用：不能使用某项功能，且被禁用的功能呈浅色，可用disabled

多行文本域

语法：

<textarea>  naame="textarea" cols="列数" rows="行数"/>
文本内容
</textarea>

如：

<form method="post" action="">
			<p>
				<textarea name="textarea" cols="40" rows="6">
					自信、活泼、善于思考...
				</textarea>
			</p>
</form>

效果：在这里插入图片描述

列表框

语法：

<select name="" size="行数">
				<option value="可选项的值" selecetd>..</option>
				<option value="">..</option>
				<option value="">..</option>

【select标签中必须有一个option标签，而且一个列表框中只能有一个列表框默认被选中，用selected】

如：

<form method="post" action="">
    出生日期：
    <input type="test" name="byear" value="yyyy" size="4" maxlength="4" />年
    <select name="bmon">
        <option value="">[选择月份]</option>
        <option value="1">一月</option>
        <option value="2">二月</option>
        <option value="3">三月</option>
        <option value="4">四月</option>
    </select>