java学习笔记-HTML01

最新推荐文章于 2024-08-30 19:25:33 发布

原子都

最新推荐文章于 2024-08-30 19:25:33 发布

阅读量490

点赞数

分类专栏： JavaWeb学习笔记文章标签： html javaweb

本文链接：https://blog.csdn.net/weixin_50394734/article/details/111658503

版权

JavaWeb学习笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

课程相关

内容

0. 前端的学习和目标

为什么要学习前端的技术

/*
	后台程序员，肯定会和前端程序员沟通。
	没办法正常开展工作。
	所以要对的基础的前端知识要一个了解。
*/

前端学习的内容

/*
	前端三剑客
	先学HTML、CSS、
	后面再学JS
*/

前端的学习目标

/*
	了解
	看到能大概读懂，复制一份改改就可以运行
*/

1. 基本概念

1.1 网页

在这里插入图片描述

上图中我们是通过浏览器访问网站的，一个网站可以有N多个网页，每个网页可以由Html、CSS、JS这些技术组成。

1.2 `HTML`概念

HTML(HyperText Markup Language)：超文本标记语言

超文本：比普通文本更强大

标记：就是标签。HTML中基本上所有的内容呈现都是通过标签来实现的。

2014年10月，万维网联盟宣布，经过8年时间的艰苦努力，HTML5 的规范终于制作完成。

HTML4是之前比较主流的HTML版本；目前比较火的版本是HTML5，功能更强大，效果更绚丽。

1.3 标签

HTML 页面是由一系列的元素(Element)组成的，元素是通过标签创建出来的。

标签可以用于设置文本、图片、超链接等等。用<>表示

多数标签是成对出现的。

<!-- <h1>标签，代表一级标题 -->
<h1 >今天是个好日子</h1>

1.4 标签的结构

开始标签(Opening tag)：前面的一组尖括号，括号中间是标签的名称。表示元素的开始。

结束标签(Closing tag)：后面的一组尖括号，括号中间元素名之前包含了一个斜杠。表示元素的结束。

标签体（元素内容）：开始标签和结束标签之间的内容，就是标签体，也叫元素内容

标签图示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-D1hVwnSx-1608823860649)(day03_HTML-课堂笔记.assets/1605318213428-1605403696783.png)]

效果展示：

1.4 标签的属性

标签中还可以拥有属性，标签的附加信息。

属性只能添加到开始标签中。格式为：属性名=“属性值”

<!-- eg：align 属性，代表对齐方式。 align='center' 表示居中对齐-->
<h1 align=“center”>今天是个好日子</h1>

图示：

标签效果：

2. 快速入门

准备：在Idea中新建一个static Web项目，并在建好的项目下新建一个web文件夹（名字任意）

2.1 实现步骤

2.2 代码

<! DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>01-入门案例</title>
</head>

<!--我是一个注释，来注释掉我吧-->
<body>
<h1 align="center">这是我的入门案例</h1>
</body>
</html>

2.4 总结

HTML页面由众多元素组成，元素用标签来表示，使用标签的属性来丰盈标签。

我们要学习的内容：

掌握各个标签代表的含义
掌握标签中属性的含义

3. `HTML`基础语法

3.1 注释

注释用于解释说明程序

格式：

<!-- 注释的内容 -->

特点:

被注释掉的标签，不会被浏览器解析

3.2 标签

3.2.1 标签的分类

普通标签：<h1></h1> <u></u>，有标签体，标签体可以是其他标签
自闭合标签：<br />、<hr/>，无标签体，通过属性调整标签样式和内容

3.2.2标签的嵌套

外层标签不能是自闭和标签，因为没有标签体。

正确的嵌套格式：<h1><u>文本</u></h1>
错误的嵌套格式：<h1><u>文本</h1></u>

3.2.3 块级元素和行内元素

块级元素：自己独占一行，该元素后面的内容会被挤到下一行。 <p> <hr> <div>
行内元素：不独占一行，一行内可以有多个行内元素。 <b> <i> <u> <span>

div和span

仅仅是通用的内容容器，没有特殊语义

一般用他们两个实现页面的布局

