01-HTML和CSS

最新推荐文章于 2022-01-27 21:03:45 发布

╰ー幸运儿

最新推荐文章于 2022-01-27 21:03:45 发布

阅读量261

点赞数

分类专栏： javaweb

本文链接：https://blog.csdn.net/weixin_44116098/article/details/113404487

版权

javaweb 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、HTML和CSS

1.B/S软件的结构

javaSE C/S–Client Server

B/S–Browser Server
在这里插入图片描述

2.前端的开发流程

在这里插入图片描述

3.网页的组成部分

页面由三部分组成，分别是内容(结构)、表现、行为

内容(结构)：是我们在页面中可以看到的数据。一般内容使用html技术来展示

表现：指这些内容在页面上的展示形式，如：布局，颜色，大小等，一般使用CSS技术实现

行为：指页面中元素与输入设备交互的响应，一般使用javascript技术实现

4.HTML简介(超文本标记语言)

Hyper Text Markup Language

HTML通过标签来标记要显示的网页中的各个部分，网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容(如：文字如何处理，画面如何安排，图片如何显示)

5.创建HTML文件

①创建一个静态的web工程

②在工程下创建html页面

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
    hello
</body>
</html>

6.HTML文件的书写规范

<html>	表示整个html页面的开始
	<head>	头信息
<title>标题</title>	标题
	</head>
	<body>	body是页面的主体内容
  	页面主体内容
	</body>
</html>	表示整个html页面的结束

html的代码注释：

7.html标签介绍

①标签格式：<标签名>封装的数据</标签名>

②标签名大写写不敏感

③标签拥有自己的属性：

1)基本属性：bgcolor = “red” 可以修改简单的样式效果

2)事件属性：onclick = “alert(‘你好！’);” 可以直接设置事件响应后的代码

④标签分为：单标签和双标签

单标签：<标签名> br-换行，hr-水平线

双标签：<标签名>…封装的数据…</标签名>
在这里插入图片描述

<!DOCTYPE html> <!-- 约束声明-->
<html lang="zh_CN"><!-- html标签标示html的开始  lang="zh_CN"表示中文
html标签中一般分为两部分，分别是：head和body-->
<head><!-- 表示头部信息，一般包含三部分内容：title标签，css样式，js代码-->
    <meta charset="UTF-8"><!-- 表示当前页面使用UTF-8字符集 -->
    <title>标题</title><!-- 表示标题 -->
</head>
<!-- bgcolor是背景颜色属性 -->
<!-- onclick表示单击(点击事件)
    alert()是javaScript语言提供的一个警告框函数
    他可以接收任意参数，参数就是警告框的函数信息-->
< ><!-- body标签是整个html页面显示的主题内容 -->
    hello
<button onclick="alert('妹妹好可爱')">按钮</button>
妹妹<br/>好可爱
<hr/>
呀
</body>
</html>

在这里插入图片描述

标签的语法：

<!-- ①标签不能交叉嵌套-->
	正确：<div><span>早安</span></div>
	错误：<div><span>早安</div></span>
<!-- ②标签必须正确关闭(闭合) -->
<!-- i.有文本内容的标签 -->
  正确：<div>早安</div>
	错误：<div>早安
<hr/>
    
<!-- ii.没有文本内容的标签 -->
  正确：<br/>
  错误：<br>
<hr/>
    
<!-- ③属性必须有值，属性值必须加引导 -->
  正确：<font color = "blue">早安</font>
	错误：<font color>早安</font>
<hr/>
    
<!-- ④注释不能嵌套 -->
  正确：<!-- 注释内容 --><br/>
  错误：<!-- 注释内容<!--  --> -->
<hr/>

8.常用标签介绍

①font字体标签

可以用来修改文本的字体、颜色、大小(尺寸)

color属性修改颜色、face属性修改字体、size属性修改文本大小

需求1：在网页上显示我是字体标签，并修改为宋体，颜色为红色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>font标签.html</title>
</head>
<body>
    <!-- 字体标签
     需求1：在网页上显示 我是字体标签，并修改为宋体，颜色为红色

     -->
    <font color="red" face = "宋体" size = "7">我是字体标签</font>
