HTML5-快速入门使用

简述

HTML ( Hyper Text Markup Language ): 超文本标记语言

W3C ( World Wide Web Consortium ): 万维网联盟

W3C标准: ​ 结构化标准语言 ( HTML、XML ) ​ 表现语言 ( CSS ) ​ 行为标准 ( DOM、ECMAScript--->JavaScript )

网页基本标签

标题标签

 <h1>一级标签</h1>
 <h2>二级标签</h2>
 <h3>三级标签</h3>
 <h4>四级标签</h4>
 <h5>五级标签</h5>
 <h6>六级标签</h6>

段落标签

 <p>两只老虎 两只老虎</p>
 <p>跑得快 跑得快</p>
 <p>一只没有眼睛</p>
 <p>一只没有尾巴</p>
 <p>真奇怪 真奇怪</p>

换行标签

 两只老虎 两只老虎<br/>
 跑得快 跑得快<br/>
 一只没有眼睛<br/>
 一只没有尾巴<br/>
 真奇怪 真奇怪<br/>

水平线标签

 <hr/>

字体样式标签

 <!-- 粗体: -->
     <strong>i love you</strong>
 <!-- 斜体: -->
     <em>i love you</em>

特殊符号

 <!-- 特殊符号记忆方式 
     &开头     ;结尾
     百度      -->
 ​
 <!-- 空格: -->
     空格&nbsp;&nbsp;&nbsp;&nbsp;空格
 <!-- 大于 -->
     &gt;大于
 <!-- 小于 -->
     &lt;小于
 <!--  -->
     &copy;版权符号

图像标签

 <!-- img 学习
 src: 图片地址
         相对地址,绝对地址
         ../ --上一级目录
 alt: 图片加载失败时,返回的文字描述
 title: 鼠标悬停在图片上是显示的文字
 width: 高
 height: 宽
         -->
 <img src="" alt="" title="" width="" height="">

链接标签

超文本链接

 <!-- a 学习
     超文本链接
 href: 必填,表示要跳转到哪儿个页面
 target: 表示窗口在哪儿打开
         _blank: 在新标签打开
         _self: 在当前标签打开
 -->
 <a href="" target="">连接文本或图像</a>

锚链接

<!-- 使用id作为标记 -->
<a id="top">顶部</a>




<!-- a 学习
	锚链接
1.需要一个锚标记
2.跳转到标记
-->
<a href="#top"></a>

功能性链接

<!-- a 学习
	功能性链接
邮件链接: mailto
QQ链接---QQ推广
-->
<a href="mailto:邮箱地址"></a>

块元素和行内元素

块元素
	无论内容多少,该元素独占一行
	(p、h1-h6...)
行内元素
	内容撑开宽度,左右都是行内元素的可以再排在一行
	(a、strong、em...)

列表

列表的分类:

• 无序列表

• 有序列表

• 定义列表

<!-- 有序列表 
应用范围: 试卷,问答...
-->
<ol>
    <li>开发</li>
    <li>运维</li>
    <li>测试</li>
</ol>
<hr/>
<!-- 无序列表 
应用范围: 导航,侧边栏
-->
<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 
行 tr rows
列 td cols
border: 边框宽度,单位px
-->
<table border="1px">
    <tr>
        <!-- colspan 跨列 -->
        <td colspan="">1-1</td>
        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</td>
    </tr>
    <tr>
        <!-- rowspan 跨行 -->
        <td rowspan="">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

<!-- 媒体元素
src: 图片地址
		相对地址,绝对地址
		../	--上一级目录
controls: 控制选项
autoplay: 自动播放
-->
<video src="" controls autoplay></video>

<audeo src="" controls autoplay></audeo>

页面结构分析

元素名	描述
header*	标题头部区域的内容（用于页面或页面种的一块区域）
footer*	标记脚步区域的内容（用于整个页面或页面的一块区域）
section	Web页面种的一块独立区域
article	独立的文章内容
aside	相关内容或应用（常用于侧边栏）
nav*	导航类辅助内容

