什么是HTML
Hyper Text Markup Language
超文本标记语言:超文本包括 图片,文字,音频视频,动画等等
w3c标准
万维网联盟 World Wide Web Consortium
http://www。w3.org org结尾代表开源
w3c 标准包括
结构化标准语言 HTML XML
表现 css
行为 DOM Javascript
IDE 工具
早期 DreamWeaver
现在 WebStorm
其中IDEA集成了 Webstorm
网页的基本信息
-
注释 ctrl+/
-
<! DOCTYPE html> 告诉网页使用什么规范
-
head代表头部
title代表标题
meta标签,描述性标签,一般用来做seo
格式 设置字符集
<meta name = "keywords" content="设置关键字">单闭合标签 <meta name = "discription" content="设置描述信息">
基本标签
快捷键 标签字母加tab键
类型开放标签 单闭合标签 自闭和标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--标题标签-->
<h1>一级</h1>
<h2>二级</h2>
<h3>三级</h3>
<h4>四级</h4>
<h5>五级</h5>
<h6>六级</h6>
<!--段落标签p标签-->
<p>测试</p>
<p>测试</p>
<!--换行标签-->
<!--brh和p标签区别,br间距较小,自闭和标签-->
测试 <br/>
测试 <br/>
<!--水平线标签hr-->
<hr/>
<!--字体样式-->
<strong>粗体</strong>
<em>斜体</em>
<br/>
<!--特殊符号-->
空 格
<br>
<h2>特殊符号都是</h2>
&开头 ;结尾
<br>
</body>
</html>
连接标签
<a href="top"></a>
<h2>图像标签包括 图像地址path 图像显示文字 alt 图像鼠标悬停文字title width 宽高height</h2>
<img src="../resource/img/2.jpg" alt="2" title="绿色图片" width="556" height="300">
<!--a标签学习 href必填,表示跳转到哪个页面-->
<a href="基本标签.html "target="_blank" >超链接标签</a>
<a href="http://baidu.com">超链接标签</a>
<!--图片嵌套到超链接-->
<a href="http://WWW.taobao.com" target="_blank"> target设置为 blank在新标签打开窗口
<img src="../resource/img/3.jpg" alt="">
</a>
<!--锚链接-->
<a href="#top">回到顶部</a>
<a href="mailto:1769935880@qq.com">联系我</a>
块元素 行内元素
元素独占一行 无论内容多少
行内元素 ,一行以内不会换行
列表
<!--有序列表-->
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
<!--无序列表-->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<!-- 自定义列表-->
<dl>
<dt>姓名</dt>
<dd>wpx</dd>
<dd>ljt</dd>
<dd>wjh</dd>
<dt>年龄</dt>
<dd>12</dd>
<dd>12</dd>
<dd>12</dd>
</dl>
表格
<table border="1px">
<tr colspan="4">跨列
<td rowspan="2">1-1</td>跨行
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
</tr>
<tr>
<td>2-1</td>
<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
音频 audio
controls开启控制台 autoplay 自动播放
页面结构分析
元素名
描述
header
标题头部区域的内容(用于页面或页面中的一块区域)
footer
标记脚部区域的内容(用于整个页面或页面的一块区域)
section
Web页面中的一块独立区域,主体部分
article
独立的文章内容
aside
相关内容或应用(常用于侧边栏)
nav
导航类辅助内容
iframe内敛框架
一个网站里面嵌套另外一个网站
使用方法找到视频的嵌入代码,一般网站会给比如b站
src 写页面地址 name自定义标识名 可以通过a标签跳转到这个标识名代表的网页,是在iframe框架中打开,格式为iframe定义的格式,也可以当成一个容器,默认自动加载。一般用于评论框等自己主动加载的地方
<iframe src="" name="baidu" frameborder="0" height="1080" width="1920"></iframe>
<a href="http://www.baidu.com" target="baidu">点击跳转</a>
表单post和get提交
form表单
get不安全不能传输大文件
post比较安全,可以传输大文件
可以注册和登录等
<form action="列表.html" method="post">
<p>名字:<input type="text" name="username"></p>
<p>密码:<input type="password" name="pwd"></p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
单选框标签
TYPE 属性radio 必须有value 否则不显示,然后必须设置到一个组内,name属性需要一样,否则会出现可以选择多个的情况
<form action="列表.html" method="post">
<p>名字:<input type="text" name="username"></p>
<p>密码:<input type="password" name="pwd"></p>
<p>
性别:
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/>女
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
多选框标签
input type checkbox
参考单选框,能多选
下拉框select
文本域textarea
<textarea name="" id="" cols="30" rows="10"></textarea>
<input type="file" name="files">
表单应用
readonly 只读
disable 禁用
hidden 隐藏域
placehoder 提示信息,用在输入框中
验证方式
常用方式
placeholder提示信息
required非空判断
pattern 正则表达式,去脚本之家可以搜到