</body>
</html>

②特殊字符

需求1：把换行标签编程文本转换成字符显示在页面上

常用的特殊字符：

<      &lt;
>      &gt;
空格   &nbsp;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>特殊字符.html</title>
</head>
<body>
    <!-- 特殊字符
    需求1：把换行标签 编程文本 转换成字符显示在页面上
    -->
    我是&lt;br&gt;标签
    <br>
    妹妹&nbsp;好可爱
</body>
</html>

③标题标签

需求1：样式标题1-6

h1-h6都是标题标签

h1最大，h6最小

align属性是对齐属性

left 默认左对齐

center 居中

right 右对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题标签.html</title>
</head>
<body>
    <!--标题标签
    需求1：样式标题1-6
    -->
    <h1 align="left">标题1</h1>
    <h2 align="center">标题2</h2>
    <h3 align="right">标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>

</body>
</html>

④超链接(重点)

在网页中多有点击之后可以跳转的内容都是超链接

需求1：普通的超链接

href属性设置连接的地址

target属性设置哪个目标进行跳转

_self 表示当前页面(默认)

_blank 表示打开新页面进行跳转

⑤列表标签

有序列表、无序列表

需求1：使用无序列表方式，把东北F4：赵四、刘能、小沈阳、宋小宝，展示出来

ul是无序列表

type属性可以修改列表项前面的符号

ol是有序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无序列表.html</title>
</head>
<body>
    <!-- 列表标签
     需求1：使用无序列表方式，把东北F4：赵四、刘能、小沈阳、宋小宝，展示出来
     -->
    <ul type="none">
        <li>赵四</li>
        <li>刘能</li>
        <li>小沈阳</li>
        <li>宋小宝</li>
    </ul>
    <ol>
       <li>赵四</li>
       <li>刘能</li>
       <li>小沈阳</li>
       <li>宋小宝</li>
    </ol>
</body>
</html>

结果：
在这里插入图片描述

⑥img标签

img标签可以在html页面上显示图片

需求1：使用img标签显示一章美女的照片时，并修改宽高和边框属性

img标签是图片标签，用来显示图片

src属性可以设置图片的路径

width属性设置图片的路径

height属性设置图片的高度

border属性设置图片边框大小

alt属性设置当指定路径找不到图片时，用来代替显示的文本内容

在javaSE中分为相对路径和绝对路径：

相对路径：从工程名开始算

绝对路径：盘符:/目录/文件名

在web中路径分为相对路径和绝对路径：

相对路径：

. 表示当前文件所在的目录

… 表示当前文件所在的上一级目录

文件名表示当前文件所在目录的文件，相当于./文件名，./可以省略

绝对路径：

正确格式是：http://ip:port/工程名/资源路径

错误格式是：盘符:/目录/文件名

⑦表格标签(重点)

需求1：做一个带表头的，三行三列的表格，并显示边框

需求2：修改表格的高度和宽度，表格的对齐方式，单元格间距

table 标签是表格标签

border 设置表格标签

width 设置表格宽度

height 设置表格高度

cellspacing 设置单元格间距

tr 是行标签

th 是表头标签

td 是单元格标签

align 设置单元格文本对齐方式

b 是加粗标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
    <!--
     需求1：做一个带表头的，三行三列的表格，并显示边框
     需求2：修改表格的高度和宽度，表格的对齐方式，单元格间距
    -->
    <table align="center" border="1" width="300" height = "300" cellspacing="0">
        <tr>
            <th>1.1</th>
            <th>1.2</th>
            <th>1.3</th>
        </tr>
        <tr>
            <td>2.1</td>
            <td>2.2</td>
            <td>2.3</td>
        </tr>
        <tr>
            <td>3.1</td>
            <td>3.2</td>
            <td>3.3</td>
        </tr>
    </table>
</body>
</html>

⑧跨行跨列表格(次重点)

需求1：新建一个5行5列的表格，第一行第一列的单元格要跨两列，第二行第一列的单元格跨两行，第四行第四列的单元格跨两行两列

colspan 属性设置跨列

