javaweb入门

最新推荐文章于 2024-10-12 10:30:00 发布

宇智波白给

最新推荐文章于 2024-10-12 10:30:00 发布

阅读量103

点赞数 1

分类专栏： javaweb 文章标签： html

原文链接：https://editor.youkuaiyun.com/md/?articleId=118712180

版权

javaweb 专栏收录该内容

22 篇文章

订阅专栏

1.结构分类

javaSE C/S结构 Client Server
javaEE B/S结构 Browser Server

2.前端的开发路流程

（产品经理）设计网页 --> （前端工程师）设计静态网页 -->（后台工程师）实现动态

3.网页的组成部分

一共页面由三部分组成：内容（结构）、表现和行为。

内容：我们在页面中可以看到的内容。使用 html 技术来展示
表现：指的是这些内容在页面上的展示形式。用 CSS 去修饰 html
行为：指的是页面中元素与输入设备交互的响应

4.HTML 简介

Hyper Text Markup Language （超文本标记语言）简写：HTML
HTML 通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，
通过文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）

5.创建HTML文件

HTML文件直接由浏览器进行解析执行

6.HTML文件的书写规范

Html 的代码注释

<!DOCTYPE html>  <!-- 约束，声明-->
<html lang = "zh_CN">  <!-- html标签表示 html 的开始 -->
    <head>
        <!-- 表示头部信息，一般包含三部分：title标题 css样式 js代码 -->
        <meta charset="UTF-8"> <!-- 表示当前页面使用 UTF-8字符集 -->
        <title> XXX <!-- 表示网页的标题 --></title>
    </head>
    
    <body>
        <!-- 显示网页的主题部分  -->
    </body>
</html>

CSS部分

CSS技术介绍

CSS是[层叠样式表单]。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言

CSS语法规则

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o3ttaXHq-1626254595080)(C:\Users\26049\Desktop\1.png)]

选择器：浏览器根据”选择器“决定受CSS样式影响的HTML元素（标签）
属性：属性是你要改变的样式名，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明。例如：p { color : bule }

多个声明：如果要定义不止一个声明，则需要用分号将每个声明分开。虽然最后一条声明的最后可以不加分号（但尽量在每条声明的末尾都加上分号）
例如：
p {
color : red;
font-size: 30px;
}

CSS注释：/* */

CSS和HTML的结合方式：

第一种：

在标签的style属性上设置"key:value value"，修改标签样式。

<div style="border: 1px solid red">你好</div>

这种方式的缺点：
1.如果标签多了，样式多了。代码量非常庞大
2.可读性非常差
3.CSS代码没有什么复用性可言

第二种

在head标签中，使用style标签来定义各种自己需要的css样式
格式如下：
XXX {
Key ：value value;
}

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/CSS">
        /*
        CSS代码段
        */
        div{
            border: 1px soild red;
        }
    </style>
</head>

这种方式的缺点：
1.只能在同一页面内复用代码，不能在多个页面中复用CSS代码
2.维护起来不方便，实际的项目中会有成百上千的页面，要到每个页面中去修改，工作量太大。

第三种

把CSS样式写成一个单独的CSS文件，再通过link标签引用即可复用

<link ref="stylesheet" type="text/css" href="XXX.css">

CSS选择器：

标签名选择器：

标签名选择器的格式：

标签名{
属性：值
}

id选择器

id选择器的格式：

#id{
属性：值
}

class选择器

class选择器的格式：

.class{
属性：值
}

组合选择器

组合选择器的格式：

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

CSS常用样式

1.颜色

color: XXX

2.宽度

width：XXX

3.高度

height：XXX

4.背景颜色

background-color: XXX

5.字体样式

font-size 字体大小
color 字体颜色

6.实线边框

border

7.div居中

margin-left：auto
margin-right：auto

8.文本居中

text-align：center

9.超链接去下划线

text-decoration：none

10.表格细线

table{
border : 1px solid black;
border - collapse : collapse; /* 将边框合并 */
}

td,th{
border : 1px solid black;
}

11.列表去修饰

ul{
list-style : none;
}