<div>作为块元素，可以把需要独占一行的内容，放在div中

<span>作为行内元素，如果多个元素需要并列一行显示，每个元素都可以用span包裹。

3.3 属性

属性可以提供一些额外的信息，这些信息不会直接显示在内容中。但可以改变标签的样式或提供数据使用

属性的规范

同一个标签中属性的名称必须唯一
不区分大小写，建议使用小写
属性值可以使用单引号或双引号括起来，但引号一般配合双引号嵌套使用。

常用的属性

属性名	作用
class	定义元素类名，用来选择和访问特定的元素
id	定义元素唯一标识符，在整个文档中必须是唯一的
name	定义元素名称，主要指的是表单项元素的名称，可以用于提交服务器的表单项的key
value	定义在元素内显示的默认值
style	定义CSS样式，这些样式会覆盖之前设置的样式（第一天简单了解，第二天主要内容）

3.4 特殊字符

在 html 中，像< > ” 是语法本身的一部分。

如果要表示这些符号的本身，就需要使用特殊的表示方式了

常见的特殊符号

等价字符引用	原义字符
`<`	<
`>`	>
`"`	"
`'`	’
`&`	&
` `	不换行空格，该空格占据宽度受字体影响明显。
`&ensp;`	半角空格，占据的宽度正好是1/2个中文宽度，而且基本上不受字体影响。
`&emsp;`	全角空格，占据的宽度正好是1个中文宽度，而且基本上不受字体影响。

4. 常用标签

4.1 文本标签

标签名	作用	常用属性
p	表示文本的一个段落
h	表示文档标题，`<h1>–<h6>` ，呈现了六个不同的级别的标题，`<h1>` 级别最高，而 `<h6>` 级别最低
hr	表示段落级元素之间的主题转换，一般显示为水平线	size-大小 color-颜色
li	表示（有序/无序）列表里的条目。	放在ul/ol标签内使用
ul	表示一个无序列表，可含多个元素，无编号显示。	type-列表样式(disc实心圆、circle空心圆、square实心方块)
ol	表示一个有序列表，通常渲染为有带编号的列表	type-列表样式(1数字、A或a字母、I或i罗马字符) start-起始位置
em	表示文本着重，一般用斜体显示，语义化	同`i`
strong	表示文本重要，一般用粗体显示，语义化	同`b`
font	表示字体，可以设置样式（已过时）	size-大小 color 颜色

演示代码：

<body>
    <!--
        段落标签：<p>
    -->
    <p>这些年，马云的风头正盛，但是上个月他毅然辞去了阿里巴巴的职务。而马云所做的很多事情也的确改变了这个世界，特别是在移动支付领域，更是走在了世界的前列。如今中国的移动支付已经成为老百姓的必备，支付宝对中国社会的变革都带来了深远的影响。不过马云依然没有满足，他认为移动互联网将会成为人类的基础设施，而且这里面的机会和各种挑战还非常多。</p>
    <p>支付宝的诞生就是为了解决淘宝网的客户们的买卖问题，而随着支付宝的用户的不断增加，支付宝也推出了一系列的附加功能。比如生活缴费、转账汇款、还信用卡、车主服务、公益理财等，往简单的说，支付宝既可以满足人们的日常生活，又可以利用芝麻信用进行资金周转服务。除了芝麻分能够进行周转以外，互联网信用体系下的产品多多，我们对比以下几个产品看看区别:</p>

    <!--
         标题标签：<h1> ~ <h6>
     -->
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

    <!--
        水平线标签：<hr/>
        属性：
            size-大小
            color-颜色
    -->
    <hr size="4" color="red"/>

    <!--
        无序列表：<ul>
        属性：type-列表样式(disc实心圆、circle空心圆、square实心方块)
        列表项：<li>
    -->
    <ul type="circle">
        <li>javaEE</li>
        <li>HTML</li>
    </ul>

    <!--
        有序列表：<ol>
        属性：type-列表样式(1数字、A或a字母、I或i罗马字符)   start-起始位置
        列表项：<li>
    -->
    <ol type="1" start="10">
        <li>传智播客</li>
        <li>黑马程序员</li>
    </ol>

    <!--
        斜体标签：<i>    <em>
    -->
    <i>我倾斜了</i>
    <em>我倾斜了</em>
    <br/>

    <!--
        加粗标签：<strong>  <b>
    -->
    <strong>加粗文本</strong>
    <b>加粗文本</b>
    <br/>
    <!--
        文字标签：<font>
        属性：
            size-大小
            color-颜色
    -->
    <font size="5" color="yellow">这是一段文字</font>