rowspan 属性设置跨行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格的跨行跨列</title>
</head>
<body>
<!--需求1：新建一个5行5列的表格，
    第一行第一列的单元格要跨两列，
    第二行第一列的单元格跨两行，
    第四行第四列的单元格跨两行两列-->
    <table width="500" height = "500" cellspacing="0" border="1">
        <tr>
            <td colspan="2">1.1</td>
            <td>1.3</td>
            <td>1.4</td>
            <td>1.5</td>
        </tr>
        <tr>
            <td rowspan="2">2.1</td>
            <td>2.2</td>
            <td>2.3</td>
            <td>2.4</td>
            <td>2.5</td>
        </tr>
        <tr>
            <td>3.2</td>
            <td>3.3</td>
            <td>3.4</td>
            <td>3.5</td>
        </tr>
        <tr>
            <td>4.1</td>
            <td>4.2</td>
            <td>4.3</td>
            <td rowspan="2" colspan="2">4.4</td>
        </tr>
        <tr>
            <td>5.1</td>
            <td>5.2</td>
            <td>5.3</td>
        </tr>
    </table>
</body>
</html>

⑨了解iframe框架标签(内嵌窗口)

iframe标签可以在一个html页面上打开一个小窗口，去加载一个单独的页面

iframe和a标签组合使用的步骤：

1)在iframe标签中使用name属性定义一个名称

2)在a标签的target属性上设置iframe的属性值

⑩表单标签(重点)

什么是表单？

表单是html页面中，用来收集用户信息的所有元素集合，然后把这些信息发送给服务器

需求1：创建一个个人信息注册的表单页面，包含用户名，密码，确认密码，性别(单选)，兴趣爱好(多选)，国籍(下拉列表)，隐藏域，自我评价(多行文本域)，重置，提交

form标签就是表单

input type = "text"是文本输入框，value属性设置显示内容

input type = "password"是密码输入框，value设置显示内容

input type = “radio” 是单选框，name属性可以对其进行分组，checked = "checked"表示默认选中

input type = "checkbox"是复选框

input type = "reset"是重置按钮，value属性修改按钮上的文本

input type = "submit"是提交按钮，value属性修改按钮上的文本

input type = "button"是按钮，value属性修改按钮上的文本

input type = "file"是文件上传

input type = "hidden"是隐藏域，当我们要发送某些信息，而这些信息不需要用户参与，就可以使用隐藏域(提交时同时发送给服务器)

select标签是下拉列表框

option标签是下拉列表框中的选项 selected = "selected"设置默认选中

textarea 表示多行文本输入框(其实标签和结束标签中的内容是默认值)

rows 属性设置可以显示几行的高度

cols 属性设置每行可以显示几个字符宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>
<!--需求1：创建一个个人信息注册的表单页面，
包含用户名，密码，确认密码，性别(单选)，兴趣爱好(多选)，国籍(下拉列表)，
隐藏域，自我评价(多行文本域)，重置，提交-->
    <form>
        <h1 align="center">用户注册</h1>
        <table align="center">
            <tr>
                <td>用户名称：</td>
                <td>
                    <input type="text" value="默认值"/>
                </td>
            </tr>
            <tr>
                <td>用户密码：</td>
                <td>
                    <input type="password" value="abc">
                </td>
            </tr>
            <tr>
                <td>确认密码：</td>
                <td>
                    <input type="password" value="abc">
                </td>
            </tr>
            <tr>
                <td>性别：</td>
                <td>
                    <input type="radio" name = "sex" checked = "checked">男<input type="radio" name="sex">女
                </td>
            </tr>
            <tr>
                <td>兴趣爱好：</td>
                <td>
                    <input type="checkbox"/>Java<input type="checkbox"/>JavaScript<input type="checkbox"/>C++
                </td>
            </tr>
            <tr>
                <td>国籍：</td>
                <td>
                    <select>
                        <option>--请选择国籍--</option>
                        <option>中国</option>
                        <option>美国</option>
                        <option>小日本</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>自我评价：</td>
                <td>
                    <textarea rows="10" cols="20">默认值</textarea>
                </td>
            </tr>
            <tr>
                <td><input type="reset"/></td>
                <td align="center"><input type="submit"/></td>
            </tr>

        </table>
    </form>