iframe内联框架

<!-- 内联框架
src: 页面地址
name: 框架识别名
frameborder: 规定是否显示 iframe 周围的边框 
			value 为 1 则有
			value 为 0 则无
height: 高
width: 宽
可以结合功能性标签使用
-->
<iframe src="" frameborder="" width="" height=""></iframe>

表单语法

<!-- 
表单 form
	action: 表示向何处发送表单数据,可以是网站,也可以是请求处理地址
	method: 规定如何发送表单数据---get、post...
		get: 我们可以在url种看到我们提交的信息,不安全,但高效
		post: 比较安全,但也能再 Form Data 内获取,可在后台加密
input: 文本输入框,可以自闭和 <input type="" name=""/>
	type: 文本内容
submit: 提交
reset: 重置
-->
<form action="url" method="方法">
    <!-- 文本输入框: 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>

表单元素格式

属性	说明
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 时, 指定按钮是否被选中

文本框

<!-- 
文本框 ( text )
value: 为文本框添加初始值
maxlength: 可以限制文本框可输入的最大字符数
-->
用户名:<input type="text" value="用户名" maxlength="8"/>

单选框

<!-- 
单选框 ( radio )
value: 指定选项值
name: 组别属性,同一组的选项只能选择一个值
默认不选中, checked 设置默认值
-->
<input type="radio" value="body" name="sex" checked/>男
<input type="radio" value="girl" name="sex"/>女

多选框

<!--
多选框 ( checkbox )
value: 指定选项值
name: 组别属性,同一组的选项可选择多个值
默认不选中, checked 设置默认值
-->
<input type="checkbox" value="sllep" name="hobby"/>睡觉
<input type="checkbox" value="chat" name="hobby"/>聊天
<input type="checkbox" value="game" name="hobby"/>游戏
<input type="checkbox" value="code" name="hobby" checked/>敲代码

按钮

<!--
按钮 ( button )
name: 组别属性
value: 按钮名称
-->
<!-- 文本类型 -->
<input type="button" name="button1" value="点击变化"/>
<!-- 图片类型自带提交 ( submit ) 功能-->
<input type="image" src="url"/>
<!-- 默认显示为: 提交 -->
<input type="submit" value="确认"/>
<!-- 默认显示为: 重置 -->
<input type="reset" value="清空"/>

下拉框

<!--
下拉框, 列表框
不设置时默认选中第一个值, selected 设置默认值
-->
<p>国家:
<select name="列表名称">
    <option value="选项值">中国</option>
    <option value="选项值">日本</option>
    <option value="选项值">美国</option>
    <option value="选项值" selected>俄罗斯</option>
</select>
</p>

文本域

<!--
cols: 列
rows: 行
-->
<p>反馈:
    <textarea name="textarea" cols="10" rows="10"/>
    文本内容
    </textarea>
</p>

文件域

<!--
-->
<p>
    <input type="file" name="files"/>
    <input type="button" value="上传" name="uplood"/>
</p>

验证

邮件验证

<!-- 邮件验证 -->
<p>邮箱:
    <input type="email" name="mail"/>
</p>

URL验证

<!-- URL验证 -->
<p>URL:
    <input type="url" name="url"/>
</p>

数字

<!-- 数字验证 
max: 最大值
min: 最小值
step: 步长
-->
<p>数字:
    <input type="number" name="numberr" max="100" min="10" step="10"/>
</p>

滑块

<!-- 滑块 -->
<p>音量:
    <input type="range" name="voice" min="0" max="100" step="2"/>
</p>

搜索框

<!-- 搜索框 -->
<p>
    <input type="search" name="search"/>
</p>

表单的应用

隐藏域、只读、禁用

隐藏域
hidden
只读
readonly
禁用
disabled

<!--增强鼠标可用性
for: 指向元素
-->
<label for="mark">你点我是好事
    <input type="text" id="mark">
</label>

表单初级验证

提示信息 ( 输入框内 )
placeholder="提示文本"
非空判断
required
正则表达式
pattern="正则表达式"