</body

4.2 图片标签

img标签：可以显示一张图片(本地或网络)

<img src="../img/lyf1.jpg" alt="xxx">

必须属性
src：这是一个必需的属性，表示图片的地址。
其他属性
- title：鼠标悬停（hover）时显示文本。
- alt：图形不显示时的替换文本。
- height：图像的高度。不指定时默认使用图片的高度。
- width：图像的宽度。不指定时默认使用图片的宽度。
- 宽度和高度，只指定一个时，另一个会自动等比例调整。两个都设定，容易让图片变形。
相对路径&绝对路径

相对路径，相对于当前位置来说，要找的资源在哪里。 ./ 当前目录，../上级目录 ../../……

绝对路径，一般是相对于项目的资源的根目录，要找的资源在哪里。 /

4.3 超链接

a标签：表示超链接。点击超链接可以跳转到一个页面或打开一个文件等等.

<a href="01案例二：样式演示.html" target="_blank">点我跳转到样式演示</a>

相关属性：

href属性：表示超链接指向的URL地址。非必选属性。
target属性：页面的打开位置
- _self：当前页打开
- _blank：新标签页打开

样式相关：

超链接有默认的显示样式，字体颜色、悬停动作、下划线等。可以通过CSS样式修改掉

锚点

作用：快速定位到页面中指定位置

定义锚点：name属性：设置锚点名 name="anchor"

使用锚点：href属性：使用锚点href='#锚点名'

相关代码

<head>
    <meta charset="UTF-8">
    <title>超链接标签演示</title>
    <style>
        a{
            /*去掉超链接的下划线*/
            text-decoration: none;
            /*超链接的颜色*/
            color: black;
        }

        /*鼠标悬浮的样式控制*/
        a:hover{
            color: red;
        }
    </style>
</head>
<body>
    <!--
        超链接标签：<a>
        属性：
            href-跳转的地址
            target-跳转的方式(_self当前页面、_blank新标签页)
    -->
    <a href="01案例二：样式演示.html" target="_blank">点我跳转到样式演示</a>  <br/>
    <a href="http://www.itcast.cn" target="_blank">传智播客</a>  <br/>
    <a href="http://www.itheima.com" target="_self">黑马程序员</a>  <br/>
    <a href="http://www.itheima.com" target="_blank"><img src="../img/itheima.png" width="150px" height="50px"/></a>


    <!--
        锚点
            a:name =xxx
        跳转：
            href="#xxx"
     -->
    <br>
    <a href="#achor3" > 跳转</a>
    1. 小时候 <br>
    <a href=""  name="achor1">
        <img src="../img/lyf1.jpg" alt=""></a> <br>
    <br>
    2. 初出道
    <br>
    <a href="" name="achor2"> <img src="../img/lyf1.jpg" alt=""></a> <br>

    3. 现状 <br>
    <a href=""
       name="achor3"> <img src="../img/lyf1.jpg" alt=""></a> <br>
    
     <!--
            调用当前系统的邮件客户端，向指定的邮箱发邮件。
     -->
    <a href="mailto:sxw@itcast.cn" target="_blank">发送邮件</a>  <br/>
</body>

4.4 表单标签

收集用户填写的数据。

标签名	作用	备注
form	表示表单，是用来收集用户输入信息并向 Web 服务器提交的一个页面标签元素

举例：

//表单标签
<form action="#" method="  " autocomplete="  ">
    //表单项元素
    <input type=" " id=" " name=" " value="" placeholder=" "required/>
    <button type="  ">在按钮显示的文本内容</button>
    ...
</form>

4.4.1 表单和表单项的关系

