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>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
