html学习
1 HTML基础
- HTML网页的基本结构
P1：我的第一个网页
<!DOCTYPE html>
<!--DOCTYPE：告诉浏览器，我们要使用什么规范-->
<!--所有的代码内容都在<html></html>里边进行编辑-->
<html lang="en">
<!-- head代表标签头部-->
<head>
<!-- meta 描述性标签，它来描述我们网站的一些信息-->
<!--meta 一般用来做SEO-->
<meta charset="UTF-8">
<meta name="keywords" content="西部开源"> <!--keywords：网站通过搜索关键字可以搜索到本页面-->
<meta name="subscription" content="来这里可以学习java"> <!--description：对网站的描述内容，在界面里不会显示出来-->
<title>我的第一个网页</title> <!--在页面里边不显示，而在页面顶部显示-->
</head>
<a id="C1"></a>
<body>
<p>hello world</p>
</body>
</html>
1.1网页的基本标签
-
标题标签
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> -
段落标签
<p>这是段落标签</p> <p>两只老虎</p> <p>跑得快，跑得快</p> <p>一只没有耳朵，一只没有嘴巴</p> <p>真奇怪，真奇怪</p> -
换行标签
两只老虎两只老虎<br/> 跑得快，跑得快<br/> 一只没有眼睛，一只没有耳朵 <br/> 真奇怪，真奇怪 <br/> -
水平分割线标签
<p>北京欢迎你</p> <hr/> <p>有梦想谁都了不起</p> -
字体样式标签
粗体：<strong>i love you</strong> 斜体：<em>i love you</em> -
注释和特殊符号
<!--这是一个注释--> <!--特殊符号--> 空 格 空 格 <br/> >大于号 <br/> <小于号 <br/> ©版权所有符号 </p> <!-- 特殊符号记忆方式： & ; -->
1.2图像标签
- img标签
<img src="../resources/image/1.jpg" alt="健身房界面" border="10" title="悬停文字" width="300" height="200">
<!--
src代表图像地址，alt代表图像代替的文字(当图像显示不出来时，会显示替代的文字)
title代表鼠标悬浮在图片上时，会出现提示的文字，类似于图片的解释说明
border代表图片的边框，默认为0(即不显示边框)
width和height代表图片的宽度和高度
-->
-
绝对地址和相对地址
<!-- img学习： src： 绝对地址：即目标根目录，若为网络图片，直接输入对应网址即可 相对地址：../ 代表上一级目录 alt:图片名字（必填） -->
1.3超链接标签
-
a标签
<!-- a标签： href（必填）：表示要跳转到哪个页面，填写链接地址 target：表示窗口在哪里打开（本页面，还是从新页面打开？） _blank:表示在新的界面打开该链接 _self:表示在自己的网页打开 --> <!--1.文本超链接--> <a href="https://www.baidu.com" target="_blank">点击我打开百度</a><br/> <!--2.图片超链接--> <p> <a href="1.我的第一个网页.html" target="_top"> <img src="../resources/image/1.jpg" alt="健身房界面" border="0" title="悬停文字" width="300" height="200"> </a><br/> </p> <!--3.锚链接： 1需要一个锚标记 属性id="a"或者属性name="a" 2跳转到标记 href="#a" # --> <a id="top">顶部</a><br/> <a href="#top">回到顶部</a><br/> <!--4.功能性链接 邮件链接 mailto: --> <a href="mailto:282655009@qq.com">点击联系我</a><br/> <!--qq推广链接：官方内置代码--> <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=282655009&site=qq&menu=yes"> <img border="0" src="http://wpa.qq.com/pa?p=2:282655009:51" alt="我是一名程序员" title="我是一名程序员"/> </a>
1.4行内元素和块元素
<!--
块级元素（block element）在浏览器中占据整行，并排斥其它元素与其位于同一行。也就是说，块级元素的宽度是 100%。常见的块级元素有
div,p,h1-h6,br,ol(有序列表),ul(无序列表)
-->：
<!--
行内元素又称内联元素（inline block）。在浏览器中可以与其它行内元素共占一行，只有当多个元素的总宽度大于浏览器的宽度时，才会换行显示。常见的行内元素有：a，span，strong，b，em，i，img，input，select等
-->
<!--4. 总结-->
<p>
1.块级元素的宽度是 100%，在浏览器中默认独占一行。
2.行内元素在浏览器中默认与其它行内元素共占一行。只有当多个行内元素的总宽度大于浏览器的宽度时，才会换行显示。
3.块级元素内部可以嵌套块级元素或行内元素。
4.建议行内元素里面只嵌套行内元素。
</p>
<!--提示：块级元素和行内元素的概念极其重要，同时也是学习 CSS 的基础知识之一，请读者不要忽略。-->
2.列表，表格与媒体元素
2.1列表
无序列表和定义列表在网页制作中应用非常广泛
什么是列表：
列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以
便浏览者能更快捷地获得相应的信息。
-
有序列表
<!--ol 有序列表 ordered list 应用范围：试卷，问答。。 --> <!--ol 声明有序列表--> <ol> <li>java</li> <li>Python</li> <li>C++</li> <li>编程</li> </ol>
如图所示：
有序列表默认以数字序号显示
有序列表与无序列表一样，也可以嵌套列表、可以包含图片、文本、其他标签等
有序列表的特性
-
有顺序，每个< li>标签独占一行（块元素）
-
默认< li>标签项前面有顺序标记
-
一般用于排序类型的列表，如试卷、问卷选项等
-
无序列表
<!--ul无序列表 unordered list 导航，侧边栏。。。 --> <!--ul 声明无序列表--> <ul> <!--li 声明列表项--> <li>java</li> <li>python</li> <li>前端</li> <li>运维 </li> </ul>
如图所示：
无序列表的特性
-
没有顺序，每个< li>标签独占一行（块元素）
-
默认< li>标签项前面有个实心小圆点
-
一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等
-
定义列表
<!--自定义列表 definition list --> <!--dl 声明定义列表--> <dl> <!--dt 声明列表项--> <dt>学科</dt> <!--dd 定义列表项内容--> <dd>java</dd> <dd>python</dd> <dd>Linux</dd> <dd>C</dd> <dt>位置</dt> <dd>西安</dd> <dd>重庆</dd> <dd>新疆</dd> </dl>
如图所示：
定义列表也可以嵌套列表、包含图片、文本、其他标签等
以后的网页制作中经常会用到定义列表，特别是图文混排的情况
定义列表的特性
-
没有顺序，每个< dt>标签、< dd>标签独占一行（块元素）
-
默认没有标记
-
一般用于一个标题下有一个或多个列表项的情况
小结：
列表之间可以互相嵌套，进行页面的布局
2.2表格
| 学生姓名 | 数学 | 英语 | 语文 | 生物 | 化学 |
|---|---|---|---|---|---|
| 席梦博 | 100 | 100 | 100 | 100 | 100 |
为什么使用表格
-
简单通用
-
结构稳定
基本结构
-
单元格
-
行
-
列
表格的基本用法：
<!--table表格标签-->
<table border="1px">
<!--tr 行标签-->
<tr>
<!--td 单元格标签-->
<td>第1个单元格的内容</td> <!--有几个td代表有几列-->
<td>第2个单元格的内容</td>
</tr>
<tr>
<td>第1个单元格的内容</td>
<td>第2个单元格的内容</td>
……
</tr>
</table>
如图所示：
表格的跨列：
<!--表格table标签
行 tr table row
列 td
跨行 rowspan
跨列 colspan
-->
<table border="2px" bgcolor="#faebd7">
<tr><!--colspan 所跨的列数-->
<td colspan="2" align="center">成绩</td>
</tr>
<tr>
<td>数学</td>
<td>98</td>
</tr>
<tr>
<td>英语</td>
<td>95</td>
</tr>
</table>
如图所示：
表格的跨行：
<table border="2px" bgcolor="#faebd7">
<tr><!--rowspan 所跨的行数-->
<td rowspan="2">席梦博</td>
<td>数学</td>
<td>95</td>
</tr>
<tr>
<td>英语</td>
<td>95</td>
</tr>
</table>
如图所示：
表格的综合应用：
<!--表格table标签
行 tr table row
列 td
跨行 rowspan
跨列 colspan
-->
<table border="1px" bgcolor="#faebd7" width="200px">
<tr>
<th colspan="3" align="center">学习成绩</th>
</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>
如图所示：
2.3音频，视频
如何实现在网页上播放视频和音频？
-
第三方自主开发的播放器
-
Flash
-
HTML5媒体元素
在HTML5问世之前，要在网页上展示视频、音频、动画等，除了使用第三方自主开发的播放器外，使用
最多的工具应该算是Flash了，但是它需要在浏览器上安装各种插件才能使用，有时候速度也会非常慢。
HTML5的出现改变了这一状况，在网页中使用HTML5来播放音频、视频再也不需要安装插件，只需要一个支持HTML5的浏览器就可以了
视频标签
src：指定要播放的视频文件的路径
controls：提供播放、暂停和音量的控件
autoplay：自动播放属性
loop：视频的循环播放
<video src="视频路径" controls autoplay></video>
音频标签
src：指定要播放的音频文件的路径
controls：提供播放、暂停和音量的控件
<audio src="音频路径" controls autoplay></video>
2.4页面结构分析
<body>
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主体</h2>
</section>
<footer>
<h2>网页脚部</h2>
</footer>
</body>
2.5内联框架
<!--<iframe内联框架：在一个网站中嵌入另一个网站
frame border 显示页面的边框
src：地址
w-h：宽度和高度
name：框架标识名
-->
<!--1.iframe页面内联-->
<iframe src="https://www.cn.bing.com/" frameborder="3px" width="1000px" height="800px" scrolling="auto"></iframe>
<iframe src="1.我的第一个网页.html" name="hello" frameborder="2px" width="1000px" height="800px"></iframe>
<!--2.iframe属性（实现页面间的相互跳转）
在被打开的框架上加name属性-->
<iframe name="mainFrame" scrolling="yes">
</iframe>
<!--在超链接上设置target目标窗口属性为希望显示的框架窗口名 -->
<a href="https://www.cn.bing.com/" target="mainFrame">加载</a>
2.6小结：
3.表单
表单的应用：
- 登陆
- 注册
3.1表单的语法
<!--表单form
action：表单提交的位置，可以是网站，也可以是一个请求处理地址
method：表单的提交方式 get 和 post
get方式提交：我们可以在url中看到我们提交的相关信息，但不安全，但是高效
post方式提交：比较安全，不会显示提交的信息，但可以传输大文件
-->
<form method="post" action="result.html">
<p>名字：<input name="name" type="text" ></p>
<p>密码：<input name="pass" type="password" > </p>
<p>
<input type="submit" name="Button" value="提交"/>
<input type="reset" name="Reset" value="重填"/>
</p>
</form>
3.2 13个表单元素
-
文本框
<!--type="text" name：文本框名称(必填) value：文本框初始值 size：文本框长度 maxlength：文本框可输入最多字符 --> <input type="text" name="userName" value="用户名" size="30" maxlength="20" /> -
密码框
向密码框中输入字符时，显示的效果，密码字符以黑色实心的圆点来显示。
<!--type="password" name：密码框名称(必填) size：密码框长度 --> <input type="password" name="pwd" size="20"/> -
单选按钮
同一组单选按钮，name属性值必须相同，才能在选中单选按钮时达到互斥
<!--type="radio" name：单选框名称(必填)，表示一个组，一组的名称需要相同 checked：单选按钮选中状态 value：单选框的值 --> <input name="gen" type="radio" value="男" checked />男 <input name="gen" type="radio" value="女" />女 -
复选框
同一组复选框，根据需要可设置name属性值相同
<!--type="checkbox" name：复选框名称(必填)，一组的名称需要相同 checked：复选按钮默认选中状态 value：复选框的值 --> <input type="checkbox" name="interest" value="sports"/>运动 <input type="checkbox" name="interest" value="talk" checked />聊天 <input type="checkbox" name="interest" value="play"/>玩游戏 -
下拉列表框
一个中至少包含一下
希望在页面加载时有默认选中的选中项，则必须使用selected属性，如果没有默认选中项则第一个选项
默认被选中；演示时改变size的值和selected默认值。
<!--select:下拉列表框--> <!--option：选项--> <select name="列表名称" size="行数"> <option value="选项的值" selected="selected"></option > <option value="选项的值"></option > </select> -
按钮
<!--重置按钮--> <input type="reset" name="butReset" value="reset按钮"> <!--提交按钮--> <input type="submit" name="butSubmit" value="submit按钮"> <!--普通按钮--> <input type="button" name="butButton" value="button按钮"/> <!--图片按钮--> <input type="image" src="images/login.gif" /> -
多行文本
改变cols和rows的值，让学员看到由于这两个值的改变，文本框内容显示的改变。强调多行文本域的内容是在标签之间。
textarea：多行文本域 cols：显示的列数 rows：显示的行数 <textarea name="showText" cols="x" rows="y">文本内容 </textarea> -
文件域
在表单中使用文件域时，必须设置表单的“enctype”编码属性为“multipart/form-data”，表示将表单数据分为多部分提交。未来文件上传和下载会详细讲解，现在了解即可！
enctype：表单编码属性 <form action="" method="post" enctype="multipart/form-data"> <p> <!--type="file" 文件域--> <input type="file" name="files" /> <input type="submit" name="upload" value="上传" /> </p> </form> -
邮箱
会自动验证Email地址格式是否正确
邮箱:<input type="email" name="email"/> -
网址
会自动验证URL地址格式是否正确
请输入你的网址:<input type="url" name="userUrl"/> -
数字
min：最小值 max：最大值 step：步长 请输入数字:<input type="number" name="num" min="0" max="100" step="10"/> -
滑块
type值为range即为滑块。
请输入数字:<input type="range" name="range1" min="0" max="10" step="2"/> -
搜索框
type值为search即为搜索框
请输入搜索的关键词:<input type="search" name="sousuo"/>
3.3表单的高级应用
在某些注册页面或本图片中订单信息页面，必须同意一些条款按钮才能使用等等
- 隐藏域
在浏览器中看不到隐藏域，但是在提交表单时可以看到隐藏域的内容被提交至服务器
<input type="hidden" value="666" name="userid">
- 只读，禁用
讲解只读和禁用的语法，强调不能单写readonly或disabled，必须写readonly ＝”readonly”和disabled=“disabled”，介绍只读和禁用的使用场合
<input name="name" type="text" value="张三" readonly>
<input type="submit" disabled value="保存" >
-
表单元素的标注
增强鼠标的可用性
自动将焦点转移到与该标注相关的表单元素上
<!--它的for属性对应的id与表单元素id一致--> <label for="id">标注的文本</label> <input type="radio" name="gender" id="male"/>
3.4表单的初级验证
思考：为什么要进行表单验证？
如果用户填写的表单内容不进行验证就发给服务器，那么服务器发现填写的不合法，或是没有填写，就会返回响应给用户，用户重新填写再提交，如此多次持续直到用户输入正确。它们之间的通信是通过网络进行的，如果网络很差，那么注册一个账号就得花很长时间，对用户来说是非常烦的，对服务器来说也增加了其工作压力。
要是有恶意的用户向服务器发送病毒或是有害于服务器安全的程序就更危险了。
表单验证的好处：
(1)减轻服务器的压力。
(2)保证数据的可行性和安全性。
在客户端就对表单进行验证是非常有必要的。
表单初级验证的方法
常用的且比较重要的三个属性如下
- placeholder
提示语默认显示，当文本框中输入内容时提示语消失
<input type="search" name="sousuo" placeholder="请输入要搜索的关键字"/>
- required
规定文本框填写内容不能为空，否则不允许用户提交表单
<input type="text" name="username" required/>
- pattren
用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单
（javaScript课程会详解）
<input type="text" name="tel" required pattern="^1[358]\d{9}" />
3.6小结：
扫一扫
2254
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