表单中收集用户输入信息的选项称为一个表单项
如果表单标签中没有任何表单项，该表单就没有任何意义；
表单项如果不写在表单中，表单项收集的用户输入数据将不能被提交到后台。

4.4.2表单的属性

<form action="#" method="  " autocomplete="  "></form>

属性名	作用	备注
action	处理此表单信息的Web服务器的URL地址	`#` 表示请求到当前页面
method	提交此表单信息到Web服务器的方式	可能的值有get和post，默认为get
autocomplete	自动补全，根据历史输入记录自动提示补全	HTML5

举例：

<!-- 一个简单的表单，会发送一个 GET 请求 -->
<form action="#" method="get"></form>

<!-- 一个简单的表单，发送 POST 请求 -->
<form action="#" method="post"></form>

4.4.3 表单提交方式

method属性用于表示当前表单提交的方式，有两个取值：post和get

post：对应 HTTP 中POST ；表单数据会包含在请求体中，发送到后台服务器。
get：对应 HTTP 中GET；表单数据会作为参数添加在 action 属性的URL中，明文提交后台服务器。
- 参数和URL用 ‘?’ 作为分隔符
- 表单项的name值作为key，用户输入的值作为value，以key=value的形式拼接进URL
- 多组参数之间使用&拼接
- eg：http://localhost?username=zhangsan&password=123456
GET与POST对比：

地址栏可见数据安全数据大小
GET 参数可见不安全有限制（取决于浏览器）
POST 参数不可见相对安全无限制
http ==> https

	地址栏可见	数据安全	数据大小
GET	参数可见	不安全	有限制（取决于浏览器）
POST	参数不可见	相对安全	无限制

演示代码

<!--
    表单标签：<form>
        如果表单标签中没有任何表单项，该表单就没有任何意义；
        表单项如果不写在表单中，表单项收集的用户输入数据将不能被提交到后台。

    # 代表当前页面

    属性：
        action-提交的路径，接收数据的后台的路径
        method：表单提交的方式(get和post)
            get：表单项的数据会拼接在url中，明文提交到后台
            post：表单项的数据会在请求体中，提交到后台
        autocomplete-记录补全(on和off)
-->
<!--get方式的表单-->
<form action="#" method="post" autocomplete="off">
    用户名：<input type="text" name="username"/>
    <button type="submit">提交</button>
</form>

<!--post方式的表单-->
<form action="#" method="post" autocomplete="off">
    用户名：<input type="text" name="username"/>
    <button type="submit">提交</button>
</form>

4.5 表单项标签

表单中一个个收集用户输入信息的选项，称为表单项。

表单项需要在表单中，表单项中用户输入的数据才会在表单提交的时候被提交到后台服务器

常用表单项：

表单项标签：<label for="input标签的id"> 文本内容 </label> 解释说明其他表单项的（input）
表单项标签：<input type=" " id=" " name=" " value="" placeholder=" "required/> 多种类型数据
按钮标签：<button type=" ">在按钮显示的文本内容</button>

<!--
    表单项标签：<label>  解释说明其他表单项的（input）
    属性：for属性，属性值必须和对应表单项标签id属性值一致
	点击label说明文字，会自动定位到对应的表单项中

    表单项标签：<input>   多种类型数据
    属性：
        type -  表单项的类型
        id - 唯一标识
        name - 提交服务器的key
        value - 提交到服务器的值
        placeholder - 占位符，提示信息
        required - 是否必须

    按钮标签：<button>
    属性：
        type-按钮的类型(submit提交、reset重置、button普通按钮)
-->
<form action="#" method="post" autocomplete="off">
    <label for="username1">用户名：</label>
    <!-- 单行文本输入框
        提交表单的时候，表单项的值会提交到后台去，
        get：
            ?后面跟参数
            = 表单项name值作为key，用户输入的内容作为value，以key=value的形式发送
            & 多组参数以连接

        post：
            用户输入的内容放在请求体中提交，可以通过浏览器的开发者工具查看提交的参数和值
            F12 切换到 network选项卡  提交后可以查看

     -->
    <input type="text" id="username1" name="username2" value="" placeholder=" 请在此处输入用户名"
           required/>
    <input type="text"  name="password" value="" placeholder=" 请在此处输入密码"/>

    <!-- 把表单数据提交到后台服务器 -->
    <button type="submit">提交</button>

    <!-- 清空当前表单输入的内容 -->
    <button type="reset">重置</button>
    <!-- 普通的按钮，没有任何功能。之后可以配合js事件来实现更多的功能 -->
    <button type="button">按钮</button>
