HTML5

Sherry 发布于 2025-03-27 41 次阅读 文章 最后更新于 2025-03-27 1874 字

HTML5

Hyper Text Markup Language(超文本标记语言)

第一个HTML程序

<!DOCTYPE html> <!-- 文档类型规范 -->
<html>
    <head>
        <meta charset="utf-8">  <!--编码 -->
        <title>这是我的第一个HTML程序</title>    <!-- 标题 -->
    </head>
    <body>
        <h1>一级标题</h1>   <!-- 一级标题 -->
        <h2>二级标题</h2>   <!-- 二级标题 -->
        <h3>三级标题</h3>   <!-- 三级标题 -->
        <h4>四级标题</h4>   <!-- 四级标题 -->
        <h5>五级标题</h5>   <!-- 五级标题 -->
        <h6>六级标题</h6>   <!-- 六级标题 -->
        <p>段落标签</p> <!-- 段落标签-->
        <br />  <!-- 回车 -->
        <p>第二段</p>
    </body>
</html>

部分快捷键

标签名+Tab 一键生成标签

Ctrl+/ 注释

基本标签

注释

<!-- 注释 -->

标题标签

<h1>一级标题</h1> <!-- 一级标题 -->
<h2>二级标题</h2> <!-- 二级标题 -->
<h3>三级标题</h3> <!-- 三级标题 -->
<h4>四级标题</h4> <!-- 四级标题 -->
<h5>五级标题</h5> <!-- 五级标题 -->
<h6>六级标题</h6> <!-- 六级标题 -->

描述型标签

<!--meta描述性标签，它用来描述我们网站的一些信息-->
<!--meta一般用来做seo-->
<meta charset="UTF-8">
<meta name="keywords" content="关键字">
<meta name="description" content="描述">

换行标签

<br/>

水平线标签

<hr/>

粗体标签

<strong>粗体</strong>

斜体标签

<em>斜体</em>

特殊符号

    <!-- 空格 -->
>   <!-- 大于号 -->
<   <!-- 小于号 -->
©   <!-- 版权符号 -->

图像标签

<img src="path"alt="text"title="text"width="x"height="y">
<!-- 图像地址  图像的替代文字  鼠标悬停提示  图像宽度  图像高度-->
<!-- 图片宽高可以不填写-->
../ 上一级目录

超链接

<a href="path" target="目标窗口位置">链接文本或图像<a>
<!-- 可以只写路径，将图像标签放入变成图像超链接-->
<!-- _self 在当前标签打开-->
<!-- _black 在新标签打开-->

锚链接 

<!--锚链接
1,需要一个锚标记
2,跳转到标记
[[--]]>
<!--使用name作为标记-->
<a name="top">顶部</a>        
<a href="#top">回到顶部</a> <!-- 跳转到对应标记处-->

功能性链接 

<a href="mailto:邮箱">文字</a>

块元素和行内元素

块元素：无论内容多少，该元素独占一行（p,h1-h6……）

行内元素：内容撑开宽度，左右都是行内元素的可以在排在一行（a,strong,em……）

列表标签

列表的分类：

1.无序列表 

<ol>
    <li> </li>
    <li> </li>
    <li> </li>
</ol>

2.有序列表 

<ul>
    <li></li>
    <li> </li>
    <li> </li>
</ul>

3.定义列表 （dl标签 dt列表名称 dd列表内容） 

<dl>
    <dt>列表名称<dt>
    <dd>内容<dd> 

    <dt>列表名称<dt>
    <dd>内容<dd> 
</dl>

表格标签

表格：table

行：tr

列：td

<table border="1px">    <!--border边框粗细 -->
<tr>
<td colspan="4">1-1</td>    <!--colspan跨列   站对应列数-->
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
</tr>
<tr>
<td rowspan=“2”>2-1</td>    <!--rowspan跨行   站对应行数-->
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
</tr>
</table>

视频与音频

视频：video

<video src="path" controls autoplay></video>    <!-- controls控制条  autoplay自动播放-->

音频：audio

<audio src="path" controls autoplay></audio>    <!-- controls控制条  autoplay自动播放-->

页面结构分析

iframe内联框架

<iframe src="path" name="mainFrame" width=“” height=“”> </iframe>       <!-- name框架标识名 width宽 height高-->

<a href="url" target="mainFrame"></a>   <!-- 通过超链接调用iframe -->

表单

<form method="post" action="url">   <!-- method用何种方式发送表单数据 action向何处发送表单数据-->
    <p>名字：<input name="name"type="text"><p>
    <p>密码：<input name="pass"type="password"><p>
    <p>
    <input type="submit"name="Button"value=""/> <!-- input输入框   type种类-->
        <!-- （text文本框 password密码框 submit提交 reset重置）-->        
    <input type="reset"name="Reset"value="重填"/>
</p>

</form>

表单语法

所有表单元素几乎都要name

单选框

<!--单选框要编组 value值 name组-->
<p>性别：
<input type="radio"value="boy"name="sex" checked/>  <!-- checked默认值-->
<input type="radio"value="girl" name="sex"/>
</p>

多选框

<!-- 也要编组-->
<p>爱好：
<input type="checkbox"value="sleep"name="hobby">睡觉
<input type="checkbox'"value:="code"name="hobby" checked>敲代码    <!-- checked默认值-->
<input type="checkbox"value="chat"name="hobby">聊天
</p>

按钮

<!-- input type="button"普通按钮
input type="image"图像按钮
input type="submit"提交按钮
input type="reset重置 （清空表单）-->
<p>按钮：
<input type="button"name="btnl"value="点击变长">
<input type="image"src="../resources/image/1.jpg">
</p>

下拉框

<p>下拉框：
<select name="列表名称">
<option value="选项的值">中国</option>
<option value="选项的值">美国</option>
<option value:="选项的值" selected>瑞士</option>  <!--selected默认值-->
<option value:="选项的值">印度</option>
</select>
</p>

文本域

<!--clos行 rows列-->
<p>反馈：
<textarea name="textarea"cols="50"rows="10">文本内容</textarea>
</p>

文件域

<p>
<input type="file"name="files">
<input type="button"value="上传"name="upload"/>
</p>

邮件验证

<p>邮箱：
<input type="email"name="email">
</p>

URL验证

<p>URL：
<input type="url"name="url">
</p>

数字验证

<!-- max最大值 min最小值 step步长-->
<p>数字：
<input type="number"name="num"max="100"min="0"step="10">
</p>

滑块验证

<p>音量：
<input type="range" name="voice" min="0" max="100" step=2>
</p>

搜索框

<p>搜索：
<input type="search"name="search">
</p>

表单的应用

readonly 只读
disabled 禁用
hidden 隐藏

增强鼠标可用性

<p>
<label for:="mark">你点我试试</label>    <!-- 点击文字跳转-->
<input type="text"id="mark">    
</p>

表单初级验证

placeholder 提示信息
required 非空判断
pattern 正则表达式判断

label标签

<!-- 用于绑定单选框与复选款的文本信息，参数for绑定id-->
<form action="xxx" method="get">  
    <input type="radio" id="man" name="sex" name="radio" value="man"><label for="man">男</label>  
    <input type="radio" id="women" name="sex" value="women"><label for="women">女</label>  
    <input type="submit" value="提交">  
</form>

<!-- 简易写法-->
<label><input type="radio" id="man" name="sex" value="man">男</label>

到此HTML5笔记结束~