文章目录
一、基本语法
1.1 标签
1.1.1 空元素
- 不是所有元素都拥有开始标签，内容和结束标记。一些元素只有一个标签，叫做空元素。它是在开始标签中进行关闭的
第一行文档<br/>
第二行文档<br/>
1.1.2 嵌套元素
- 你也可以把元素放到其它元素之中——这被称作嵌套。比如，我们想要强调
第一个，可以将<b>标签包围第一个，这样b标签就是嵌套在了p标签中：
<p>这是<b>第一个</b>页面</p>
1.1.3 块级和行内
块级元素：独占一行。块级元素（block）在页面中以块的形式展现。相对于其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。比如
<p>，<hr>，<li>，<div>等。
行内元素: 行内显示。行内元素不会导致换行。通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。比如
<b>，<a>，<i>，<span>等。
- div和span
<div>是一个通用的内容容器，并没有任何特殊语义。它可以被用来对其它元素进行分组，一般用于样式化相关的需求。它是一个块级元素。
<span>是短语内容的通用行内容器，并没有任何特殊语义。它可以被用来编组元素以达到某种样式。它是一个行内元素。
1.2 注释
- 为了将一段HTML中的内容置为注释，你需要将其用特殊的记号 包括起来
<p>注释外！</p>
<!-- <p>注释内！</p> -->
2. HTML的属性*
标签属性，主要用于拓展标签。属性包含元素的额外信息，这些信息不会出现在实际的内容中。但是可以改变标签的一些行为或者提供数据，属性总是以
name = value的格式展现
- 属性名：同一个标签中，属性名不得重复。
- 大小写：属性和属性值对大小写不敏感。不过W3C标准中，推荐使用小写的属性/属性值。
- 引号：双引号是最常用的，不过使用单引号也没有问题。
- 常用属性：
| 属性名 | 作用 |
|---|---|
| class | 定义元素类名，用来选择和访问特定的元素 |
| id | 定义元素唯一标识符，在整个文档中必须是唯一的 |
| name | 定义元素名称，可以用于提交服务器的表单字段 |
| value | 定义在元素内显示的默认值 |
| style | 定义CSS样式，这些样式会覆盖之前设置的样式 |
- 特殊字符：
| 原义字符 | 等价字符引用 |
|---|---|
| < | < |
| > | > |
| " | " |
| ’ | ' |
| & | & |
| 空格 | |
*====*
2.1 案例分析——新闻文本
- 文本标签
| 标签名 | 作用 |
|---|---|
| p | 表示文本的一个段落 |
| h | 表示文档标题，<h1>–<h6> ，呈现了六个不同的级别的标题，<h1> 级别最高，而 <h6> 级别最低 |
| hr | 表示段落级元素之间的主题转换，一般显示为水平线 |
| li | 表示列表里的条目。 |
| ul | 表示一个无序列表，可含多个元素，无编号显示。 |
| ol | 表示一个有序列表，通常渲染为有带编号的列表 |
| em | 表示文本着重，一般用斜体显示 |
| strong | 表示文本重要，一般用粗体显示 |
| font | 表示字体，可以设置样式（已过时） |
| i | 表示斜体 |
| b | 表示加粗文本 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新闻简讯</title>
<style>
div{
width: 55%;
margin: auto;
}
/*具有斜体效果*/
i{
color:green;
size: 2px;
}
</style>
</head>
<body>
<div>
<h1>支付宝特权福利！芝麻分600以上用户惊喜，网友：幸福来得突然？</h1>
</div>
<div>
<i>作者：jack 2022-02-02</i>
</div>
<div>
<h2>支付宝特权福利！芝麻分600以上用户惊喜，网友：幸福来得突然？</h2>
</div>
<div>
<p>
这些年，马云的风头正盛，但是上个月他毅然辞去了阿里巴巴的职务。而马云所做的很多事情也的确改变了这个世界，特别是在移动支付领域，更是走在了世界的前列。如今中国的移动支付已经成为老百姓的必备，支付宝对中国社会的变革都带来了深远的影响。不过马云依然没有满足，他认为移动互联网将会成为人类的基础设施，而且这里面的机会和各种挑战还非常多。
</p>
<p>
支付宝的诞生就是为了解决淘宝网的客户们的买卖问题，而随着支付宝的用户的不断增加，支付宝也推出了一系列的附加功能。比如生活缴费、转账汇款、还信用卡、车主服务、公益理财等，往简单的说，支付宝既可以满足人们的日常生活，又可以利用芝麻信用进行资金周转服务。除了芝麻分能够进行周转以外，互联网信用体系下的产品多多，我们对比以下几个产品看看区别:
</p>
<p>
<ol>
<li><b>蚂蚁借呗</b>:芝麻分600并且受到邀请开通福利，这个就是支付宝贷款，直接秒杀了银行贷款和线下金融公司，是现在支付宝用户使用最多的。</li>
<li><b>微粒贷</b>：于2015年上线，主要面向QQ和微信征信极好的用户而推出，受到邀请才能申请开通，额度最高有30万，难度较大</li>
<li><b>蚂蚁巴士</b>：这个在微信 蚂蚁巴士 公众平台申请,对于信用分要求530分以上才可以,额度1-30万不等，目前非常火爆</li>
</ol>
</p>
<p>
说起支付宝中的芝麻信用功能，相信更是受到了许多人的推崇，因为随着自己使用的不断增多，信用分会慢慢提高，而达到了一个阶段，就可以获得许多的福利。而当我们的芝麻信用分可以达到600分以上的时候，会有令我们想象不到的惊喜，接下来就让我们一起来看看，具体都有哪些惊喜吧。
</p>
<b>一、芝麻分600以上福利之信用购。</b>网购相信大家都不陌生，但是很多时候，网购都有一个通病，就是没办法试用，导致很多人买了很多自己不喜欢的东西。但是只要你的支付宝芝麻分在650及以上，就能立马享有0元下单，收到货使用满意了再进行付款。还能享用美食的专属优惠，是不是很耐斯
<p>
<b>二、芝麻分600以上福利之信用免押。</b>芝麻信用与木鸟短租联合推出信用住宿服务，芝麻分600及以上的用户可享受免押入住特权。木鸟短租拥有全国50万套房源，是国内领先的短租民宿预订平台。包括大家知道的飞猪信用住，大部分酒店可以免押金入住，离店再交钱。
</p>
<p>
<b>三、芝麻分600以上福利之国际驾照。</b>我们经常听说的可能只是中国驾照，但现在芝麻分已经应用到了国际领域，只要你的芝麻分够550就可以免费办理国际驾照，也有不少人非常佩服马云，一个简单的芝麻分居然有如此大的功能，也从侧面反应出来马云在国际上的地位，这个国际驾照是由新西兰、德国、澳大利亚联合认证，可以在全球200多个国家通行，相信大家一定都有一个自驾全球的梦想吧，而现在支付宝就给了你一把钥匙，剩下的就你自己搞定了！有没有想带着你的女神来一次浪漫之旅呢？
</p>
<p>
随着互联网对我们生活的改变越来越大，信用这一词也被大家推上风口浪尖，不论是生活出行，还是其他的互联网服务，与信用体系已经密不可分了，马云当初说道，找老婆需要拼芝麻分，如今似乎也要成为现实，那么你们的芝麻分有多少了呢？
</p>
</div>
</body>
</html>
- 案例效果：
2.2 案例分析——头条页面
2.2.1 案例分析
- class属性值
- 使用class属性值，可以帮助我们区分div，更加精确的设置标签的样式
.class值{
属性名:属性值;
}
<标签名 class="class值">
提示: class是自定义的值
- 浮动布局和清除
float：指定一个元素应沿其容器的左侧或右侧放置，允许文本或者内联元素环绕它，该元素从网页的正常流动中移除，其他部分保持正常文档流顺序。
<!-- 加入浮动 -->
float：none；不浮动
float：left；左浮动
float：right；右浮动
<!-- 清除浮动 -->
clear：both；清除两侧浮动，此元素不再收浮动元素布局影响。
- 设置背景:
背景色:
background-color: black;
背景图:
background-image: url("../img/bg.png");
3.图片标签
| 标签名 | 作用 | 备注 |
|---|---|---|
| img | 可以显示一张图片(本地或网络) | src属性，这是一个必需的属性，表示图片的地址。 |
- 属性
| 属性名 | 作用 | 备注 |
|---|---|---|
| title | 鼠标悬停（hover）时显示文本。 | |
| alt | 图形不显示时的替换文本。 | |
| height | 图像的高度。 | |
| width | 图像的宽度。 |
4.超链接
| 标签名 | 作用 | 备注 |
|---|---|---|
| a | 表示超链接。 | href属性，表示超链接指向的URL地址。 |
- 属性
| 属性名 | 作用 |
|---|---|
| target | 页面的打开方式(_self当前页 _blank新标签页)。 |
2.2.2 案例效果
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新闻页面</title>
<style>
div{
margin: auto;
}
.left{
width: 20%;
float: left;
}
.center{
width: 60%;
float: left;
text-align: left;
}
.right{
width: 20%;
float: left;
}
.footer{
clear: both;
text-align: center;
background-color: cornflowerblue;
}
i{
color: green;
size: 3px;
}
a{
color: black;
/* 设置超链接下划线*/
text-decoration: white;
}
/* 设置超链接鼠标放上去的颜色变化*/
a:hover{
color: #ff0037;
}
</style>
</head>
<body>
<div class="head">
<img src="../imgs/j1.png" width="100%">
</div>
<div class="left">
<img src="../imgs/j3.png">
</div>
<div class="center">
<h1>支付宝特权福利！芝麻分600以上用户惊喜，网友：幸福来得突然？</h1>
<i >作者：jack 2022-02-02</i>
<hr>
<p>
这些年，马云的风头正盛，但是上个月他毅然辞去了阿里巴巴的职务。而马云所做的很多事情也的确改变了这个世界，特别是在移动支付领域，更是走在了世界的前列。如今中国的移动支付已经成为老百姓的必备，支付宝对中国社会的变革都带来了深远的影响。不过马云依然没有满足，他认为移动互联网将会成为人类的基础设施，而且这里面的机会和各种挑战还非常多。
</p>
<p>
支付宝的诞生就是为了解决淘宝网的客户们的买卖问题，而随着支付宝的用户的不断增加，支付宝也推出了一系列的附加功能。比如生活缴费、转账汇款、还信用卡、车主服务、公益理财等，往简单的说，支付宝既可以满足人们的日常生活，又可以利用芝麻信用进行资金周转服务。除了芝麻分能够进行周转以外，互联网信用体系下的产品多多，我们对比以下几个产品看看区别:
</p>
<img src="../imgs/2.jpg" width="100%">
<p>
<ol>
<li><b>蚂蚁借呗</b>:芝麻分600并且受到邀请开通福利，这个就是支付宝贷款，直接秒杀了银行贷款和线下金融公司，是现在支付宝用户使用最多的。</li>
<li><b>微粒贷</b>：于2015年上线，主要面向QQ和微信征信极好的用户而推出，受到邀请才能申请开通，额度最高有30万，难度较大</li>
<li><b>蚂蚁巴士</b>：这个在微信 蚂蚁巴士 公众平台申请,对于信用分要求530分以上才可以,额度1-30万不等，目前非常火爆</li>
</ol>
</p>
<p>
说起支付宝中的芝麻信用功能，相信更是受到了许多人的推崇，因为随着自己使用的不断增多，信用分会慢慢提高，而达到了一个阶段，就可以获得许多的福利。而当我们的芝麻信用分可以达到600分以上的时候，会有令我们想象不到的惊喜，接下来就让我们一起来看看，具体都有哪些惊喜吧。
</p>
<b>一、芝麻分600以上福利之信用购。</b>网购相信大家都不陌生，但是很多时候，网购都有一个通病，就是没办法试用，导致很多人买了很多自己不喜欢的东西。但是只要你的支付宝芝麻分在650及以上，就能立马享有0元下单，收到货使用满意了再进行付款。还能享用美食的专属优惠，是不是很耐斯
<p>
<b>二、芝麻分600以上福利之信用免押。</b>芝麻信用与木鸟短租联合推出信用住宿服务，芝麻分600及以上的用户可享受免押入住特权。木鸟短租拥有全国50万套房源，是国内领先的短租民宿预订平台。包括大家知道的飞猪信用住，大部分酒店可以免押金入住，离店再交钱。
</p>
<p>
<b>三、芝麻分600以上福利之国际驾照。</b>我们经常听说的可能只是中国驾照，但现在芝麻分已经应用到了国际领域，只要你的芝麻分够550就可以免费办理国际驾照，也有不少人非常佩服马云，一个简单的芝麻分居然有如此大的功能，也从侧面反应出来马云在国际上的地位，这个国际驾照是由新西兰、德国、澳大利亚联合认证，可以在全球200多个国家通行，相信大家一定都有一个自驾全球的梦想吧，而现在支付宝就给了你一把钥匙，剩下的就你自己搞定了！有没有想带着你的女神来一次浪漫之旅呢？
</p>
<p>
随着互联网对我们生活的改变越来越大，信用这一词也被大家推上风口浪尖，不论是生活出行，还是其他的互联网服务，与信用体系已经密不可分了，马云当初说道，找老婆需要拼芝麻分，如今似乎也要成为现实，那么你们的芝麻分有多少了呢？
</p>
</div>
<div class="right">
<img src="../imgs/ad3.jpg">
<img src="../imgs/ad2.jpg">
<img src="../imgs/ad1.jpg">
</div>
<div class="footer">
<a href="http://www.baidu.com">关于我们 </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>
2.3 案例分析——登陆界面
2.3.1 案例分析
1.表单标签
| 标签名 | 作用 | 备注 |
|---|---|---|
| form | 表示表单，是用来收集用户输入信息并向 Web 服务器提交的一个容器 |
表单属性
| 属性名 | 作用 | 备注 |
|---|---|---|
| action | 处理此表单信息的Web服务器的URL地址 | |
| method | 提交此表单信息到Web服务器的方式 | 可能的值有get和post，默认为get |
| autocomplete | 自动补全，指示表单元素是否能够拥有一个默认值，配合input标签使用 | HTML5 |
示例：
<!-- 一个简单的表单，会发送一个 GET 请求 -->
<form action="/web/login" method="get">
</form>
<!-- 一个简单的表单，发送 POST 请求 -->
<form action="/web/reg" method="post">
</form>
get与post提交方式:
post：指的是 HTTP POST 方法；表单数据会包含在表单体内然后发送给服务器。
get：指的是 HTTP GET 方法；表单数据会附加在action属性的URI中，并以 ‘?’ 作为分隔符，然后这样得到的 URI 再发送给服务器。
| 地址栏可见 | 数据安全 | 数据大小 | |
|---|---|---|---|
| GET | 可见 | 不安全 | 有限制（取决于浏览器） |
| POST | 不可见 | 相对安全 | 无限制 |
2.表单元素
表单元素指的是 input 元素、复选框、下拉框、提交按钮等
| 标签名 | 作用 | 备注 |
|---|---|---|
| label | 表单元素的说明，配合表单元素使用 | for属性值为相关表单元素的id属性值 |
| input | 表单中输入控件，多种输入类型，用于接受来自用户数据 | type属性值决定输入类型 |
| button | 页面中可点击的按钮，可以配合表单进行提交 | type属性值决定按钮类型 |
1.文本输入框
- label标签：表单的说明。
- for属性值：匹配input标签的id属性值
- input标签：输入控件。
- type属性：表示输入类型，text值为普通文本框
- id属性：表示标签唯一标识
- name属性：表示标签名称
- value属性：表示标签数据值
- 示例:
<form action="" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" value="tom">
</form>
2.提交用户名的表单
- button标签：表示按钮。
- type属性：表示按钮类型，submit值为提交按钮。
<form action="" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" value="tom">
<button type="submit" >login</button>
</form>
3.关于属性值
1.NAME和VALUE属性
| 属性名 | 作用 |
|---|---|
| name | <input>的名字，在提交整个表单数据时，可以用于区分属于不同<input>的值 |
| value | 这个<input>元素当前的值，允许用户通过页面输入 |
- 使用方式：
以name属性值作为键，value属性值作为值，构成键值对提交到服务器，多个键值对浏览器使用
&进行分隔。
2.TYPE属性
- input标签的type属性
1)基本的文本属性
| 属性值 | 作用 | 备注 |
|---|---|---|
| text | 单行文本字段 | |
| password | 单行文本字段，值被遮盖 | |
| 用于编辑 e-mail 的字段，可以对e-mail地址进行简单校验 | HTML5 |
<form action="#" method="get">
<label for="username">Username:</label>
<input type="text" id="username" name="username"> <br/>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br/>
<label for="email">Email: </label>
<input type="email" id="email" name="email"><br/>
<button type="submit"> login</button>
</form>
2)单选多选属性
| 属性值 | 作用 |
|---|---|
| radio | 单选按钮。 1. 在同一个”单选按钮组“中，所有单选按钮的 name 属性使用同一个值；一个单选按钮组中是，同一时间只有一个单选按钮可以被选择。 2. 必须使用 value 属性定义此控件被提交时的值。 3. 使用checked 必须指示控件是否缺省被选择。 |
| checkbox | 复选框。 1. 必须使用 value 属性定义此控件被提交时的值。 2. 使用 checked 属性指示控件是否被选择。 3. 选中多个值时，所有的值会构成一个数组而提交到Web服务器 |
<form action="#" method="get">
<label for="gender">性别:</label>
<input type="radio" id="gender" name="gender" value="boy"/>男
<input type="radio" name="gender" value="girl" checked="checked"/>女
<hr/>
<label for="hobby">爱好: </label>
<input type="checkbox" id="hobby" name="hobby" value="sport"/> 体育
<input type="checkbox" name="hobby" value="tech"/> 科技
<input type="checkbox" name="hobby" value="fun" /> 娱乐
<input type="checkbox" name="hobby" value="video" checked="checked"/> 短视频
</form>
3.按钮属性
| 属性值 | 作用 |
|---|---|
| button | 无行为按钮，用于结合JavaScript实现自定义动态效果 |
| submit | 提交按钮，用于提交表单数据。 |
| reset | 重置按钮，用于将表单中内容恢复为默认值。 |
| image | 图片提交按钮。必须使用 src 属性定义图片的来源及使用 alt 定义替代文本。还可以使用 height 和 width 属性以像素为单位定义图片的大小。 |
4.HTML5新增的type值
| 属性值 | 作用 | 备注 |
|---|---|---|
| date | HTML5 用于输入日期的控件 | 年，月，日，不包括时间 |
| time | HTML5 用于输入时间的控件 | 不含时区 |
| datetime-local | HTML5 用于输入日期时间的控件 | 不包含时区 |
| number | HTML5 用于输入浮点数的控件 | |
| range | HTML5 用于输入不精确值控件 | max-规定最大值 min-规定最小值 step-规定步进值 value-规定默认值 |
| search | HTML5 用于输入搜索字符串的单行文本字段 | 可以点击x清除内容 |
| tel | HTML5 用于输入电话号码的控件 | |
| url | HTML5 用于编辑URL的字段 | 可以校验URL地址格式 |
| file | 此控件可以让用户选择文件，用于文件上传。 | 使用 accept 属性可以定义控件可以选择的文件类型。 |
| hidden | 此控件用户在页面上不可见，但它的值会被提交到服务器，用于传递隐藏值 |
5.button标签的type属性
| 属性值 | 作用 | 备注 |
|---|---|---|
| submit | 此按钮将表单数据提交给服务器。如果未指定属性，或者属性动态更改为空值或无效值，则此值为默认值。 | 同 <input type="submit"/> |
| reset | 此按钮重置所有组件为初始值。 | 同<input type="reset"/> |
| button | 此按钮没有默认行为。它可以有与元素事件相关的客户端脚本，当事件出现时可触发。 | 同<input type="button"/> |
3.HTML5新增属性
| 属性名 | 作用 | 备注 |
|---|---|---|
| placeholder | 提示用户输入框的作用。用于提示的占位符文本不能包含回车或换行。 | 仅适用于当type 属性为text, search, tel, url or email时; 否则会被忽略。 |
| required | 这个属性指定用户在提交表单之前必须为该元素填充值 | 1. 布尔属性，可省略属性值表示true 2. 当type属性是hidden,image或者button类型时不可使用 |
| autocomplete | 自动补全，规定表单或输入字段是否应该自动完成。当自动完成开启，浏览器会基于用户之前的输入值自动填写值。 | 1. 开启为on，关闭为off 2. 可以设置指定的字段为off，关闭自动补全 |
4.更多表单元素
| 标签名 | 作用 | 备注 |
|---|---|---|
| select | 表单的控件，下拉选项菜单 | 与option配合实用 |
| optgroup | option的分组标签 | 与option配合实用 |
| option | select的子标签，表示一个选项 | |
| textarea | 表示多行纯文本编辑控件 | rows表示行高度， cols表示列宽度 |
| fieldset | 用来对表单中的控制元素进行分组(也包括 label 元素) | |
| legend | 用于表示它的fieldset内容的标题。 | fieldset 的子元素 |
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<style>
.table{
background: white;
width: 400px;
text-align: center;
margin: auto;
}
body{
background: url("../imgs/bg.png");
}
</style>
</head>
<body>
<form class="table">
<div>
<strong>注册详情</strong>
</div><hr>
<div>
<label for="name">姓名：</label>
<input type="text" id="name" name="table" placeholder="请输入姓名">
</div>
<div>
<label for="password">密码：</label>
<input type="password" id="password" placeholder="请输入密码">
</div>
<div>
<label for="email">邮箱：</label>
<input type="email" id="email" placeholder="请输入邮箱">
</div>
<div>
<label for="phone">手机：</label>
<input type="number" id="phone" placeholder="请输入手机号">
</div><hr>
<div>
<label for="gender">性别:</label>
<input type="radio" name="radio" id="gender" value="male">男
<input type="radio" name="radio" value="female">女
</div>
<div>
爱好:<input type="checkbox" name="hobby" id="hobby" value="music">音乐
<input type="checkbox" name="hobby" value="movie">电影
<input type="checkbox" name="hobby" value="game">游戏
</div>
<div>
<label>出生日期：</label>
<input type="date" id="birthday" name="birthday">
</div>
<div>
<label for="city">所在城市：</label>
<select id="city" name="city">
<option>北京</option>
<option>上海</option>
<option>深圳</option>
<option>重庆</option>
</select>
</div>
<div>
<label for="comment">个性签名：</label>
<textarea id="comment" cols="40" rows="5"></textarea>
</div>
<button type="submit">提交</button>
<button type="reset">重置</button>
</form>
</body>
</html>
扫一扫
694
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