</form>

4.5.1 不同的表单项input:type

type属性值	作用	细节
`text`	单行文本输入框
`password`	密码框，自动脱敏
`radio`	单选框	在同一个”单选按钮组“中，所有选项的 name 属性使用同一个值，否则不能互斥
		必须为每个选项的value属性赋值，该值用于提交到后台
		每一个选项可以书写说明性文字，用于展示给用户查看
		一个单选选项组中，同一时间只有一个选项被选中。
		某个选项可以使用checked属性，表示缺省选择。
`checkbox`	多选框	在同一个”多选选项组“中，所有选项的 name 属性使用同一个值
		必须为每个选项的value属性赋值，该值用于提交到后台
		一个多选选项组中，同一时间可以有多个选项被选中。
		选中多个值时，所有选项的value值会构成一个数组后提交到Web服务器
		每一个选项可以书写说明性文字，用于展示给用户查看
		某个选项可以使用checked属性，表示缺省选择。
`datetime-local`	HTML5 用于输入日期时间的控件	不包含时区
`number`	HTML5 用于输入浮点数的控件
`hidden`	隐藏域	此控件用户在页面上不可见，但它的值会被提交到服务器，用于传递隐藏值ID
`******`	`*************************`	`********************************************`
`reset`	重置表单	同`<button type="reset">重置</button>`
`submit`	提交表单	同`<button type="submit">重置</button>`
`button`	普通按钮，点击无反应	同`<button type="button">重置</button>`
`******`	`*************************`	`********************************************`
`image`	提交表单的图片表单项	点击会复发表单提交
`file`	此控件可以让用户选择文件，用于文件上传。	使用 accept 属性可以定义控件可以选择的文件类型。
`email`	HTML5 用于电子邮件输入框	H5，有简单校验
`date`	HTML5 用于输入日期的控件	年，月，日，不包括时间
`time`	HTML5 用于输入时间的控件	不含时区
`range`	HTML5 用于输入不精确值控件	max-规定最大值 min-规定最小值 step-规定步进值 value-规定默认值
`search`	HTML5 用于输入搜索字符串的单行文本字段	可以点击`x`清除内容
`tel`	HTML5 用于输入电话号码的控件
`url`	HTML5 用于编辑URL的字段	可以校验URL地址格式

button标签的type属性

属性值	作用	备注
`submit`	此按钮将表单数据提交给服务器。如果未指定属性，或者属性动态更改为空值或无效值，则此值为默认值。	同 `<input type="submit"/>`
`reset`	此按钮重置所有组件为初始值。	同`<input type="reset"`/>
`button`	此按钮没有默认行为。它可以有与元素事件相关的客户端脚本，当事件出现时可触发。	同`<input type="button"/>`

其他表单项标签

标签名	作用	备注
`select`	下拉选项表单项	与option配合使用
`option`	select的子标签，表示一个选项	与select配合使用
`textarea`	文本域，多行文本输入框	rows表示行高度， cols表示列宽度（字符为单位）

`optgroup`	option的分组标签	与option配合实用

4.5.2 演示代码

<!--
    type属性
    <input type="text"/>       单行文本输入框
    <input type="password"/>   密码输入框
    <input type="email"/>      邮箱输入框
    <input type="radio"/>      单选框。必须有相同的name属性值，value属性真实提交的数据，checked属性默认选中
    <input type="checkbox"/>   多选框。必须有相同的name属性值，value属性真实提交的数据，checked属性默认选中


    <input type="date"/>       日期框
    <input type="time"/>       时间框
    <input type="datetime-local"/>  本地日期时间框
    <input type="number"/>     数字框
    <input type="range"/>      滚动条数值框  min-最小值   max-最大值  step-步进值
    <input type="search"/>     可清除文本框
    <input type="tel"/>        电话框
    <input type="url"/>        网址框
    <input type="file"/>       文件上传框
    <input type="hidden"/>     隐藏域   value属性设置实际提交的值