</body>
</html>

form标签就是表单标签

action属性设置提交的服务器地址

method属性设置提交的方式GET(默认值)或POST

表单提交的时候，数据没有发送给服务器的三种情况：

1)表单项没有name属性值

2)单选、复选(下拉列表中的option标签)都需要添加value属性，以便发送给服务器

3)表单项不在提交的form标签中

GET请求的特点：

1)浏览器地址栏中的地址是：action属性[+?+请求参数]

请求参数的格式是：name = value&name = value

2)不安全

3)它有数据长度的限制

POST请求的特点：

1)浏览器地址栏中只有action属性值

2)相对于GET请求要安全

3)理论上没有数据长度的限制

⑪其他标签

需求1：div、span、p标签的演示

div标签默认独占一行

span标签长度是封装数据的长度

p段落标签默认会在段落上方或下方各空出一行来(如果已有就不再空)

html最后的练习2：创建登录的表单，包含用户名，密码框输入，并结合table标签排版，让他看上去整齐一点

9.CSS介绍

①CSS技术介绍

CSS是[层叠样式表单]，是用于(增强)控制网页杨是并允许将样式信息与网页信息分离的一种标记性语言

②CSS语法规则

在这里插入图片描述
浏览器：浏览器根据“选择器”决定受CSS样式影响的HTML元素(标签)

属性(property)：是要修改的样式名，且每个属性都有一个值，属性和值被冒号分开，且由花括号包围，这样组成了一个完整的样式声明(declaration)，如：p{color:blue}

多个声明：如果要定义不止一个声明，则需要用分号将每个声明分开，虽然最后一条声明的最后可以不加分号(但尽量在每条声明的末尾都加上分号)

如：

color:red;

font-size:30px;

}

注：一般一行只描述一个属性

CSS注释：/注释内容/

③CSS和HTML的结合方式

方式一：在标签打的style属性上设置"key:value value;"，修改标签样式

需求1：分别定义两个div、span标签，分别修改每个div标签的样式为：边框1个像素，实线，红色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--需求1：分别定义两个div、span标签，分别修改每个div标签的样式为：边框1个像素，实线，红色-->
    <div style="border:1px solid red;">div标签1</div>
    <div style="border:1px solid red;">div标签2</div>
    <span style="border:1px solid red;">span标签1</span>
    <span style="border:1px solid red;">span标签2</span>
</body>
</html>

这种方式的缺点？

1)如果标签多，样式多，代码量大

2)可读性非常差

3)CSS代码没什么复用性可言

方式二：在head标签中，使用style标签定义各种自己需要的CSS样式

格式如下：

xxx{
Key:value value;
}

需求1：分别定义两个div、span标签，分别修改每个div标签的样式为：边框1个像素，实线，红色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- style标签专门用来定义CSS样式代码 -->
    <style type="text/css">
        div{
            border: 1px solid red;
        }
        span{
            border: 1px solid red;
        }
    </style>
</head>
<body>
<!--需求1：分别定义两个div、span标签，分别秀爱每个div标签的样式为：边框1个像素，实线，红色-->
    <div>div标签1</div>
    <div>div标签2</div>

    <span>span标签1</span>
    <span>span标签2</span>
</body>
</html>

缺点：

1)只能在同一页面内复用代码，不能再多个页面中复用css代码

2)维护起来不方便，实际的项目会有成千上万的页面，要到每个页面中去修改，工作量太大

方式三：

把CSS样式使用html的标签导入css样式文件

④CSS选择器

1)标签名选择器

格式：

标签名{
属性：值;
}

标签名选择器：可以决定哪些标签被动的使用这个样式

需求1：在所以div标签上修改字体颜色为蓝色，字体大小30个像素，边框为1像素黄色实线，且修改所有span标签的字体颜色为黄色，字体大小20个像素，边框为5像素蓝色虚线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>
    <style type="text/css">
        div{
            border: 1px solid yellow;
            color: blue;
            font-size: 30px;
        }
        span{
            border: 5px dashed blue;
            color: yellow;
            font-size: 20px;
        }
    </style>

