天天看点
返回

HTML5(笔记)

什么是HTML

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

超文本包括：文字，图片，音频，视频，动画等

w3c标准

WOrld Wide Web Consortium(万维网联盟)

成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构

https://www.w3.org

https://www.chinaw3c.org

W3C标准包括

  1. 结构化标准语言（HTML、XML）
  2. 表现标准语言（CSS）
  3. 行为标准（DOM、ECMAScript）

改默认浏览器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m39SxtN2-1608813934210)(C:\Users\王东梁\AppData\Roaming\Typora\typora-user-images\image-20201224164932645.png)]

SEO

汉译为搜索引擎优化。是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。

<!--告诉浏览器，我们要是用什么规范 -->
<!DOCTYPE html>
<html lang="en">
<!--head 网页头部-->
<head>
    <!--    meta描述性标签，用来描述我们网站的一些信息-->
    <!--    meta一般用来做SEO-->
    <meta charset="UTF-8">
    <meta name="keywords" content="跟狂神学Java">
    <meta name="description" content="可以学习java">
    <!--    title网页标题-->
    <title>我的第一个网页</title>
</head>
<body>
Hello，World！
</body>
</html>

网页基本标签

  • 标题标签

  • 段落标签

    一段话

  • 换行标签 一句话

    和段落标签的区别是其比较紧凑

  • 水平线标签
  • 字体样式标签 粗体 粗体 斜体
  • 注释和特殊符号 
    <!--特殊符号-->
空 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格：
大于号&gt;
小于号&lt;
&copy;版权符号

Tab键

自动补全

图像标签

常见的图像格式

JPG

GIF

PNG

BMP

<img src="../resources/image/1.jpg" alt="我的图片" title="悬停文字" width="1366" height="768">
<!--img学习
src:图片地址
    相对地址（推荐使用），绝对地址
    ../返回上一级目录  -->


<!--alt 图片加载失败会显示的内容“”。-->

链接标签

超链接

​ 页面间链接

​ 从一个页面链接到另一个页面

<!-- a标签
href：必填，表示要跳转到那个页面
target：表示窗口在那里打开
_blank 在新标签中打开
_self   在自己的网页中打开
-->

锚链接 

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

功能性链接 

<!--功能性连接
邮件连接：mailto
QQ链接-->
<a href="mailto:[email protected]">点击联系我</a>

QQ推广的实现

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-juQ88lrQ-1608813934212)(C:\Users\王东梁\AppData\Roaming\Typora\typora-user-images\image-20201224183331980.png)]

uin=2764954910

行内元素和块元素

块元素：无论内容有多少，元素自己独占一行

例如：

行内元素：内容撑开宽度，左右都是行内元素的可以排在一行

列表标签

列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息。

列表的分类：

  • 无序列表 

<ul>
    <li>元素1</li>
    <li>元素2</li>
    <li>元素3</li>
  ...
</ul>

  • 有序列表 

<ol>
    <li>元素1</li>
    <li>元素2</li>
    <li>元素3</li>
    ...
</ol>

  • 定义列表 

<dl>
<dt>自定义列表1</dt>
<dd>自定义列表1的元素1</dd>
<dd>自定义列表1的元素2</dd>
<dd>自定义列表1的元素3</dd>

<dt>自定义列表2</dt>
<dd>自定义列表2的元素1</dd>
<dd>自定义列表2的元素2</dd>
<dd>自定义列表2的元素3</dd>
</dl>

表格标签

表格标签就是html通过表格标签在网页中显示一个类似Excel表格的内容，表格的基本结构有以下几个部分：

  • 单元格
  • 行
  • 列
  • 跨行 1-1
  • 跨列 2-1 
<table border="1px">
    <tr>
        <td colspan="2">1-1</td>
        <td>1-2</td>
    </tr>

    <tr>
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>

    <tr>
        <td>3-1</td>
        <td>3-2</td>
    </tr>
</table>

音频和视频

