HTML快速入门
HTML是超文本标记语言,是由很多预定义的标签组成的,每一种标签有其特殊的含义,这些标签能被浏览器识别并且渲染出不同的显示效果。HTML文档也俗称网页,是网站的重要组成部分。
- HTML文档结构
<html lang="en">
<head>
<meta charset="utf-8">
<title>入门案例</title>
<style>
/*样式控制*/
</style>
</head>
<body>
<h1 align="center">这是我的第一个HTML入门案例</h1>
</body>
</html>
HTML基本语法
注释
<!-- 解释说明的文字,快捷键:ctrl+shift+/ -->
标签规范
- 标签分类
- 开始结束标签:<h1></h1>
- 自闭合标签: <br/>
- 标签嵌套
- 正确的嵌套:<h1><u>文本</u></h1>
- 错误的嵌套:<h1><u>文本</h1></u>
- 块级元素和行内元素
- 块级元素:在页面中以块形式展现,自己独占一行,后面的内容自动换行。
如:<p> <hr> <div>
- 行内元素:在页面中以行形式展现,不会换行。
如:<b> <i> <u> <span>
- div和span
div和span没有特殊的语义,是一个通用的容器标签。一般用来对其他标签进行分组、布局、设置样式等操作。
<div>: 是一个通用的内容容器(块级元素),可以用来嵌套其他标签。
<span>: 是一个通用的行内容器(行内元素),可以用来嵌套其他标签。
属性规范
属性用来给标签添加一些额外的信息,如给标签设置颜色,宽高等。
- 属性格式
<标签名 属性名="属性值"> 标签体 </标签名>
- 常见的属性
class: 定义元素的类名,用来对元素进行分类
id: 定义元素的唯一标识(强烈建议不要重复)
name: 定义给元素取得名称,用于表单提交
value: 定义元素内显示的值,用于表单提交
- 特殊符号
在html中像> < & \ ' ""
等符号不能直接显示,因为浏览器会把它们解释为标签的一部分。使用时,需要使用一些特殊的符号代替。
< | < | 小于 |
---|---|---|
> | > | 大于 |
& | & | 和号 |
' | ’ | 省略号 |
" | " | 引号 |
标签
1.普通标签
<p> 表示文本的段落
<h> 表示一个标题,从<h1>到<h6>
<hr> 表示分割线
<ul> 表示无序列表
<ol> 表示有序列表
<li> 表示列表项
<em> 表示文本着重,一般用斜体显示
<i> 表示文本斜体
<strong> 表示文本着重,表示文件包加粗
<b> 表示文本粗体
<font> 表示字体,可设置字体颜色、大小等
2.图片超链接标签
<!--
<img>常用属性:
src: 指定图片路径
alt: 图片加载失败时,显示的提示信息
text: 鼠标悬停时,显示的文字
width: 图片宽度
height: 图片高度
-->
<img> 图片标签
--3--超链接标签
<!--
<a>标签常用属性:
href: 超链接地址
target: 连接目标的打开方式
_slef: 在当前页打开
_blank: 在新标签页中打开
-->
<a> 超链接标签
3.列表标签
有序列表:
ol:
li:
无序列表:
ul:
li:
4.表单标签
--5--表单标签
<form> 表单标签,用于封装表单项
- action 提交数据的路径
- method 提交方式
<input> 表单项,用于采集用户数据的选项
- type表示表单项类型
*text:文本输入框,默认值
*password:密码输入框
*radio:单选框
注意:
1.要想让多个单选框实现单选的效果,则多个单选框的name属性值必须一样
2.一般会给每一个单选框提供一个value属性,指定其被选中后提交的值
3.checked属性,可以指定默认值
*checkbox:复选框
注意:
1.一般会给每一个单选框提供value属性,指定其被选中后提交的值
2.checked属性,可以指定默认值
*file:文件选中框
*hidden:隐藏域,用于提交一些信息
*按钮:
*submit:提交按钮,可以提交表单
*button:普通按钮
*image:图片提交按钮
*src属性指定图片路径
- name 表单项的名称标识
- value 表达项记录的值
- placeHolder 默认提示信息
- required 是否为必填项
<label> 表单项元素说明
- for 绑定被说明的表单项id
5.下拉选项
<select> 下拉列表标签
<optgroup> 下拉列表分组标签
<option> 下拉列表标签
<textarea> 文本域标签
*cols:指定列数,没遗憾有多少字符
*rows:默认多少行
6.表格标签
table:定义表格
width:宽度
border:边框
cellpadding:定义内容和单元格的距离
cellspacing:定义单元格之间的距离。如果指定为0,则单元格的线会合为一条、
bgcolor:背景色
align:对齐方式
tr:定义行
bgcolor:背景色
align:对齐方式
td:定义单元格
colspan:合并列
rowspan:合并行
th:定义表头单元格
<caption>:表格标题
<thead>:表示表格的头部分
<tbody>:表示表格的体部分
<tfoot>:表示表格的脚部分
新闻文本案例
案例演示
布局样式
<style>
div{
/*宽度:60%*/
width: 60%;
/*外边距居中*/
margin: auto;
}
</style>
用到标签
<p> 表示文本的段落
<h> 表示一个标题,从<h1>到<h6>
<hr> 表示分割线
<ul> 表示无序列表
<ol> 表示有序列表
<li> 表示列表项
<em> 表示文本着重,一般用斜体显示
<i> 表示文本斜体
<strong> 表示文本着重,表示文件包加粗
<b> 表示文本粗体
<font> 表示字体,可设置字体颜色、大小等
案例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新闻文本</title>
<style>
div{
/*宽度 60%*/
width: 60%;
/*外边距*/
margin: auto;
}
</style>
</head>
<body>
<!--标题-->
<div>
<h1>支付宝特权福利!芝麻分600以上用户惊喜,网友:幸福来得突然?</h1>
</div>
<!--作者信息-->
<div>
<i><font size="2" color="gray">作者:itheima 2088-08-08</font></i>
<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>
<p>随着互联网对我们生活的改变越来越大,信用这一词也被大家推上风口浪尖,不论是生活出行,还是其他的互联网服务,与信用体系已经密不可分了,马云当初说道,找老婆需要拼芝麻分,如今似乎也要成为现实,那么你们的芝麻分有多少了呢?</p>
</div>
</body>
</html>
头条页面案例
案例效果
布局样式
<style>
/*所有给div标签添加边框*/
div{
border: 1px solid red;
}
/*左侧图片的div样式*/
.left{
width: 20%;
float: left;
height: 500px;
}
/*中间正文的div样式*/
.center{
width: 59%;
float: left;
height: 500px;
}
/*右侧广告图片的div样式*/
.right{
width: 20%;
float: left;
height: 500px;
}
/*底部超链接的div样式*/
.footer{
/*清除浮动效果*/
clear: both;
/*文本对齐方式*/
text-align: center;
/*背景颜色*/
background: blue;
}
</style>
用到标签
<!--
<img>常用属性:
src: 指定图片路径
alt: 图片加载失败时,显示的提示信息
text: 鼠标悬停时,显示的文字
width: 图片宽度
height: 图片高度
-->
<img> 图片标签
<!--
<a>标签常用属性:
href: 超链接地址
target: 连接目标的打开方式
_slef: 在当前页打开
_blank: 在新标签页中打开
-->
<a> 超链接标签
案例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>头条页面</title>
<style>
/*给div标签添加边框*/
/*div{
border: 1px solid red;
}*/
/*左侧图片的div样式*/
.left{
width: 20%;
float: left;
}
/*中间正文的div样式*/
.center{
width: 60%;
float: left;
}
/*右侧广告图片的div样式*/
.right{
width: 20%;
float: left;
}
/*底部超链接的div样式*/
.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="gray">作者:itheima 2088-08-08</font></i>
<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>
<p>随着互联网对我们生活的改变越来越大,信用这一词也被大家推上风口浪尖,不论是生活出行,还是其他的互联网服务,与信用体系已经密不可分了,马云当初说道,找老婆需要拼芝麻分,如今似乎也要成为现实,那么你们的芝麻分有多少了呢?</p>
</div>
</div>
<!--右侧广告图片-->
<div class="right">
<img src="../img/ad1.jpg" width="100%"/>
<img src="../img/ad2.jpg" width="100%"/>
<img src="../img/ad3.jpg" width="100%"/>
<img src="../img/ad1.jpg" width="100%"/>
<img src="../img/ad2.jpg" width="100%"/>
<img src="../img/ad3.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>
注册页面案例
案例演示
布局样式
用到标签
<form> 表单标签,用于封装表单项
- action 提交数据的路径
- method 提交方式
<input> 表单项,用于采集用户数据的选项
- type表示表单项类型
- name 表单项的名称标识
- value 表达项记录的值
- placeHolder 默认提示信息
- required 是否为必填项
<label> 表单项元素说明
- for 绑定被说明的表单项id
<select> 下拉列表标签
<optgroup> 下拉列表分组标签
<option> 下拉列表标签
<textarea> 文本域标签
-
type的属性值
type=“text” 文本输入框
type=“password” 密码输入框
type=“tel” 电话输入框
type=“email” 邮件输入框
type=“radio” 单选按钮
type=“checkbox” 复选框
type=“date” 日期框
type=“time” 时间框type=“datetime” 时间日期框
type=“number” 数字框
type=“range” 滚动条数字框
type=“search” 可清除的文本框
type=“url” 网址框
type=“file” 文件上传框
type=“hidden” 隐藏区域
案例代码
<!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>注册详情</div>
<hr/>
<!--表单标签-->
<form action="#" method="get" autocomplete="off">
<div>
<label for="username">姓名:</label>
<input type="text" id="username" name="username" value="" placeholder=" 在此输入姓名" required/>
</div>
<div>
<label for="password">密码:</label>
<input type="password" id="password" name="password" value="" placeholder=" 在此输入密码" required/>
</div>
<div>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" value="" placeholder=" 在此输入邮箱" required/>
</div>
<div>
<label for="tel">手机:</label>
<input type="tel" id="tel" name="tel" value="" placeholder=" 在此输入手机" required/>
</div>
<hr/>
<div>
<label for="gender">性别:</label>
<input type="radio" id="gender" name="gender" value="men"/>男
<input type="radio" name="gender" value="women"/>女
</div>
<div>
<label for="hobby">爱好:</label>
<input type="checkbox" id="hobby" name="hobby" value="music"/>音乐
<input type="checkbox" name="hobby" value="movie"/>电影
<input type="checkbox" name="hobby" value="game"/>游戏
</div>
<div>
<label for="birthday">出生日期:</label>
<input type="date" id="birthday" name="birthday" value=""/>
</div>
<div>
<label for="city">所在城市:</label>
<select id="city" name="city">
<option>---请选择所在城市---</option>
<optgroup label="直辖市">
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
</optgroup>
<optgroup label="省会市">
<option>西安</option>
<option>杭州</option>
<option>郑州</option>
<option>武汉</option>
</optgroup>
</select>
</div>
<hr/>
<div>
<label for="desc">个性签名:</label>
<textarea id="desc" name="desc" rows="5" cols="40" placeholder=" 请写下您的与众不同"></textarea>
</div>
<hr/>
<button type="submit">注册</button>
<button type="reset">重置</button>
</form>
</div>
</body>
</html>