HTML(初识)
Hyper Text Markup Language(超文本标记语言)
W3C:World Wide Web Consortium(万维网联盟)
W3C标准
- 结构化标准语言( HTML、XML)
- 表现标准语言(CSS)
- 行为标准(DOM、ECMAScript)
基本标签
<!--注释-->
DOCTYPE:告诉浏览器,我们要使用什么规范
meta:描述性标签,一般用来描述我们网站的一些信息,一般做来做SEO搜索引擎优化
一般<></>对应,也可以只有</>,这个称为自闭合标签
标题标签:
<h1>:一级标签
<h2>: 二级标签 依此类推<h3>、<h4>到<h6>
段落标签
<p></p>
换行标签
<br/>
水平线标签
<hr/>
粗体和斜体标签
<strong> <em>
特殊符号
 ;空格 >;大于号 <小于号
©; 版权符号
图片标签
<img src="图片地址(必填)" alt="图片名字(必填)" title="悬停文字" width=" " height=" ">
超链接标签
<a href="path" target="目标窗口位置">链接文本或图像</a>
<!--a标签
href:必填,表示要跳转到哪个页面
target:
_blank 在新页面打开
_self 在自己的网页中打开
-->
锚链接:
跳转到目的点
<a href="#name"></a>
<!--
需要一个锚标志
name为要跳转目标标记的名字
-->
功能性链接
<!--邮箱链接:mailto-->
<a href="mailto:qqnumber@qq.com"> <!--qqnumber@qq.comw为qq邮箱-->
<!--QQ聊天链接,可以去QQ推广官网获取-->
列表
<!--有序列表orderlist-->
<ol>
<li></li> <!--li标签定义列表项目-->
<li></li>
<li></li>
</ol>
<!--无序列表ul标签-->
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<!--自定义列表 <dl>
dl:标签 <dt></dt>
dt列表名称 <dd></dd>
dd列表内容 <dd></dd>
--> </dl>
表格
<!--表格table
行 tr
列 td
-->
<!--rowspan跨行-->
<!--colspan跨列-->
如实现:
<table border="1px">
<tr>
<td colspan="3">学生成绩</td>
</tr>
<tr>
<td rowspan="2">番薯坚</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
<tr>
<td rowspan="2">木瓜腾</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
</table>
媒体元素
<!--视频和音频
control 控制条
autoplay 自动播放
-->
<video src="资源路径" controls autoplay></video>
<audio src="资源路径" controls autoplay></audio>
页面结构分析
iframe内联框架
在内部嵌入一个网站
<!--
src 引用页面地址
name 框架表识名
-->
<iframe src="path" name ="mainFrame" ></iframe>
表单及表单应用(重点)
(以下内容都在form标签内)
表单
<!--表单form
action:表单提交位置 可以是网站,也可以一个请求处理地址 必填
method:post/get提交方式 必填
get方式提交:我们可以在URL中看到我们提交的信息,不安全,但高效
post:比较安全,传输大文件
-->
<form action="第二个网页.html" method="post">
<!--文本输入框:input type="text" -->
<p> 名字:<input type="text" name="username"></p>
<!--密码框:input type="password" -->
<p> 密码:<input type="password" name="pwd"></p>
<p><input type="submit">
<input type="reset">
</p>
</form>
单选框
<!--单选框标签
input type="radio"
value: 单选框的值 必填
name:表示组 ,相同表示同一组
checked:默认选中
-->
<p>性别:
<input type="radio" value="boy" name="sex" checked>男
<input type="radio" value="girl" name="sex">女
</p>
多选框
<!--多选框
input type="checkbox"
value: 单选框的值 必填
name:表示组 ,
checked:默认选中
-->
<p>爱好:
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="code" name="hobby" checked>敲代码
<input type="checkbox" value="chat" name="hobby">聊天
<input type="checkbox" value="game" name="hobby">游戏
</p>
其他
<!--
input type="button" 普通按钮
input type="image" 图像按钮
input type="submit" 提交按钮
input type="reset" 重置
-->
下拉框
<!--下拉框,列表
selected:默认选中
-->
<p>国家:
<select name="列表名称" >
<option value="china" selected>中国</option>
<option value="india" >印度</option>
<option value="ruishi">瑞士</option>
<option value="us">美国</option>
</select>
</p>
文本域
<!--文本域
cols:显示的列数
rows:显示的行数
-->
<p>反馈
<textarea name="textarea" cols="30" rows="10">文本内容</textarea>
</p>
文件域
<!--文件域 即上传文件
input type="file" name="files"
-->
<p>
<input type="file" name="files"></input>
<input type="button" value="上传" name="upload"></input>
</p>
input中的value的总结
value 属性为 input 元素设定值。
对于不同的输入类型,value 属性的用法也不同:
type="button", "reset", "submit" - 定义按钮上的显示的文本
type="text", "password", "hidden" - 定义输入字段的初始值
type="checkbox", "radio", "image" - 定义与输入相关联的值
注释:<input type="checkbox"> 和 <input type="radio"> 中必须设置 value 属性。
注释:value 属性无法与 <input type="file"> 一同使用。
简单认证
<!--邮箱-->
<p>邮箱:
<input type="email" name="email">
</p>
<!--url-->
<p>URL:
<input type="url" name="url">
</p>
<!--数字-->
<p>商品数量:
<input type="number" name="num" max="100" min="0" step="1">
</p>
滑块
<!--滑块
input type="range"
-->
<p>
<input type="range" name="voice" min="0" max="100" step="10">
</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: 正则表达式