<!--音频和视频
src：资源路径
controls：控制条
autoplay：自动播放-->
<video src="../resources/video/2.mp4" controls autoplay></video>
<audio src="../resources/audio/3.mp3" controls autoplay></audio>

页面结构分析

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yGn0al4s-1608813934214)(C:\Users\王东梁\AppData\Roaming\Typora\typora-user-images\image-20201224191404959.png)]

iframe内联架构

<!--iframe内联框架
src：地址
w-h：宽，高-->
<iframe src="" name="change" frameborder="0" width="1000" height="800">点击跳转学习java</iframe>
<a href="https://www.baidu.com" target="change" >点击跳转</a>//内联框架的嵌入

表单

<!--表单form
action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method:post，get 提交方式
    get方式提交：我们可以在url中看到我们提交的信息，不安全，但高效
    post：比较安全，传输大文件-->
<form action="demo02.html" method="post">
    <!--文本输入框 Input type="text"  submit提交按钮 reset重置按钮  -->
    <p>名字：<input type="text" name="username"/></p>
    <p>密码：<input type="password" name="pwd"/></p>
    <p><input type="submit"> <input type="reset"></p>
</form>

单选框多选框

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MvXdzrKS-1608813934217)(C:\Users\王东梁\AppData\Roaming\Typora\typora-user-images\image-20201224193659751.png)]

<!--单选框按钮 input type="radio" name必须为一致，才能表示为同一组，才能只选择一个
  input标签 类型是radio时，必须有value
	checked 默认选中-->
    <p>
        <input type="radio" value="boy" name="sex"/>男
        <input type="radio" value="girl"name="sex">女
<!-- 多选框标签 input type="checkbox"   -->
        <input type="checkbox" value="sleep" name="hobby"/>睡觉
        <input type="checkbox" value="talk" name="hobby"/>聊天
        <input type="checkbox" value="game" name="hobby" checked/>游戏
        <input type="checkbox" value="eat" name="hobby"/>吃东西
    </p>

按钮

<!--    按钮
    input type="button" 普通按钮
    input type="image"  图片按钮
    input type="submit" 提交按钮
    input type="reset"  重置按钮

-->
<p><input type="button" name="btn1" value="按钮名字"/>
    <input type="image" src="../resources/image/1.png"/>//和submit拥有相同的功能
</p>
<p><input type="submit">
    <input type="reset"></p>

下拉框

<!--下拉框 列表框
    <select>
    name是下拉框的名字
    option value 是下拉框可以选择的值
    selected是默认为那个列
-->
<p>国家
    <select name="列表名称" >
        <option value="china" selected>中国</option>
        <option value="us">美国</option>
        <option value="agt">阿根廷</option>
        <option value="md">缅甸</option>
    </select>
</p>

文本域和文件域

<!--    文本域
cols="30" rows="10" 行，，，列
-->
<p>反馈：<textarea name="textarea"  cols="30" rows="10">文本内容</textarea></p>
<!--    文件域

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

简单验证

<!--  邮箱验证  -->
<p><input type="email" name="email"></p>
<!--    URL验证-->
<p><input type="url" name="url"></p>
<!--    数字验证
max最大数量
min 最小数量
step 每次点击增加或减少的数量-->
<p><input type="number" name="num" max="100" min="1" step="1"></p>

滑块

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

搜索框(删除东西比较容易)

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

表单的应用

只读：value=“admin”（先给一个默认值） readonly

禁用：disabled

隐藏：hidden

label提高作用域 

<p> <label for="mark">点击</label>
    <input type="text" id="mark"/>
</p>

表单初级验证

placeholder=“请输入用户名”

required 非空判断

pattern 正则表达式

总结

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Jn7mEJY6-1608813934218)(C:\Users\王东梁\AppData\Roaming\Typora\typora-user-images\image-20201224204330421.png)]

html5学习 html5
上一篇: 设计模式学习笔记——适配器模式
下一篇: HTML5 APP

继续阅读