Loading

html总结

网页基本信息

<!DOCTYE html>
<html lang="en">

<!-- head标签代表网页头部 -->
<head>
	<!-- meta描述性标签，它用来描述我们网站的一些信息，如编码 -->
	<!-- meta一般用来做SEO -->
	<meta charset="UTF-8">
	<meta name="keyword" content="关键词内容">
	<meta name="description" content=“描述的内容”>
	
	<!-- title网页标题 -->
	<title>网页名</title>
</head>

<!-- body标签代表网页主体 -->
<body>
</body>
</html>

网页基本标签

<!-- 标题标签 -->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>

<!-- 段落标签 -->
<p>段落的内容</p>

<!-- 换行标签 -->
换行<br/>

<!-- 水平线标签 -->
<hr/>

<!-- 粗体、斜体 -->
<strong>加粗的内容</strong>
<em>斜体的内容</em>

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

图像标签

<img src="img's path" alt="text" title="text" width="x" height="y" />
<!--
src : 图片的地址，推荐相对地址
alt : 图片未正常显示时显示的文字
title : 鼠标悬停上的文字
width/height : 图片的宽高
-->

超链接标签

<a href="path" target="_self/...">链接文本或图像</a>
<!--
href : 要跳转到的页面或者#
target : 窗口打开的位置
	_blank 在新标签打开
	_self 在当前网页中打开
-->

<!-- 使用name作为标记 -->
<a name="top"></a>
<!-- 锚链接
1. 需要一个锚标记
2. 跳转到标记
-->
<a href="#top">点击回到顶部</a>

<!-- 功能性链接
邮件链接 : mailto:邮箱地址
-->
<a href="mailto: mailpath">...</a>

媒体元素

视频元素

<video src="video's path" controls autoplay></video>
<!--
src : 视频的地址或者链接
controls : 控制条
autoplay : 自动播放
-->

音频元素

<audio src="audio's path" controls autoplay></audio>
<!--
src : 音频的地址或者链接
controls : 控制条
autoplay : 自动播放
-->

页面结构

  • header：标题头部区域的内容（用于页面或者页面中的一块区域）
  • footer：标记脚部区域的内容（用于整个页面或页面一块区域）
  • section：Web页面中的一块独立区域
  • article：独立的文章内容
  • aside：相关内容或应用（常用于侧边栏）
  • nav：导航类辅助内容

iframe内联框架

<iframe src="path" name="mainframe"></iframe>
<!--
src : 引用地址
name : 框架标识名
-->

表单，post和get提交

<form method="post" action="result.html">
    <p> 名字: <input name="name" type="text"> </p>
    <p> 密码: <input name="password" type="password"> </p>
    <p>
    <input type="submit" name="Button" value="提交"/>
    <input type="reset" name="Reset" value="取消"/>
    </p>
</form>
<!--
method : 提交方式，get提交的信息会在url显示|post提交的信息会隐藏在httprequest里
action : 表单提交到的位置，可以使网站，也可以是请求
-->
属性 说明
type 指定元素的类型。text、password、checkbox(多选框)、radio(单选框)、submit、reset、file、hidden、image、button，默认为text。
name 指定表单元素的名称。
value 元素的初始值。type为radio时必须指定一个值。
size 指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单元。对于其他类型，宽度以像素为单位。
maxlength type为text或password时，输入的最大字符数
checked type为radio或checkbox时，指定按钮是否被选中 
<!-- 单选框 -->
<p>性别:
	<input type="radio" value="man" name="sex"/>男
	<input type="radio" value="woman" name="sex"/>女
</p>
<!-- 多选框 -->
<!-- checked设置为默认选中 -->
<p>爱好:
	<input type="checkbox" value="code" name="hobby"/>敲代码
	<input type="checkbox" value="game" name="hobby"/>游戏
</p>

<!-- 按钮 -->
<p>按钮:
	<input type="button" name="btn1" value="点击"/>
	<input type="image" src="path"/>
	<input type="submit" name="Button" value="提交"/>
    <input type="reset" name="Reset" value="取消"/>
</p>
<!-- 下拉框 -->
<!-- selected设置为默认选中 -->
<p>地区:
	<select name="列表名称">
		<option value="Guangdong">广东</option>
		<option value="Fujian">福建</option>
	</select>
</p>
<!-- 文本域 -->
<!-- cols:列数，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>
<p>URL:
	<input type="url" name="url"/>
</p>
<p>数字:
	<input type="number" name="num" max="100" min="0" step="1"/>
</p>
<!-- 滑块 -->
<p>音量:
	<input type="range" name="volunme" min="0" max="100" step="1"/>
</p>
<!-- 搜索框 -->
<p>搜索:
	<input type="search" name="search"/>
</p>
<!-- 增强鼠标可用性 -->
<p>
	<label for="mark">测试</label>
	<input type="text" id="mark"/>
</p>

表单的应用

  • 隐藏域
    • hidden
  • 只读
    • readonly
  • 禁用
    • disable

表单的初级验证

常用方式

  • placeholder : 提示信息
  • required : 非空判断
  • pattern : 正则表达式，需要的表达式直接查找，正则表达式

高级验证通过js等来进行

posted @ 2020-10-11 16:23  哈啤丶  阅读(96)  评论(0)    收藏  举报