</head>
<body>
<!--需求1：在所以div标签上修改字体颜色为蓝色，字体大小30个像素，边框为1像素黄色实线，
且修改所有span标签的字体颜色为黄色，字体大小20个像素，边框为5像素蓝色虚线-->
    <div>div标签1</div>
    <div>div标签2</div>

    <span>span标签1</span>
    <span>span标签2</span>
</body>
</html>

2)id选择器

格式：

#id属性值{
属性：值；
}

id选择器可以通过id属性选择性的去使用这个样式

需求1：分别定义两个div标签

第一个div标签定义id为id001，然后根据id属性定义css样式修改字体颜色为蓝色，字体大小30像素，边框为1像素黄色实线

第二个div标签定义id为id002，然后根据id属性定义css样式修改的字体颜色为红色，字体大小20个像素，边框为5像素蓝色点线

3)class选择器(类选择器)

格式：

.class属性值{
属性：值；
}

需求1：修改class属性值为class01的span或div标签，字体颜色为蓝色，字体大小30个像素，边框为1像素黄色实线

需求2：修改class属性值为class02的div标签，字体颜色为灰色，字体大小26个像素，边框为1像素红色实线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .class01{
            color: blue;
            font-size: 30px;
            border: 1px solid yellow;
        }
        .class02{
            color: grey;
            font-size: 26px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<!--需求1：修改class属性值为class01的span或div标签，字体颜色为蓝色，字体大小30个像素，边框为1像素黄色实线
需求2：修改class属性值为class02的div标签，字体颜色为灰色，字体大小26个像素，边框为1像素红色实线-->
    <div class="class01">div标签1class01</div>
    <div class="class02">div标签</div>
    <span class="class01">span标签class01</span>
    <span>span标签2</span>
</body>
</html>

4)组合选择器

格式：

选择器1，选择器2…选择器n{
属性：值；
}

可以让多个选择器共用同一个css样式代码

需求1：修改class = “class01”的div标签和id = “id01”所有的span标签字体颜色为蓝色，字体大小20个像素，边框为1像素黄色实线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组合选择器</title>
    <style type="text/css">
        .class01,#id01{
            color: blue;
            font-size: 20px;
            border: 1px yellow solid;
        }
    </style>
</head>
<body>
<!--需求1：修改class = “class01”的div标签和id = “id01”
所有的span标签字体颜色为蓝色，字体大小20个像素，边框为1像素黄色实线-->
    <div class="class01">div标签class01</div>
    <span id="id01">span标签</span><br/>
    <div>div标签</div>
    <div>div标签id01</div><br/>

</body>
</html>

⑤常用样式

1)字体颜色

color：red；

颜色可以写颜色名，如：black，blue，red，green等，也可以写rgb值和十六进制标示值，如：rgb(255,0,0)，#00F6DE，如果写十六进制值必须加#

2)宽度

width：19px；

宽度可以写像素值：19px；也可以写百分比值：20%；

3)高度

height：20px；

4）字体大小

font-size:20px；字体大小

5)红色1像素实现边框

border：1px solid red；

6)DIV居中

margin-left：auto；

margin-right：auto；

7)文本居中

text-align：center；

8)超链接去下划线

text-decoration：none；

9)表格细线

table{

border：1px solid black；/设置边框/

border-collapse：collapse；/将边框合并/

}

td，th{

border：1px solid black；/设置边框/

}

10)列表取出修饰

ul{

list-style：none；

}

╰ー幸运儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
01-HTML和CSS

一、HTML和CSS1.B/S软件的结构javaSE C/S–Client ServerB/S–Browser Server2.前端的开发流程3.网页的组成部分页面由三部分组成，分别是内容(结构)、表现、行为内容(结构)：是我们在页面中可以看到的数据。一般内容使用html技术来展示表现：指这些内容在页面上的展示形式，如：布局，颜色，大小等，一般使用CSS技术实现行为：指页面中元素与输入设备交互的响应，一般使用javascript技术实现4.HTML简介(超文本标记语言)
复制链接

扫一扫