-->
<form action="#" method="get" autocomplete="off">
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username"/>  <br/>

    <label for="password">密码：</label>
    <input type="password" id="password" name="password"/> <br/>

    <label for="email">邮箱：</label>
    <input type="email" id="email" name="email"/> <br/>

    <label for="gender">性别：</label>
    <input type="radio" id="gender" name="gender" value="men"/>男
    <input type="radio" name="gender" value="women" checked/>女
    <input type="radio" name="gender" value="other"/>其他<br/>

    <label for="hobby">爱好：</label>
    <input type="checkbox" id="hobby" name="hobby" value="music" checked/>音乐
    <input type="checkbox" name="hobby" value="game"/>游戏 <br/>

    <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="age">年龄：</label>
    <input type="number" id="age" name="age"/> <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="itheima"/> <br/>

    <!-- 提交表单项 -->
    <input type="submit" value="点我提交">
    <!-- 提交图片表单项 -->
    <input type="image" src="../img/1.svg" alt="提交图片">
    
    <button type="submit">提交</button>
    <button type="reset">重置</button>
    <button type="button">普通按钮</button>
</form>

5. 样式&布局(理解)

5.1 div简单布局

div和span都能进行页面布局，比较常用的是div基本布局。可以通过css样式批量修改div的样式。

css样式的基本格式：

<!-- 在head标签中，通过style子标签编辑样式 -->
<head>
    <style>
        标签名{
            /* 可以为当前标签同时指定多个属性和值，这些属性和样式同时生效 */
            属性名1:属性值1;
            属性名2:属性值2;
            属性名3:属性值3;
            
            /* 一个属性名可以有多个属性值，这是复合属性 */
            属性名4:属性值4 属性值5 属性值6;
        }
    </style>
</head>

演示代码

<head>
    <meta charset="UTF-8">
    <title>样式演示</title>
    <style>
        div{
            /*显示边框*/
            border: 1px solid red;

            /*宽度 占屏幕的60%*/
            width: 60%;

            /*高度 500像素*/
            height: 500px;

            /*边框外边距*/
            margin: auto;
        }
    </style>
</head>
<body>
    <div>第一个div</div>
</body>

5.2 浮动布局

通过让页面元素像水面上的冰一样漂浮的方式进行布局。通过CSS的属性float进行布局。

5.2.1 浮动布局概念：

float 属性定义了元素往哪个方向浮动。

在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框（不独占一行的特殊块），而不论它本身是何种元素。

生成的块级元素就像漂浮在水上的几个冰块一样，让他们往左浮，他们就统一从左边开始排队；让他们往右浮动，就统一从右开始排队。

如果在一行之上剩余的宽度不足以提供给浮动的元素，那么这个元素会贴着上一个元素的底边，滑至下一行，直到某一行拥有足够的空间为止。

注意：

设置浮动的元素从网页的正常文档流中移除，其他元素保持正常文档流顺序。

5.2.2 float属性值

left 元素向左浮动
right 元素向右浮动
none 默认值。元素不浮动，相当于不设置浮动，仍存在正常的文档流之中排列。
inherit 规定应该从父元素继承 float 属性的值

5.2.3 clear属性

clear：清除浮动。规定当前元素的哪一侧不允许其他浮动元素。

设置浮动的元素会总正常的文档流中脱离，按照指定的浮动方向进行排布。所以会出现下面重叠的情况。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KXxa1RPm-1608823860668)(day03_HTML-课堂笔记.assets/1605339568792-1605403696783.png)]

清除footer左侧浮动，即可让footer出现在left的下方。

clear属性值：

left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。此时该元素不再受浮动元素布局影响
none 默认值。允许浮动元素出现在两侧。

5.3 text-align：文本对

left 左对齐
center 居中
right 右对齐

5.4 background：背景

background: 颜色背景色

值可以是表示颜色的英文。

