01-HTML和CSS

傷城~ 2022-10-24 13:22 149阅读 0赞

# 一、HTML和CSS #

## 1.B/S软件的结构 ##

javaSE C/S–Client Server

B/S–Browser Server  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDExNjA5OA_size_16_color_FFFFFF_t_70_pic_center]

## 2.前端的开发流程 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDExNjA5OA_size_16_color_FFFFFF_t_70_pic_center 1]

## 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-水平线

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

<!DOCTYPE html> 
    <html lang="zh_CN">
    <head>
        <meta charset="UTF-8">
        <title>标题</title>
    </head>
    
    
    < >
        hello
    <button onclick="alert('妹妹好可爱')">按钮</button>
    妹妹<br/>好可爱
    <hr/>
    呀
    </body>
    </html>

![在这里插入图片描述][20210129185937951.png_pic_center]

**标签的语法：**

正确：<div><span>早安</span></div>
    	错误：<div><span>早安</div></span>
    
    
      正确：<div>早安</div>
    	错误：<div>早安
    <hr/>
        
    
      正确：<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>
        
        <font color="red" face = "宋体" size = "7">我是字体标签</font>
    </body>
    </html>

### ②特殊字符 ###

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

**常用的特殊字符：**

<      <
    >      >
    空格

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>特殊字符.html</title>
    </head>
    <body>
        
        我是<br>标签
        <br>
        妹妹 好可爱
    </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>
        
        <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>
        
        <ul type="none">
            <li>赵四</li>
            <li>刘能</li>
            <li>小沈阳</li>
            <li>宋小宝</li>
        </ul>
        <ol>
           <li>赵四</li>
           <li>刘能</li>
           <li>小沈阳</li>
           <li>宋小宝</li>
        </ol>
    </body>
    </html>

结果：  
![在这里插入图片描述][20210129185840406.png_pic_center]

### ⑥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>
        
        <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>
    
        <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>
    
        <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语法规则 ###

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

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

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

如：

p\{

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>
    
        <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 type="text/css">
            div{
        
                border: 1px solid red;
            }
            span{
        
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
    
        <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>
    
        <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>
    
        <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>
    
        <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；

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDExNjA5OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221024/4ee63cda0eaa49cea9b35ae6d9bbd88d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDExNjA5OA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221024/2c06982022554f78b00bb2e458d60f1e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDExNjA5OA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221024/d3f5e659d0df4a0ab913969004596ee4.png
[20210129185937951.png_pic_center]: /images/20221024/eb84a8c8a520420683e5a0c42b987e06.png
[20210129185840406.png_pic_center]: /images/20221024/a09e1a0af5e54cd8bca56377d837d728.png
[20210129185635223.png_pic_center]: /images/20221024/c88c91394d604e0eba4f5d3ed9b1ab41.png