HTML5

Sherry柒

于 2024-03-03 18:13:29 发布

阅读量705

点赞数 22

文章标签： html5 前端 html

本文链接：https://blog.csdn.net/Sherry77777777/article/details/136435526

版权

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>

特殊符号

&nbsp;	<!-- 空格 -->
&gt;	<!-- 大于号 -->
&lt;	<!-- 小于号 -->
&copy;	<!-- 版权符号 -->

图像标签

<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	正则表达式判断

到此HTML5笔记结束~

```