HTML学习
1 HTML入门
1.1初识HTML
1.1.1HTML概述
-
网页的构成
- HTML：通常用来定义网页内容的含义和基本结构。
- CSS：通常用来描述网页的表现与展示效果。
- JavaScript：通常用来执行网页的功能与行为。（例如商场的轮播图）
-
HTML（超文本标记语言——HyperText Markup Language）
所谓
超文本Hypertext，是指连接单个或者多个网站间的网页的链接。我们通过链接，就能访问互联网中的内容。所谓
标记Markup，即标签，是用来注明文本，图片等内容，以便于在浏览器中显示，例如<head>,<body>等。
1.1.2HTML的组成
HTML是由一系列的元素（Element）组成的，而元素是通过标签创建出来的。
-
标签：
标签（tage）用于设置文本样式、图片样式、超链接样式等。例如：
<h1>今天是个神奇的一天</h1> <!--<h1>是一级标题标签-->
-
属性：
-
标签中可以拥有属性，属性为标签提供了更多的信息。
-
属性只能添加到开始标签中。格式为：属性名=属性值 （
align属性表示水平对齐方式，我们可以赋值为center表示 居中 。）例如：
<h1 align='center'>今天是神奇的一天</h1>
-
1.2入门案例
1.2.1代码及效果
1.2.2页面介绍
-
<!DOCTYPE html>: 声明文档类型。规定了HTML页面必须遵从的良好规则，从HTML5后，<!DOCTYPE html>是最短的有效的文档声明。 -
<html>：这个标签包裹了整个完整的页面，是一个根元素（顶级元素）。其他所有元素必须是此元素的后代，每篇HTML文档只有一个根元素。 -
<head>：这个标签是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。以后的章节能学到更多关于<head>元素的内容。目前主要了解两个标签：
-
<meta charset="utf-8">：这个标签是页面的元数据信息，设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容，能够避免页面乱码问题。 -
<title>：这个标签定义文档标题，位置出现在浏览器标签上，而不是页面正文中。在收藏页面时，它可用来描述页面。
<body>：包含了文档内容，你访问页面时所有显示在页面上的文本，图片，音频，游戏等等
1.2.3小结
-
HTML是一种标记语言，用来组织页面，使用元素和属性。
-
这个元素的主要部分有：
- 元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。
- 开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
- 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
- 内容（Content）：元素的内容，本例中就是所输入的文本本身。
- 属性（Attribute）：标签的附加信息。
- 在学习HTML时，要抓住两个方面：
- 掌握标签所代表的含义。
- 掌握在标签中加入的属性的含义。
2 基本语法
2.1关于注释
- 注释用来解释说明程序，像大多数语言一样HTML也有自己的注释
- 格式：
- IDEA中将代码注释快捷方式：CTRL+shift+/
2.2关于标签
2.2.1标签的分类
- 开始和结束标签：
<h1></h1><p></p> - 自闭和标签：
<br/><hr/>
2.2.2空元素
不是所有元素都拥有开始标签，内容和结束标记。一些元素只有一个标签，叫做空元素。它是在开始标签中进行关闭的。例子如下：
第一行文档<br/>
第二行文档<br/>
2.2.3嵌套元素
你也可以把元素放到其它元素之中——这被称作嵌套。比如，我们想要强调第一个，可以将<b>标签包围第一个，这样b标签就是嵌套在了p标签中：
<p>这是<b>第一个</b>页面</p>
2.2.4块级元素和行内元素
1）概念
在HTML中有两种重要元素类别，块级元素和内联元素。
-
块级元素：
独占一行。块级元素（block）在页面中以块的形式展现。相对于其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。比如
<p>，<hr>，<li>，<div>等。 -
行内元素
行内显示。行内元素不会导致换行。通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。比如
<b>，<a>，<i>，<span>等。注意：一个块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中。
2）div和span
-
<div>是一个通用的内容容器，并没有任何特殊语义。它可以被用来对其它元素进行分组，一般用于样式化相关的需求。它是一个块级元素。 -
<span>是短语内容的通用行内容器，并没有任何特殊语义。它可以被用来编组元素以达到某种样式。它是一个行内元素。注意：div和span在页面布局中有重要作用。
2.3关于属性
标签属性，主要用于拓展标签。属性包含元素的额外信息，这些信息不会出现在实际的内容中。但是可以改变标签的一些行为或者提供数据，属性总是以name = value的格式展现。
-
属性名：同一个标签中，属性名不得重复。
-
大小写：属性和属性值对大小写不敏感。不过W3C标准中，推荐使用小写的属性/属性值。
-
引号：双引号是最常用的，不过使用单引号也没有问题
-
常用属性：
| 属性名 | 作用 |
|---|---|
| class | 定义元素类名，用来选择和访问特定的元素 |
| id | 定义元素唯一标识符，在整个文档中必须是唯一的 |
| name | 定义元素名称，可以用于提交服务器的表单字段 |
| value | 定义在元素内显示的默认值 |
| style | 定义CSS样式，这些样式会覆盖之前设置的样式 |
2.4关于特殊字符
在HTML中，字符 <, >,",' 和 & 是特殊字符. 它们是HTML语法自身的一部分, 那么你如何将这些字符包含进你的文本中呢
| 原义字符 | 等价字符引用 |
|---|---|
| < | < |
| > | > |
| " | " |
| ' | ' |
| & | & |
| 空格 | |
NBSP：“Non-Breaking Space”的缩写在前面加&后加；时表示一个“空格”
不打破空间上的程序和文档的空间攻击其网站
3 HTML案例-新闻文本
3.1 案例效果
显示新闻文本。
3.2 案例分析
要想完成1.要先完成页面布局2.填充文本样式
3.2.1 div样式分析
文本由几部分构成，我们可以使用div将页面分割布局。在head标签中，通过style标签加入样式。
-
样式格式
<style> 标签名{ 属性名1：属性值1 【属性值2 属性值3 ...】; 属性名2：属性值2； 属性名3：属性值3； } </style> -
例如：
<style> div{ /*显示边框 soild（实边）*/ border:1px soild red; /*宽度占屏幕 60%*/ width:60%; /*高度占500像素*/ height:500px; /*边框外边距 距离浏览器边距*/ margin:auto; } </style>【提示】
为了布局方便，我们通常可以先设置边框的样式，进行布局。结束后，再去掉边框，直观展示完整界面。
3.2.2 文本标签
使用文本内容标签设置文字基本样式。
| 标签名 | 作用 |
|---|---|
| p | 表示文本的一个段落 |
| h | 表示文档标题，<h1>–<h6> ，呈现了六个不同的级别的标题，<h1> 级别最高，而 <h6> 级别最低 |
| hr | 表示段落级元素之间的主题转换，一般显示为水平线 |
| li | 表示列表里的条目。 |
| ul | 表示一个无序列表，可含多个元素，无编号显示。 |
| ol | 表示一个有序列表，通常渲染为有带编号的列表 |
| em | 表示文本着重，一般用斜体显示 |
| strong | 表示文本重要，一般用粗体显示 |
| font | 表示字体，可以设置样式（已过时） |
| i | 表示斜体 |
| b | 表示加粗文本 |
- 在标签内加入属性控制样式
<!--
无序列表<ul>
属性：type="列表样式"(disc实心圆点 circle空心圆点 square方形块)
列表项：<li>
-->
<ul type="circl">
<li>javaEE</li>
<li>HTML</li>
</ul>
示例显示：
<!--
有序列表：<ol>
属性：type="列表样式"(1数字 A或者a字母 I或i罗马数字类 start--起始位置)
列表项：<li>
-->
<ol type="I">
<li>列表传播</li>
<li>嘟嘟嘟</li>
</ol>
示例显示：
3.3 实现步骤
- 创建初始页面。
- 使用div标签划分区域（标题，作者，副标题，正文），设置div样式。
- 编辑正文。
- 使用h1标签加入标题。
- 使用em标签加入作者信息。
- 使用hr标签加入分割线。
- 使用h3标签加入副标题。
- 使用p标签加入正文。
- 使用ol标签，li标签加入列表信息。
- 使用strong标签，加入文字强调效果。
<style> div{ width:60%; margin:auto; }</style><body> /*一级标题*/ <div><h1>......</h1></div> /*作者信息*/ <div> <em><font color="gray" size="4">........</font><em> <hr> </div> /*三级标题*/ <div><h3>..........</h3></div> /*正文*/ <div> <p>.......</p> <p>....... <ol type="1"> <li>.......</li> <li>.......</li> <li>.......</li> </ol> </p> <p>.......</p> <p><b>.....</b>......</p> <p><b>.....<b>.......</p> <p><b>.....<b>.......</p> <p>...................</p> </div> </body>
4 HTML案例-头条页面
4.1 案例效果
4.2 案例分析
4.2.1 div布局
-
div的class值
对
标签加class属性来控制div的样式。首先编写三个div，设置边框样式
<style> div{ border: 1px solid blue;}</style><div >left</div><div >center</div><div>right</div>
使用class的值，格式：
.class值{ 属性名:属性值;}<标签名 class="class值"> 提示: class是自定义的值
所以，使用class属性值，可以帮助我们区分div，更加精确的设置标签的样式。
2）浮动布局和清除
主体部分分为三列，而div是独占一行的，所以想要使用div布局，就还需要加入浮动 属性。
-
概念
float：指定一个元素应沿其容器的左侧或右侧放置，允许文本或者内联元素环绕它，该元素从网页的正常流动中移除，其他部分保持正常文档流顺序。
格式：
<!-- 加入浮动 -->float：none；不浮动float：left；左浮动float：right；右浮动<!-- 清除浮动 -->clear：both；清除两侧浮动，此元素不再收浮动元素布局影响。
- 加入三部分div
<div class="left">left</div><div class="center">center</div><div class="right">right</div>
- 浮动布局
.left{ width: 20%; float: left; } .center{ width: 59%; float: left; } .right{ width: 20%; float: left; }
至此完成左中右三部分的布局。
- 加入
footer部分
.footer{ border: 5px solid blue; } <div class="footer">footer</div>
发现蓝色footer的div，延续正常文档流布局，摆放在navbar的下方，与浮动元素重叠。想要清除浮动影响，所以要设置清除浮动属性clear。
.footer{ border: 5px solid blue; clear: both; } <div class="footer">footer</div>
- 设置
center
增加center 高度，完成基本的布局效果。
.center{ width: 59%; float: left; height: 600px; }
4.2.2 背景设置
<style> div{ background-color:black; }</style>
4.2.3 图片标签
| 标签名 | 作用 | 备注 |
|---|---|---|
| img | 可以显示一张图片(本地或网络) | src属性，这是一个必需的属性，表示图片的地址。 |
其他属性：
| 属性名 | 作用 | 备注 |
|---|---|---|
| title | 鼠标悬停（hover）时显示文本。 | |
| alt | 图形不显示时的替换文本。 | |
| height | 图像的高度。 | |
| width | 图像的宽度。 |
<img src="../img/ad1.jpg">(自闭和 ../是指当文件不在一个层时退回到上一级)
4.2.4 超链接
| 标签名 | 作用 | 备注 |
|---|---|---|
| a | 表示超链接。 | href属性，表示超链接指向的URL地址。（可以是网络中的地址也可以是当前项目中其它页面地址） |
| 属性名 | 作用 |
|---|---|
| target | 页面的打开方式(_self当前页 _blank新标签页)。 |
去掉下划线
根据某些样式的布局需求，去除下划线更为美观并且可以显示颜色。
a { text-decoration:none; // none 表示不显示 color:black;}
鼠标悬浮样式
a:hover{color:red;}
超链接也可以嵌套使用：
<a href="地址" target="_blank"><img src="../img/p1.jpg">嵌套使用</a>
4.3 使用标签
- 使用div标签，设置布局，背景和浮动等。
- 基本文本标签
- 图片标签
- 超链接标签
4.4 实现步骤
- 创建初始页面，拷贝图片等素材。
- 整体布局。
- 实现顶部条（图片）。
- 实现导航条（图片）。
- 实现左侧分享区域（图片）。
- 实现中间正文区域（文本+图片）。
- 实现右侧广告区域（图片）。
- 实现底部页脚（链接）。
4.4.1 顶部条
<div><img src="../img/p1.jpg" width="100%"></div>
4.4.2 实现导航条
<div><img src="../img/p1.jpg" width="100%"></div>
4.4.3实现中部正文
HTML代码
<div class="center"> <div > <h1>支付宝特权福利！芝麻分600以上用户惊喜，网友：幸福来得突然？</h1> </div> <div> <font color="gray" size="2"> <em> 作者 2019-11-11 11:11:11</em></font> <br/> <hr/> </div> <div> <h3>支付宝特权福利！芝麻分600以上用户惊喜，网友：幸福来得突然？</h3> </div> <div> <p> 这些年，马云的风头正盛，但是上个月他毅然辞去了阿里巴巴的职务。而马云所做的很多事情也的确改变了这个世界，特别是在移动支付领域，更是走在了世界的前列。如今中国的移动支付已经成为老百姓的必备，支付宝对中国社会的变革都带来了深远的影响。不过马云依然没有满足，他认为移动互联网将会成为人类的基础设施，而且这里面的机会和各种挑战还非常多。 </p> <p> 支付宝的诞生就是为了解决淘宝网的客户们的买卖问题，而随着支付宝的用户的不断增加，支付宝也推出了一系列的附加功能。比如生活缴费、转账汇款、还信用卡、 车主服务、公益理财等，往简单的说，支付宝既可以满足人们的日常生活，又可以利用芝麻信用进行资金周转服务。除了芝麻分能够进行周转以外，互联网信用体系 下的产品多多，我们对比以下几个产品看看区别: <ol type="1"> <li> 蚂蚁借呗，芝麻分600并且受到邀请开通福利，这个就是支付宝贷款，直接秒杀了银行贷款和线下金融公司，是现在支付宝用户使用最多的。 </li> <li> 微粒贷：于2015年上线，主要面向QQ和微信征信极好的用户而推出，受到邀请才能申请开通，额度最高有30万，难度较大 </li> <li> 蚂蚁巴士：这个在微信 蚂蚁巴士 公众平台申请,对于信用分要求530分以上才可以,额度1-30万不等，目前非常火爆 </li> </ol> <img src="../img/1.jpg" /> </p> <p> 说起支付宝中的芝麻信用功能，相信更是受到了许多人的推崇，因为随着自己使用的不断增多，信用分会慢慢提高，而达到了一个阶段，就可以获得许多的福利。而当 我们的芝麻信用分可以达到600分以上的时候，会有令我们想象不到的惊喜，接下来就让我们一起来看看，具体都有哪些惊喜吧。 </p> <p> <strong>一、芝麻分600以上福利之信用购。</strong> 网购相信大家都不陌生，但是很多时候，网购都有一个通病，就是没办法试用，导致很多人买了很多自己不喜欢的东西。但是只要你的支付宝芝麻分在650及以上，就能立马享有0元下单，收到货使用满意了再进行付款。还能享用美食的专属优惠，是不是很耐斯 </p> <p> <strong>二、芝麻分600以上福利之信用免押。</strong>芝麻信用与木鸟短租联合推出信用住宿服务，芝麻分600及以上的用户可享受免押入住特权。木鸟短租拥有全国50万套房源，是国内领先的短租民宿预订平台。包括大家知道的飞猪信用住，大部分酒店可以免押金入住，离店再交钱。 </p> <img src="../img/2.jpg" /> <p> <strong> 三、芝麻分600以上福利之国际驾照。</strong>我们经常听说的可能只是中国驾照，但现在芝麻分已经应用到了国际领域，只要你的芝麻分够550就可以免费办理国际驾照，也有不少人非常佩服马云，一个简单的芝麻分居然有如此大的功能，也从侧面反应出来马云在国际上的地位，这个国际驾照是由新西兰、德国、澳大利亚联合认证，可以在全球200多个国家通行，相信大家一定都有一个自驾全球的梦想吧，而现在支付宝就给了你一把钥匙，剩下的就你自己搞定了！有没有想带着你的女神来一次浪漫之旅呢？ </p> <p> 随着互联网对我们生活的改变越来越大，信用这一词也被大家推上风口浪尖，不论是生活出行，还是其他的互联网服务，与信用体系已经密不可分了，马云当初说道，找老婆需要拼芝麻分，如今似乎也要成为现实，那么你们的芝麻分有多少了呢？ </p> </div></div>
样式代码
.center { width: 60%; /*最后去除边框宽度恢复为60%*/ float: left; }
4.4.4 实现右侧广告
HTML代码
<div class="right"> <div> <img src="../img/ad1.jpg" > </div> <div > <img src="../img/ad2.jpg" > </div> <div> <img src="../img/ad3.jpg" > </div> <div > <img src="../img/ad1.jpg" > </div> <div > <img src="../img/ad2.jpg" > </div> <div > <img src="../img/ad3.jpg" > </div></div>
图片代码中的png和jpg区别
png:作为GIF的无专利替代品开发，用于无损压缩和在web上显示图像。
JPEG：是在world wide web及其他联机服务上常用的一种格式，用于显示超文本标记语言（HTML）文档中的照片和其他连续色调图像。
效果如下：
4.4.5实现底部页脚
HTML代码
<div class="footer"> <a href="#">关于黑马 </a> <a href="#">帮助中心 </a> <a href="#">开放平台 </a> <a href="#">诚聘英才 </a> <a href="#">联系我们 </a> <a href="#">法律声明 </a> <a href="#">隐私政策 </a> <a href="#">知识产权 </a> <a href="#">廉正举报 </a></div>
是不进行跳转
样式代码
.footer { clear: both; background-color: cornflowerblue; text-align: center; } a{ text-decoration: none; color: white; }
5 HTML案例-登录页面
5.1 案例效果
5.2 案例分析
5.2.1 背景图片
background:url("");<！--复合标签既可表示背景颜色，也可表示图片-->
5.2.2 表单标签
| 标签名 | 作用 | 备注 |
|---|---|---|
| form | 表示表单，是用来收集用户输入信息并向 Web 服务器提交的一个容器 |
举例：
<form > //表单元素</form>
表单的属性
| 属性名 | 作用 | 备注 |
|---|---|---|
| action | 处理此表单信息的Web服务器的URL地址（提交路径） | |
| method | 提交此表单信息到Web服务器的方式 | 可能的值有get和post，默认为get |
| autocomplete | 自动补全，指示表单元素是否能够拥有一个默认值，配合input标签使用 | HTML5 |
号可以用来表示空路径。
GET与POST说明：
post：指的是 HTTP POST 方法；表单数据会包含在表单体内然后发送给服务器。（地址栏中不可见）
get：指的是 HTTP GET 方法；表单数据会附加在 action 属性的URI中，并以 '?' 作为分隔符，然后这样得到的 URI 再发送给服务器。（地址栏可见）
GET方式举例：
GET与POST对比：
| 地址栏可见 | 数据安全 | 数据大小 | |
|---|---|---|---|
| GET | 可见 | 不安全 | 有限制（取决于浏览器） |
| POST | 不可见 | 相对安全 | 无限制 |
5.2.3 表单元素入门
表单项标签依附form实现
| 标签名 | 作用 | 备注 |
|---|---|---|
| **label ** | 表单元素的说明，配合表单元素使用 | for属性值为相关表单元素的id属性值 |
| input | 表单中输入控件，多种输入类型，用于接受来自用户数据 | type属性值决定输入类型 |
| button | 页面中可点击的按钮，可以配合表单进行提交 | type属性值决定按钮类型，按钮的功能（submit、reset、button） |
1）简单的文本输入框
-
label标签：表单的说明。
- for属性值：匹配input标签的id属性值。for属性值必须与id属性一致。
-
input标签：输入控件。
- type属性：表示输入类型，text值为普通文本框
- id属性：表示标签唯一标识
- name属性：表示标签名称（有它数据才能被提交）
- value属性：表示标签数据值
- placeholder属性：默认提示信息
- require属性：必须填写
浙公网安备 33010602011771号