基础前端
网页的构成
- HTML：用来制作网页基础内容和基本结构
- CSS： 用来制作网页美化效果
- JavaScript：用来制作网页动态效果
HTML
- HTML（Hyper Text Markup Language）：超文本标记语言
- 超文本：比普通文本更强大
- 标记：就是标签。可以用一系列的标签，将网络上的文档格式统一，使分散的资源连接成为一个逻辑整体
HTML组成
- HTML页面是由一系列的元素（Element）组成的，而元素是通过标签创建出来的
- 标签
- 标签可以用来设置文本样式、图片样式、超链接样式等等，用<>表示
- 例如：
标签，代表一级标题。我们可以通过开始标签和结束标签来包围文字，这些文字就会以标题的形式展示。
- 属性
- 标签中可以拥有属性，属性可以为标签提供更多的信息
- 属性只能添加到开始标签中。格式为：属性名=属性值
- 例如：align属性，表示对齐方式。我们可以通过在开始标签中添加该属性，就能让内容在不同位置显示了
- 标签
HTML入门案例
-
案例效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-txd5v8rY-1641957576817)(/Users/heroma/Library/Application Support/typora-user-images/image-20220111144529453.png)]
-
实现步骤
-
在项目下的web目录中新建一个HTML文件
-
修改标签中的内容为：01-入门案例
-
在标签中编写一个
标签，内容为：这是我的第一个HTML入门案例
-
在
标签中指定属性align，属性值为center
-
通过浏览器查看页面
<!DOCTYPE html> //html文件声明 <html lang="en"> //根标签 <head> //头部位 <meta charset="UTF-8"> //指定字符集 <title>01-入门案例</title> </head> <body> //身体部位 <h1 align="center">这是我的第一个HTML入门案例</h1> </body> </html>
-
HTML概念总结
- HTML是一种标记语言，使用元素和属性来编写页面
- 组成部分
- 元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素
- 开始标签（Opening tag）：包含元素的名称，被<>所包围。表示元素从这里开始或者开始起作用
- 结束标签（Closing tag）：与开始标签相似，知识其在元素名之前包含了一个/，这表示元素的结尾
- 内容（Content）：元素的内容，本例中就是所输入的文本本身
- 属性（Attribute）：标签附加信息
HTML注释
-
什么是注释
- 注释适用于解释说明程序的
-
注释的格式
-
注释的特点
- 被注释掉的标签和内容不会被浏览器所展示
HTML标签
- 标签的分类
- 开始和结束标签
- 自闭和标签：
- 标签的嵌套
- 正确格式：
文本
- 正确格式：
- 块级元素和行内元素
- 块级标签：在页面中以块的形式展示，自己独占一行，后面的内容会自动换行。
- 行内元素：在页面中以行的形式展示，不会换行。
- 块级标签：在页面中以块的形式展示，自己独占一行，后面的内容会自动换行。
- div和span
<div>：是一个通用的内容容器，没有特殊语义。一般用来对其他元素进行分组，用于样式化相关的需求<spam>：是一个通用的行内标签，没有特殊语义。一般用来变质元素以达到某种样式。<div>和<span>标签核心作用是布局页面
HTML属性
- 什么是属性
- 属性可以提供一些额外的信息，这些信息不会直接显示在内容中。但会改变标签的样式或者提供数据使用
- 定义格式
- 属性名 = 属性值
- 属性的规范
- 同一个标签中属性的名称必须唯一
- 不区分大小，建议使用小写
- 属性值可以使用单引号或者双引号括起来，建议使用双引号
- 常用的属性
- class：定义元素的类名，用来选择和访问特定的元素
- id：定义元素的唯一标识，在整个文档中必须是唯一的
- name：定义元素的名称，一般用于表单数据提交到服务器
- value：定义在元素内现实的默认值，一般用于表单标签中
- style：定义元素的css样式
HTML新闻文本页面案例
案例分析
- 想要完成这个页面，首先要进行页面布局，然后填充文本样式
-
div样式布局
-
<head>标签中通过
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新闻文本</title>
<style>
div{
width: 60%;
margin: auto;
}
</style>
</head>
<body>
<!-- 标题-->
<div><h1>支付宝特权福利！芝麻分600以上用户惊喜，网友：幸福来得突然？</h1></div>
<!--作者-->
<div>
<i><font size="2" color="#808080">作者：itheima 2088-08-08</font></i>
<!--
size: hr水平线大小
color hr水平线颜色
-->
<hr/>
</div>
<!--副标题-->
<div>
<h3>支付宝特权福利！芝麻分600以上用户惊喜，网友：幸福来得突然？</h3>
</div>
<!--正文-->
<div>
<p>这些年，马云的风头正盛，但是上个月他毅然辞去了阿里巴巴的职务。而马云所做的很多事情也的确改变了这个世界，特别是在移动支付领域，更是走在了世界的前列。如今中国的移动支付已经成为老百姓的必备，支付宝对中国社会的变革都带来了深远的影响。不过马云依然没有满足，他认为移动互联网将会成为人类的基础设施，而且这里面的机会和各种挑战还非常多。</p>
<p>支付宝的诞生就是为了解决淘宝网的客户们的买卖问题，而随着支付宝的用户的不断增加，支付宝也推出了一系列的附加功能。比如生活缴费、转账汇款、还信用卡、车主服务、公益理财等，往简单的说，支付宝既可以满足人们的日常生活，又可以利用芝麻信用进行资金周转服务。除了芝麻分能够进行周转以外，互联网信用体系下的产品多多，我们对比以下几个产品看看区别:
<ol>
<li>蚂蚁借呗，芝麻分600并且受到邀请开通福利，这个就是支付宝贷款，直接秒杀了银行贷款和线下金融公司，是现在支付宝用户使用最多的。</li>
<li>微粒贷：于2015年上线，主要面向QQ和微信征信极好的用户而推出，受到邀请才能申请开通，额度最高有30万，难度较大。</li>
<li>蚂蚁巴士：这个在微信 蚂蚁巴士 公众平台申请,对于信用分要求530分以上才可以,额度1-30万不等，目前非常火爆。</li>
</ol>
</p>
<p>
说起支付宝中的芝麻信用功能，相信更是受到了许多人的推崇，因为随着自己使用的不断增多，信用分会慢慢提高，而达到了一个阶段，就可以获得许多的福利。而当我们的芝麻信用分可以达到600分以上的时候，会有令我们想象不到的惊喜，接下来就让我们一起来看看，具体都有哪些惊喜吧。
</p>
<p>
<b>一、芝麻分600以上福利之信用购。</b>网购相信大家都不陌生，但是很多时候，网购都有一个通病，就是没办法试用，导致很多人买了很多自己不喜欢的东西。但是只要你的支付宝芝麻分在650及以上，就能立马享有0元下单，收到货使用满意了再进行付款。还能享用美食的专属优惠，是不是很耐斯
</p>
<p>
<b>二、芝麻分600以上福利之信用免押。</b>芝麻信用与木鸟短租联合推出信用住宿服务，芝麻分600及以上的用户可享受免押入住特权。木鸟短租拥有全国50万套房源，是国内领先的短租民宿预订平台。包括大家知道的飞猪信用住，大部分酒店可以免押金入住，离店再交钱。
</p>
<p>
<b>三、芝麻分600以上福利之国际驾照。</b>我们经常听说的可能只是中国驾照，但现在芝麻分已经应用到了国际领域，只要你的芝麻分够550就可以免费办理国际驾照，也有不少人非常佩服马云，一个简单的芝麻分居然有如此大的功能，也从侧面反应出来马云在国际上的地位，这个国际驾照是由新西兰、德国、澳大利亚联合认证，可以在全球200多个国家通行，相信大家一定都有一个自驾全球的梦想吧，而现在支付宝就给了你一把钥匙，剩下的就你自己搞定了！有没有想带着你的女神来一次浪漫之旅呢？
</p>
</div>
</body>
</html>
案例 头条页面
案例分析
- 完成这个页面，首先要进行页面的布局，然后填充文本、图片、超链接
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7i4Old1d-1641957576818)(/Users/heroma/Library/Application Support/typora-user-images/image-20220111165109770.png)]
- div样式布局
- 可以通过给
<div>标签添加class属性，来控制不同的<div>样式
- 可以通过给
<style>
/*div{*/
/* border: 1px solid red;*/
/*}*/
.left{
width: 20%;
height: 500px;
float: left;
}
.center{
width: 60%;
height: 500px;
float: left;
}
.right{
width: 20%;
height: 500px;
float: left;
}
.footer{
/*
清楚浮动效果
*/
clear: both;
text-align: center;
background: blue;
}
</style>
<div>top</div>
<div>navibar</div>
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
<div class="footer">footer</div>
-
图片标签
标签名 作用 备注 img 可以显示一张图片（本地或者网咯） src属性，这是一个必须属性 title属性(鼠标悬停时显示文本) alt属性，图片不显示时显示文本 height属性，图片的高度 width属性，图片的宽度 -
超链接标签
标签名 作用 备注 a 表示超链接 href 属性，表示超链接指向的URL地址 target属性，页面打开的方式（_self当前页面_bank新标签页）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接标签演示</title>
<style>
a{
//去除超链接下划线
text-decoration: none;
color: black;
}
a:hover{
//悬浮字典变成红色
color: red;
}
</style>
</head>
<body>
<a href="https://www.google.com">点我访问谷歌</a><br/>
<a href="https://www.baidu.com">点我访问百度</a><br/>
<a href="文本标签演示.html">点我看新闻</a><br/>
<a href="http://www.itheima.com"><img src="img/itheima.png" height="50px;" width="150px;"></a><br/>
</body>
</html>
-
案例实现代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>头条页面</title> <style> /*div{*/ /* border: 1px solid red;*/ /*}*/ .left{ width: 20%; /*height: 500px;*/ float: left; } .center{ width: 60%; /*height: 500px;*/ float: left; } .right{ width: 20%; /*height: 500px;*/ float: left; } .footer{ /* 清楚浮动效果 */ clear: both; text-align: center; background: blue; } a{ color: white; text-decoration: none; } </style> </head> <body> <div><img src="img/j1.png" width="100%"></div> <div><img src="img/j2.png" width="100%"><hr/></div> <div class="left"><img src="img/j3.png" width="100%"></div> <div class="center"><!-- 标题--> <div><h1>支付宝特权福利！芝麻分600以上用户惊喜，网友：幸福来得突然？</h1></div> <!--作者--> <div> <i><font size="2" color="#808080">作者：itheima 2088-08-08</font></i> <!-- size: hr水平线大小 color hr水平线颜色 --> <hr/> </div> <!--副标题--> <div> <h3>支付宝特权福利！芝麻分600以上用户惊喜，网友：幸福来得突然？</h3> </div> <!--正文--> <div> <p>这些年，马云的风头正盛，但是上个月他毅然辞去了阿里巴巴的职务。而马云所做的很多事情也的确改变了这个世界，特别是在移动支付领域，更是走在了世界的前列。如今中国的移动支付已经成为老百姓的必备，支付宝对中国社会的变革都带来了深远的影响。不过马云依然没有满足，他认为移动互联网将会成为人类的基础设施，而且这里面的机会和各种挑战还非常多。</p> <p>支付宝的诞生就是为了解决淘宝网的客户们的买卖问题，而随着支付宝的用户的不断增加，支付宝也推出了一系列的附加功能。比如生活缴费、转账汇款、还信用卡、车主服务、公益理财等，往简单的说，支付宝既可以满足人们的日常生活，又可以利用芝麻信用进行资金周转服务。除了芝麻分能够进行周转以外，互联网信用体系下的产品多多，我们对比以下几个产品看看区别: <ol> <li>蚂蚁借呗，芝麻分600并且受到邀请开通福利，这个就是支付宝贷款，直接秒杀了银行贷款和线下金融公司，是现在支付宝用户使用最多的。</li> <li>微粒贷：于2015年上线，主要面向QQ和微信征信极好的用户而推出，受到邀请才能申请开通，额度最高有30万，难度较大。</li> <li>蚂蚁巴士：这个在微信 蚂蚁巴士 公众平台申请,对于信用分要求530分以上才可以,额度1-30万不等，目前非常火爆。</li> </ol> <img src="img/1.jpg" width="100%"> </p> <p> 说起支付宝中的芝麻信用功能，相信更是受到了许多人的推崇，因为随着自己使用的不断增多，信用分会慢慢提高，而达到了一个阶段，就可以获得许多的福利。而当我们的芝麻信用分可以达到600分以上的时候，会有令我们想象不到的惊喜，接下来就让我们一起来看看，具体都有哪些惊喜吧。 </p> <p> <b>一、芝麻分600以上福利之信用购。</b>网购相信大家都不陌生，但是很多时候，网购都有一个通病，就是没办法试用，导致很多人买了很多自己不喜欢的东西。但是只要你的支付宝芝麻分在650及以上，就能立马享有0元下单，收到货使用满意了再进行付款。还能享用美食的专属优惠，是不是很耐斯 </p> <p> <b>二、芝麻分600以上福利之信用免押。</b>芝麻信用与木鸟短租联合推出信用住宿服务，芝麻分600及以上的用户可享受免押入住特权。木鸟短租拥有全国50万套房源，是国内领先的短租民宿预订平台。包括大家知道的飞猪信用住，大部分酒店可以免押金入住，离店再交钱。 </p> <img src="img/2.jpg" width="100%"> <p> <b>三、芝麻分600以上福利之国际驾照。</b>我们经常听说的可能只是中国驾照，但现在芝麻分已经应用到了国际领域，只要你的芝麻分够550就可以免费办理国际驾照，也有不少人非常佩服马云，一个简单的芝麻分居然有如此大的功能，也从侧面反应出来马云在国际上的地位，这个国际驾照是由新西兰、德国、澳大利亚联合认证，可以在全球200多个国家通行，相信大家一定都有一个自驾全球的梦想吧，而现在支付宝就给了你一把钥匙，剩下的就你自己搞定了！有没有想带着你的女神来一次浪漫之旅呢？ </p> </div> </div> <div class="right"> <img src="img/11.jpg" width="100%"> <img src="img/22.jpg" width="100%"> <img src="img/33.jpg" width="100%"> <img src="img/11.jpg" width="100%"> <img src="img/22.jpg" alt="广告"> <img src="img/33.jpg" width="100%"> </div> <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> </body> </html>
案例 注册页面
案例分析
要完成这个页面，首先要进行页面布局，然后在使用表单标签完成表单项
-
div样式布局
- background：url（“图片路径”） 添加背景图片
-
表单标签
标签名 作用 属性 form 表示表单标签 action属性，用于提交数据的路径 method属性，提交表单的方式（get和post） autocomplete属性，是否记录补全（on和off） get：表单数据会显示在地址栏中，不安全。地址栏的URL长度有限制
post：表单数据不会显示在地址栏中，数据封装在请求体重，安全，长度没有限制
-
表单项标签
标签名 作用 属性 lable 表单元素说明，配合表单项标签使用 for属性，必须和表单项标签id属性值一致 input 表单项标签，多种输入类型，用来接收用户数据 type属性：数据的类型 id属性：唯一标识 name属性：提交服务器的标识 value属性：默认数据值 placeholder属性：默认提示信息 require属性：是否必须有数据 button 按钮标签：不同的按钮具有不同的作用 type属性：按钮的功能（submit，reset，button） -
表单项标签type属性值
属性值 作用 注意 text 普通文本框 password 密码框 email 邮箱框，简单验证 radio 单选框 选项必须有相通的name属性值，value属性设置实际提交的值。checked属性代表默认选中 checkbox 复选框 选项必须有相通的name属性值，value属性设置实际提交的值，checked属性代表默认选中
<input type="text"> 普通文本输入框
<input type="password"> 密码输入框
<input type="email"> 邮箱输入框
<input type="radio"> 单选框，必须具有相通的name属性值，value属性真是提交的值，checked属性默认选中
<input type="checkbox"> 多选框，必须具有相通的name属性值，value属性真是提交的值，checked属性默认选中
-
表单标签type属性值
data 日期框 time 时间框 属性值 作用 注意 datatime-local 时间日期框 number 数字框 range 滚动条数值框 min最小值，max最大值，step步进值 search 可清除文本框 tel 电话框 url 网址框 file 文件上框 hidden 隐藏框 value属性设置实际提交的值 <label for="birthday">生日：</label> <input type="date" id="birthday" name="birthday"> <br> <label for="time">当前时间：</label> <input type="time" id="time" name="time"> <br> <label for="insert">注册时间：</label> <input type="datetime-local" id="insert" name="insert"> <br> <label for="number">年龄：</label> <input type="number" id="number" name="number"> <br> <label for="range">心情值(1~10)：</label> <input type="range" id="range" name="range" min="1" max="10" step="1"> <br> <label for="search">可清除文本框：</label> <input type="search" id="search" name="search"> <br> <label for="tel">电话：</label> <input type="tel" id="tel" name="tel"> <br> <label for="url">网址：</label> <input type="url" id="url" name="url"> <br> <label for="file">文件上传：</label> <input type="file" id="file" name="file"> <br> <label for="hidden">隐藏信息：</label> <input type="hidden" id="hidden" name="hidden" value="hero"> <br> <button type="submit">提交</button> <button type="reset">重置</button> -
其他常用的表单项标签
标签名 作用 属性 select 表示下拉列表标签 与input标签常见属性相似 optgroup 表示下拉列表分组标签 lable属性，设置分组名称 option 表示下拉列表项标签 textarea 表示文本域标签 rows属性代表行数，cols属性代表列数 <label for="select">所在城市：</label> <select id="select" name="select"> <option>---请选择所在城市---</option> <optgroup label="直辖市："> <option>北京</option> <option>上海</option> </optgroup> <optgroup label="省会城市："> <option>郑州</option> <option>杭州</option> </optgroup> </select> <br> 个人介绍：<textarea name="doc" cols="5" rows="5"></textarea> <br> -
案例代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面</title> <style> body{ background: url("img/bg.png"); } .center{ background: white; width: 400px; text-align: center; margin: auto; } </style> </head> <body> <!--公司顶部图标--> <div> <img src="img/logo.png"> </div> <!--中间注册信息--> <div class="center"> <div>注册详情<hr/></div> <form action="#" method="get"> <div> <label for="username">姓名：</label> <input type="text" id="username" name="username" placeholder="在此输入姓名"> </div> <div> <label for="password">密码：</label> <input type="password" id="password" name="password" placeholder="在此输入密码"> </div> <div> <label for="email">邮箱：</label> <input type="email" id="email" name="username" placeholder="在此输入邮箱"> </div> <div> <label for="tel">手机：</label> <input type="tel" id="tel" name="tel" placeholder="在此输入手机"> <hr/> </div> <div> <label for="gender">性别：</label> <!-- name属性值要一样--> <input type="radio" id="gender" name="gender" value="men"/>男 <input type="radio" name="gender" value="women"/>女 </div> <div> <label for="lobby">爱好：</label> <!-- name属性值要一样--> <input type="checkbox" id="lobby" name="lobby" value="music"/>音乐 <input type="checkbox" name="lobby" value="game"/>游戏 <input type="checkbox" name="lobby" value="movie"/>电影 </div> <div> <label for="birthday">出生日期：</label> <!-- name属性值要一样--> <input type="date" id="birthday" name="birthday" value=""> </div> <div> <label for="select">所在城市：</label> <select id="select" name="select"> <option>---请选择所在城市---</option> <optgroup label="直辖市："> <option>北京</option> <option>上海</option> </optgroup> <optgroup label="省会城市："> <option>郑州</option> <option>杭州</option> </optgroup> </select> <hr> </div> <div> 个性签名：<textarea name="doc" cols="40" rows="5" placeholder="请写下你的与众不同"></textarea> </div> <button type="submit">提交</button> <button type="reset">重置</button> </form> </div> </body> </html>
扫一扫
5652
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
