HTML5+CSS3+JavaScript基础学习

HTML.5

/*****************************************

学习网站

飞冰：https://ice.work

源码之家：https://www.mycodes.net/

菜鸟教程：https://www.runoob.com/

W3school:https://www.w3school.com.cn/

廖雪峰的官方网站：https://www.liaoxuefeng.com/wiki/1022910821149312

jQuery学习网站：https://jquery.cuishifeng.cn/

前端要避免重复造轮子

*******************************************/

初识HTML

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

HTML5的优势

➢世界知名浏览器厂商对HTML .5的支持 ➢微软 ➢Google ➢苹果 ➢Opera ➢Mozilla ➢市场的需求 ➢跨平台

W3 C标准

➢W3C ➢World Wide Web Consortium (万维网联盟) ➢成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构 ➢http://www.w3.org/ ➢http://www.chinaw3c.org/

➢W3C标准包括 ➢结构化标准语言(HTML、XML) ➢表现标准语言(CSS) ➢行为标准(DOM、ECMAScript )

创建项目-->删除src文件，新建directory(目录)-->新建html文件-->设置里搜索web,更改打开浏览器的路径

HTML注释

快捷键：CTRL+/

<!-- 注释,DOCTYPE 告诉浏览器默认使用什么规范 -->
<!DOCTYPE html>
<html lang="en">
<!-- head标签代表网页头部 -->
<head>
    <meta charset="UTF-8">
    <!--meta描述性标签,它用来描述我们网站的一-些信息-->
    <!--meta - -般用来做SE0-->
    <meta charset: ="UTF-8">
    <meta name="keywords" content="骑牛西出函谷关">
    <meta name="descripti on" content="这里有我的世界">

    <!-- title网页标题-->
   <title>骑牛西出函谷关</title>
</head>
<!--body标签代表网页主体-->
<body>
    hello word!
</body>
</html>

网页基本标签

➢标题标签 <h1></h1> ➢段落标签 <p></p>

➢换行标签 ➢水平线标签 <hr/> ➢字体样式标签<strong></strong> <em></em> ➢注释和特殊符号 &--;

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<p>

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

<!--段落标签-->
<p>梦后楼台高锁，酒醒帘幕低垂。</p>
<p>去年春恨却来时，落花人独立，微雨燕双飞。</p>
<p>记得小苹初见，两重心字罗衣。</p>
<p>琵琶弦上说相思，当时明月在，曾照彩云归。</p>

<!--水平线标签-->
<hr/>
<!--换行标签-->
梦后楼台高锁，酒醒帘幕低垂。<br/>
去年春恨却来时，落花人独立，微雨燕双飞。<br/>
记得小苹初见，两重心字罗衣。<br/>

琵琶弦上说相思，当时明月在，曾照彩云归。<br/>

<!--粗体，斜体-->
<h1>字体样式标签</h1>
粗体： <strong> 这是粗体</strong>
斜体：<em>这是斜体</em>

<!--特殊-->
空格&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;空格
<br/>
&gt;
<br/>
&lt;
<br/>
&copy;骑牛西出函谷关
<!--
&   ;
-->


</body>
</html>

图像标签