eg：red、green、blue

也可以是RGB颜色的16进制表示形式。

eg：#FFFF00
background: url("") 背景图片

background是一个复合属性，可以设置多种类型的背景

一次性设置所有的背景属性

background: #00FF00 url(bgimage.gif) no-repeat fixed top;

也可以拆分成多个背景设置

background-color 规定要使用的背景颜色。 
background-image 规定要使用的背景图像。
background-repeat 规定如何重复背景图像。 
background-position 规定背景图像的位置。 
background-size 规定背景图片的尺寸。 
background-origin 规定背景图片的定位区域。 
background-clip 规定背景的绘制区域。 
background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动。

如果不设置其中的某个值，也不会出问题，比如下面的写法

background:#ff0000 url('smiley.gif')

通常建议使用background这个属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。

5.5 浮动文本对齐背景色代码

<head>
    <meta charset="UTF-8">
    <title>样式演示</title>
    <style>
        /*给div标签添加边框*/
        div{
            border: 1px solid red;
        }

        /*左侧图片的div样式*/
        .left{
            width: 10%;
            float: left;
            height: 600px;
        }

        /*中间正文的div样式*/
        .center{
            width: 25%;
            float: left;
            height: 500px;
        }

        /*右侧广告图片的div样式*/
        .right{
            width: 25%;
            float: left;
            height: 500px;
        }

        /*底部超链接的div样式*/
        .footer{
            /*
                清除浮动效果
                设置当前标签左右是否清除浮动
            */
            /*clear: both;*/
            clear: left;
            /*文本对齐方式*/
            text-align: center;
            /*背景颜色*/
            background: blue;
        }
    </style>
</head>
<body>
    <!--顶部登陆注册-->
    <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>
</body>

案例一：文本新闻

本案例使用到了文本标签和div简单布局。案例代码：

<head>
    <meta charset="UTF-8">
    <title>新闻文本</title>
    <style>
        div{
            /*宽度  60%*/
            width: 60%;

            /*外边距*/
            margin: auto;
        }
    </style>
</head>
<body>
    <div>
        
  
    <!--标题-->
    <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>
      </div>
</body>

案例二：头条页面

思路：先布局，后填充；先留边框，最后去除。

图片标签、超链接，float布局

案例步骤

创建初始页面，拷贝图片等素材。
整体布局。
实现顶部条（图片）。
实现导航条（图片）。
实现左侧分享区域（图片）。
实现中间正文区域（文本+图片）。
实现右侧广告区域（图片）。
实现底部页脚（链接）。

案例代码

<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> &nbsp;
        <a href="#">帮助中心</a> &nbsp;
        <a href="#">开放平台</a> &nbsp;
        <a href="#">诚聘英才</a> &nbsp;
        <a href="#">联系我们</a> &nbsp;
        <a href="#">法律声明</a> &nbsp;
        <a href="#">隐私政策</a> &nbsp;
        <a href="#">知识产权</a> &nbsp;
        <a href="#">廉政举报</a> &nbsp;
    </div>

案例三：注册页面

使用标签

img：图片标签

form：表单及常见表单项

使用样式

div基本布局，居中显示

background：背景图片

实现步骤

1. 创建HTML页面
2. 使用两个div划分区域（顶部 中间）
3. 使用style设置样式
4. 使用form设置表单
5. 实现页面跳转，从案例2跳转到案例3。

案例代码

<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"/>男 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="radio" name="gender" value="women"/>女 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </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>

            <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>

```

原子都

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
java学习笔记-HTML01

课程相关内容0. 前端的学习和目标为什么要学习前端的技术/* 后台程序员，肯定会和前端程序员沟通。没办法正常开展工作。所以要对的基础的前端知识要一个了解。*/前端学习的内容/* 前端三剑客先学HTML、CSS、后面再学JS*/前端的学习目标/* 了解看到能大概读懂，复制一份改改就可以运行*/1. 基本概念1.1 网页上图中我们是通过浏览器访问网站的，一个网站可以有N多个网页，每个网页可以由Html、CSS、JS这些技术组成。
复制链接

扫一扫

专栏目录