HTML学习
初识HTML
什么是HTML
Hyper Text Markup Language 超文本标记语言
HTML5优势
- 市场需求
- 天然跨平台(各浏览器厂商对其支持)
W3C标准
World Wide Web Consortisum 万维网联盟
consortium
美 [kənˈsɔrʃəm]
英 [kənˈsɔː(r)tiəm]
n.银团
网络财团；联盟；国际财团
W3C标准包括
- 结构化标准语言(HTML,XML)
- 表现标准语言(CSS)
- 行为标准(DOM,ECMAScript)
HTML基本结构
<html>
<head>
<title>Title</title>
...网页头部
</head>
<body>
...主体部分
</body>
</html>
标签
- 开放标签
- 闭合标签</test>
- 自闭合标签
网页基本信息
DOCTYPE标签
告诉浏览器我们要使用什么规范
head标签
代表网页头部
meta描述性标签
用来描述网站的一些信息,一般用来做SEO
SEO是Search Engine Optimization的缩写，用英文描述是to use some technics to make your website in the top places in Search Engine when somebody is using Search Engine to find something，翻译成中文就是“搜索引擎优化”，一般可简称为搜索优化。与之相关的搜索知识还有Search Engine Positioning（搜索引擎定位）、Search Engine Ranking（搜索引擎排名）。 SEO的主要工作是通过了解各类搜索引擎如何抓取互联网页面、如何进行索引以及如何确定其对某一特定关键词的搜索结果排名等技术，来对网页进行相关的优化，使其提高搜索引擎排名，从而提高网站访问量，最终提升网站的销售能力或宣传能力的技术。
搜索引擎优化是这么一种技术，即是遵循搜索引擎科学而全面的理论机制，对网站结构、网页文字语言和站点间的互动外交策略等进行合理规划部署来发掘网站的最大潜力而使其在搜索引擎中具有较强的自然排名竞争优势，从而对促进企业在线销售和强化网络品牌起到作用。
title标签
网页的标题:标签页显示
body标签
网页的主体部分
网页基本标签
标题标签(h)
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
段落标签(p)
<!--段落标签-->
我算不算鲜艳
残枝深埋勿见
请用凡胎肉眼
笑我这半生放下的尊严
<!--默认不会分段-->
<p>我算不算鲜艳</p>
<p>残枝深埋勿见</p>
<p>请用凡胎肉眼</p>
<p>笑我这半生放下的尊严</p>
效果
我算不算鲜艳 残枝深埋勿见 请用凡胎肉眼 笑我这半生放下的尊严
我算不算鲜艳
残枝深埋勿见
请用凡胎肉眼
笑我这半生放下的尊严
换行标签(br)
<!--换行标签-->
我算不算鲜艳 <br/>
残枝深埋勿见<br/>
请用凡胎肉眼<br/>
笑我这半生放下的尊严<br/>
效果
我算不算鲜艳
残枝深埋勿见
请用凡胎肉眼
笑我这半生放下的尊严
水平线标签(hr)
<!--水平线标签-->
<hr/>
效果图
字体样式标签
<!--粗体,斜体-->
<h1>字体样式标签</h1>
粗体:<strong>Monki</strong>
斜体:<em>Monki</em>
注释和特殊符号
nbsp:no-breaking space
gt:greater than
lt:less than
<!--特殊符号-->
空 格
空 格
<br/>
>
<br/>
<
<br/>
©版权所有梦奇
效果
空 格 空 格
>
<
©版权所有梦奇
图像标签
常见图片格式
- JPG
- GIF
- PNG
- BMP
- …
标签详解
<!--img学习
src:图片地址(必填)
相对地址(推荐),绝对地址
../ --上一级目录
alt:找不到图像显示的替代名(必填)
title:鼠标悬停在图片上显示的文字
-->
<img src="../resource/image/monki.jpg" alt="梦奇" title="悬停文字" width="130" height="130">
链接标签
超链接
-
页面间链接
- 从一个页面链接到另一个页面
<!--a标签 href: 必填,表示要跳转到那个页面 target: 表示窗口在哪打开 _self在当前网页打开(默认) _blank在新标签中打开 id:定位当前在页面中的位置 --> <a href="1.梦奇的第一个网页.html" target="_blank">点击跳转到页面1</a> <a href="https://www.baidu.com">点击跳转到百度</a> <br/> <a href="1.梦奇的第一个网页.html"> <img src="../resource/image/monki.jpg" alt="梦奇" title="悬停文字" width="130" height="130"> </a> -
锚链接
- 页面内/间跳转到指定位置
<!--锚链接 1.需要一个锚标记 2.跳转到标记 --> 4.链接标签学习.html <a id=down>底部</a> 3.图像标签.html <a href="4.链接标签学习.html#down">跳转</a> -
功能性标签
<!--功能性链接 邮件链接:mailto qq链接:使用qq推广 --> <a href="mailto:Monki4536251@outlook.com"></a>
行内元素和块元素
- 块元素:无论内容多少,改元素独占一行
- p标签
- h1-h6标签
- 行内元素:内容撑开宽度,左右都是行内元素的可以排在一行
- a标签
- strong标签
- em标签
列表
分类:
- 有序列表
- 有序列表
- 自定义列表
<!--有序列表ordered lists
应用范围: 试卷,问答...
-->
<ol>
<li>Java</li>
<li>Python</li>
<li>运维</li>
<li>前端</li>
<li>C/C++</li>
</ol>
<hr/>
<!--无序列表unordered lists
应用范围:导航栏,侧边栏...
-->
<ul>
<li>Java</li>
<li>Python</li>
<li>运维</li>
<li>前端</li>
<li>C/C++</li>
</ul>
<!--自定义列表definition lists
dl:标签label
dt:列表名称title
dd:列表内容description
应用范围,公司网站底部
-->
<dl>
<dt>学科</dt>
<dd>Java</dd>
<dd>Python</dd>
<dd>运维</dd>
<dd>前端</dd>
<dd>C/C++</dd>
<dt>位置</dt>
<dd>安徽</dd>
<dd>深圳</dd>
<dd>上海</dd>
</dl>
表格标签
<!--表格table
行 tr table rows
列 td table data
td的属性:colspan/rowspan
table的属性:边框 border 弃用了 To achieve a similar effect, use the CSS border shorthand property.
-->
<table border="1px">
<tr>
<!--跨列colspan-->
<td colspan="2">1-1</td>
</tr>
<tr>
<!--跨行--rowspan-->
<td rowspan="2">2-1</td>
<td>2-2</td>
</tr>
<tr>
<td>3-1</td>
</tr>
</table>
媒体元素
视频元素
- Video
音频元素
- audio
<!--音频和视频-->
<!--
contols 设置控制条
autoplay 自动播放(浏览器可能设置默认不允许)
-->
<video src="../resource/video/林俊杰20周年首唱会%20一起重拾快乐！.mp4" controls autoplay></video>
<audio src="../resource/audio/念.mp3" controls></audio>
效果如图
页面结构分析
- header 网页头部
- footer 网页脚部
- section web页面中的一块独立区域
- article 独立的文章内容
- aside 相关内容或应用
- nav 导航类
<body>
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主体</h2>
</section>
<footer>
<h2>网页脚部</h2>
</footer>
</body>
iframe内联框架
实现在一个网站中嵌套另外一个网站
<!--iframe内联框架
src:地址
w-h:宽高
-->
<iframe src="" name="hello" frameborder="0" width="1000px" height="800px"></iframe>
<a href="https://monkifantasy.github.io" target="hello">点击跳转</a>
POST和GET表单提交
类似于安卓对话框?
<!--表单form
action:表单提交的位置,可以是网站,也可以是一个请求处理地址
method: post,get提交方式
get方式提交:可以在url中看到提交的信息,不安全但高效,不能传输大文件
post方式提交:比较安全,可以传输大文件
-->
<form action="1.梦奇的第一个网页.html" method="post">
<!--文本输入框:input
type 文本框类型-->
<p> 名字: <input type="text" name="username"> </p>
<p> 密码: <input type="password" name="pwd"> </p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
文本框和单选框
<!--文本输入框:input type="text"
type 文本框类型
value 默认值
maxlength 最大长度
size文本框长度 -->
<p> 名字: <input type="text" name="username" value="梦奇" maxlength="8" size="3"> </p>
<p> 密码: <input type="password" name="pwd"> </p>
<!--单选框标签 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 ="button" 普通按钮
input type ="image" 图像按钮
input type ="submit" 提交按钮
input type ="reset" 重置按钮
value 给按钮赋值(改名)
-->
<p>
<input type="button" value="点击变长" name="btn1">
<input type="image" src="../resource/image/monki.jpg" name="imgbtn">
</p>
<p>
<input type="submit" value="commit" >
<input type="reset" value="clear">
</p>
<!--多选框 input type="checkbox"
checked 默认选择
-->
<p>爱好:
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="game" name="hobby">打游戏
<input type="checkbox" value="coding" name="hobby" checked>写代码
</p>
列表框文本域和文件域
<!--下拉框,列表框
-->
<p>下拉框:
<select name="country">
<option value="china" >China</option>
<option value="us" selected>US</option>
<option value="sw">SW</option>
<option value="none"></option>
</select>
</p>
<!--文本域
textarea name="textarea" cols="50" rows="10"
-->
<p>
<textarea name="textarea" cols="50" rows="10">文本内容</textarea>
</p>
<!--文件域
input type="file" name="files"
-->
<p>
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
搜索框滑块和简单验证
<!--邮件验证-->
<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="10" step="1">
</p>
<!--滑块
input type="range"
-->
<p>音量:
<input type="range" name="voice" min="0" max="100" step="2">
</p>
<!--搜索框-->
<p>搜索:
<input type="search" name="search">
</p>
表单的应用
- readonly 只读
<p> 名字: <input type="text" name="username" value="you can't modify this" readonly> </p>
- disabled 禁用
<input type="radio" value="boy" name="sex" checked disabled/>男
- hidden 隐藏域
<p> 密码: <input type="password" name="pwd" hidden="hidden" value="123456"> </p>
- 文字与控件相连(为控件设置id)
<p> 邮箱
<input type="email" name="email" id="mark">
</p>
<!--增强鼠标可用性-->
<label for="mark">点我去输入邮箱</label>
表单初级验证
为什么要进行表单验证?
- 减轻服务器压力
- 保证数据安全性
常用方式
- 提示信息 placeholder (用于输入框,相当于安卓的hint)
<p> 名字: <input type="text" name="username" placeholder="请输入用户名"> </p>
- 非空判断 required(必填,不能为空)
<input type="email" name="email" id="mark" required>
- 正则表达式
<p>自定义邮箱
<input type="text" name="diymail" pattern="这里填正则表达式">
</p>