src :图片地址 (必填) 相对地址(推荐使用)，绝对地址 ../ --.上一级目录 alt :图片名字(必填）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>

<!--img学习
src :图片地址 (必填)
相对地址(推荐使用)，绝对地址
../ --.上一级目录
alt :图片名字(必填)
-->

<body>
<img src="../resources/image/桌面.jpg" alt="桌面图片"title="这是鼠标悬浮的提示文字" width="501" height="505">
</body>
</html>

链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>

<!--a标签
    href :必填,表示要跳转到那个页面
    target :表示窗口在哪里打开
    _blank 在新标签中打开
    -->

<body>
<!--
锚链接，设置一个锚标记，
用name定义名字，然后用#调用
-->
<a name="顶部">顶部</a>
<a href="1.第一个.html"target="_blank">这里跳转到我的第一个网页</a>
<a href="https://www.baidu.com"target="_self">这里跳转到百度</a>
<br/>
<a href="基本标签.html">
    <img src="../resources/image/桌面.jpg" alt="桌面图片"title="这是鼠标悬浮的提示文字" width="501" height="505">
</a>
<p>------------------------------------</p>
<!--
    功能性链接，
    邮件链接 mailto:
-->
<a href="mailto:1845494004@qq.com">点击联系小帅哥</a>
<a href="#顶部">回到顶部</a>
<a href="基本标签.html#网页下端">这里跳转到另一个网页的锚链接处</a>
</body>
</html>

行内元素和块元素

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

列表

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
</head>
<body>

<!--
    有序列表.
    应用范围:试卷
    问答
-->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/c++</li>
</ol>

<hr/>

<!--
    无序列表
    应用范围:导航，
    侧边栏
-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <1i>运维</li>
    <li>前端</li>
    <li>C/c++</li>
</ul>

<!--
    自定义列表
    dl:标签
    dt :列表名称
    dd :列表内容
    公司网站底离
-->
<dl >
    <dt>学科 </dt>
    <dd>Java</dd>
    <dd>Python</dd>
    <dd>Li nux</dd>
    <dd>C</dd>
    <dt>位置 </dt>
    <dd>西安</dd>
    <dd>重庆</dd>
    <dd>新疆</dd>
</dl>


</body>
</html>

表格

■为什么使用表格 ◆简单通用 ◆结构稳定 ■基本结构 ◆单元格 ◆行 ◆列 ◆跨行 ◆跨列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签学习</title>
</head>
<body>

<!--
表格table
行 tr
列 td
-->

<table border="1px">
    <tr>
        <!-- colspan 跨列    -->
     <td colspan="3">学生成绩</td>
    </tr>
    <!-- rowspan 跨行    -->
    <tr>
        <td rowspan="2">流尘</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>99</td>
    </tr>
    </tr>
    <!-- rowspan 跨行    -->
    <tr>
        <td rowspan="2">年少</td>
        <td>生物</td>
        <td>100</td>
    </tr>
    <tr>
        <td>地理</td>
        <td>96</td>
    </tr>
</table>
</body>
</html>

视频和音频

■视频元素 ◆video ■音频元素 ◆audio

<!DOCTYPE html>
I<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素学习</title>
</head>
<body>
<!--音频和视频
src :资源路径
controls :控制条
autoplay :自动播放
-->
<video src="../resources/video/片头.mp4" controls autoplay></video>
<audio src="../resources/audio/萤火虫和你.mp3 controls autoplay></audio>
</body>
</html>

页面结构分析

iframe内联框架

可以通过直接引用页面地址打开，内联框架可以设置大小，也可以通过定义框架标识名，调用

表单标签 form

■表单的应用 ◆隐藏域 hidden ◆只读 readonly ◆·禁用 disabled

■表单初级验证 常用方式 ◆placeholder 提示信息 ◆required 非空判断 ◆pattern 正则表达式

常用正则表达式 https://www.jb51.net/tools/regex.htm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单学习</title>
</head>
<body>

<!--表单form
    action :表单提交的位置，以是网站，也可以是一个请求处理地址
    method : post , get提交方式
    get方式提交:我们可以在url中看到我们提交的信息，不安全，高效﹐
    post :比较安全，传输大文件.
-->
<form action="1.第一个.html" method="get">


        <!--文本输入框: input type="text"
        value="123456"默认初始值
        maxlength="g"最长能写几个字符
        size="30"
        文本框的长度
-->
<p>名字:<input type="text" name="username" ></p>
<!--瘀码框: input type="password"-->
<p>密码:<input type="password" name="pwd"></p>


    <!--单选框标签
    input type="radio"
    value :单选框的值
    name :表示组
    -->
<p>性别:
<input type="radio" value="boy" name="sex" checked/>男
<input type="radio" value="girl" name="sex"/>女
</p>

    <!--多选框
    input type="checkbox"
    -->
    <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"重置
    -->
    <p>按钮:
    <input type="button" name="btni" value="点击变长">
    <!--<input type="image" src="../resources/image/1.jpg">-->
    </p>


    <!--下拉框，列表框
    -->
    <p>国家:
        <select name=