文章目录
HTML
w3c标准包括：
结构化标准语言（HTML、XML）
表现标准语言（CSS）
行为语言（DOM、ECMAScript）
网页基本信信息
<!DOCTYPE html>
<!-- DOCTYPE告诉浏览器使用什么规范-->
<html>
<!--
作者：offline
时间：2021-01-09
描述：基本信息
-->
<!-- head标签代表网页头部-->
<head>
<!-- meta描述性标签，用来描述网站的一些信息-->
<meta charset="UTF-8">
<meta name="keywords" content="html,css,js">
<meta name="description" content="第一个网页">
<!--网页标题-->
<title>My First Page</title>
</head>
<!-- body标签代表网页主体-->
<body>
</body>
</html>
网页基本标签
<!--标题标签-->
<h1>标题标签</h1>
<!--段落标签-->
<p>我说你是人间的四月天；</p>
<!--换行标签-->
我说你是人间的四月天；<br />
<!--水平线标签-->
<hr />
<!--特殊标签-->
空 格
>
<
©
图像标签
<img src="path" alt="text" title="text" width="x" height="y"/>
src:图像地址（必填）
相对路径 …/ (返回上一层路径)
绝对路径
alt:图像的替代文字（必填）
title:鼠标暂停时的提示文字
width:图片宽度
height:图片高度
链接标签
<a href="path" target="目标窗口位置">链接文本或图像</a>
href:链接路径
target:目标窗口位置
常用值:_self在自己的标签中打开 _blank在新标签中打开
锚链接
可以实现具体位置的跳转
<a name="top"></a>
<a href="#top"></a>
功能性链接
<a href="mailto:"></a>
行内元素和块元素
行内元素
内容撑开宽度，左右都是行内元素的可以在一行
a 、strong、em…
块元素
无论内容多少，都独占一行
p、h1-h6…
列表
有序列表
<ol>
<li></li>
<li></li>
<li></li>
</ol>
无序列表
<ul>
<li></li>
<li></li>
<li></li>
</ul>
自定义列表
<dl>
<dt>颜色</dt>
<dd>蓝色</dd>
<dd>黄色</dd>
<dd>紫色</dd>
<dt>天气</dt>
<dd>晴天</dd>
<dd>阴天</dd>
<dd>雨天</dd>
</dl>
表格
<table></table>表格
<tr></tr>行
<td></td>列
扫描二维码关注公众号，回复：
12235389 查看本文章
属性：colspan跨列
rowspan跨行
<table>
<tr>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
</tr>
</table>
视频和音频
controls 控制条
autoplay 自动播放
<vedio src="" controller autoplay></vedio>
<audio src="" controller autoplay></audio>
iframe内联框架
<iframe src="引用页面地址" name="框架标志名"></iframe>
表单
属性：
action：表单提交的位置，可以是网站，也可以是一个请求处理地址
method：get:会在url中看见提交的信息，不安全，效率高
post:比较安全，可以传输大文件
<form method="get/post" action="目标页面"></form>
文本框
value:表示初始值
readonly：只读，不可以修改
<p>用户名：<input type="text" name="username" value="www" readonly></p>
密码框
hidden：隐藏
<p>密码：<input type="password" name="pwd" value="123" hidden></p>
单选框
name：用来分组，name相同为同一组，同一组只能选择一个
checked：默认选项
label标签可以用来增强鼠标的可用性
<p>
<input type="radio" value="male" name="sex" id="m"/><label for="m">男</label>
<input type="radio" value="female" name="sex" id="f" checked /><label for="f">女</label>
</p>
多选框
checked：默认选项
<p>
<input type="checkbox" name="hobby" id="hobby" value="sleep" />睡觉
<input type="checkbox" name="hobby" id="hobby" value="play" />玩
<input type="checkbox" name="hobby" id="hobby" value="code" checked/>敲代码
</p>
按钮
disabled :禁用，按钮为灰色
<input type="submit" value="提交" disabled /> 提交按钮
<input type="reset" value="重置" /> 重置
<input type="button" name="b" id="b" value="按钮" /> 普通按钮
<input type="image" src="../img/n1.jpg" width="100px" height="100px"/> 图片提交按钮
文件域
<input type="file" name="files" id="files" />
文本域
<textarea name="text" rows="10" cols="50"> 文本内容</textarea>
下拉框
selected:默认选项
<select name="country">
<option value="uk">英国</option>
<option value="china" selected="">中国</option>
<option value="us">美国</option>
</select>
验证性提交
邮箱：<input type="email" name="email" id="email" /><br />
url：<input type="url" name="url" id="url" /><br />
数字：<input type="number" name="number" id="number" min="10" max="100" step="4" /><br />
搜索框
搜索：<input type="search" name="search" id="search" /><br />
滑块
<input type="range" name="voice" id="voice" min="0" max="100" step="2"/>
表单验证
placeholder:提示信息
required：非空判断
pattern:正则表达式
<input type="text" name="username" id="username" placeholder="请输入用户名" required />
<input type="text" name="myemail" id="myemail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"/>
接下来还会有css和js的知识汇总，希望大家在寒假期间也可以保持学习！
如有不对的地方欢迎指出，大家共同进步！