当前位置：首页 > news >正文

Web学习day05

news 2025/7/9 16:18:35

html&css

文章目录

一、web开发

1.1工作流程

1.2开发技术

二、HTML

2.1HTML规范

2.2基础标签

2.2.1标题

2.2.2水平线

2.2.3段落和换行

2.2.4文字效果

2.2.5超链接

2.2.6图像

2.2.7音频和视频

三、布局标签

3.1列表

3.2容器

3.3表格

3.4表单标签

四、CSS

4.1引入方式

4.2选择器

4.3样式

总结

一、web开发

1.1工作流程

1. 浏览器先向前端服务器请求前端资源，也就是我们所说的网页

2. 浏览器再向后台服务器发起请求，获取数据

3. 浏览器将得到的后台数据填充到网页上，然后展示给用户去看

1.2开发技术

1. html 用于构建网站的基础结构的

2. css 用于美化页面的，作用和化妆或者整容作用一样

3. Javascript 实现网页和用户的交互

二、HTML

HTML (Hyper Text Markup Language)，指的是超文本标记语言，是一种用来描述网页的语言。

超文本：比普通文本功能强大。它可以引入音频、视频、图片、文字、超链接等等……

标记语言：使用一批特殊的标签来表达某些特殊意义，进而组装出网页的语言

2.1HTML规范

<!DOCTYPE html> 用于声明这是一个HTML的文档，要求必须在页面的第一行

HTML页面主要由HTML标签和HTML文本两部分组成

HTML标签：由HTML定义好的一类固定文字，比如<html>

HTML文本：除了标签之外的其它文字

HTML标签分为两大类:双标签和单标签

双标签：通常是成对出现的，比如<html></html>

单标签：单个出现，比如<hr>

绝大多数的标签都具有属性，属性用来具体控制标签的某些特性。例如:<hr color="red">

HTML标签是不区分大小写的

2.2基础标签

2.2.1标题

作用：用于将普通文字变成标题

语法：<hn>普通文字</hn>

n表示范围：1~6 特点：数值越大，字体越小

属性： align：对齐方式取值：left（默认值，左对齐）、 center（居中）、 right（右对齐）

2.2.2水平线

作用：在页面上生成一条横线

语法：<hr/>

属性：

color：颜色，用于设置颜色线条颜色，通过英文字母或者RGB表示

width：宽度，用于设置线条的长度，可以是用绝对像素或者百分百设置

2.2.3段落和换行

作用：用于文字的分段和换行

语法：

换行：  

分段： 一段内容，使用这个标签的效果是一段文字的上下会留出空白

2.2.4文字效果

文字：加粗标签

文字：斜体标签

文字：下划线标签，在文字的下方有一条横线

<center>文字</center>: 文字居中显示

文字: 定义文字字体(face)，大小(size:1-7)，颜色(color)

2.2.5超链接

作用：用于给文字添加超链接效果，点击文字是跳转一个目标页面

语法：<a>文字</a>

属性：

href：用于指定超链接的跳转地址，支持绝对路径和相对路径两种写法

target：用于指定页面打开方式(_self 使用当前页签打开, _blank 使用新页签打开)

2.2.6图像

作用：用于在HTML页面中引入一个图片

语法：<img/>

属性: src：用于指定图片资源的路径，支持绝对路径和相对路径两种写法

alt：用于在指定咋图片丢失时要显示的文字提示

width：用于设置图片宽度（浏览器会根据设置的宽度按照比例自动调整高度）

2.2.7音频和视频

audio：定义音频。支持的音频格式：MP3、WAV、OGG

video：定义视频。支持的音频格式：MP4, WebM、OGG

src：规定视频的 URL
controls：显示播放控件

三、布局标签

3.1列表

作用：用于文字排版

语法：

有序列表
<ol>
<li>文字</li>
<li>文字</li>
</ol>

无序列表
<ul>
<li>文字</li>
<li>文字</li>
</ul>

3.2容器

作用：存储内容的容器（盒子），通常与css技术结合使用，完成页面的布局和美化

语法：

<div>块级元素,独自占用一行</div>

行内元素,内容有多大，就占用多少

3.3表格

作用：表格可以让数据更有条理性的展示

table 表格
   width: 设置宽度
   height: 设置高度
   border: 设置边框
   align: 水平位置
   cellspacing: 外边距
   cellpadding: 内边距
tr
   bgcolor 设置一行的背景色
td
   bgcolor 设置一个单元格的背景色
   align 设置单元格内文字的水平位置
   height 设置单元格高度

3.4表单标签

HTML表单：用于采集用户数据，并发送给后端服务器

应用场景：用户注册、用户登录、个人信息修改...

form: 表示一个表单，里面会包含多个表单项，它的作用是收集表单项中的所有数据信息，发送到后台服务器
   action：表单的提交地址，暂时使用#代替（#：表示当前页面）
   method：表单的提交方式，有二种：get（默认值） | post
       get：请求参数在地址栏拼接，不安全，对参数总长度有限制
       post：参数不在地址栏拼接，相对安全，对参数总长度没有限制
   表单项类型，支持文本框、下拉框、文本域
   i）文本框
       1）text：普通文本框
       2）password：密码框
       3）date：日期选择框
       4）radio：单选框
       5）checkbox：复选框
       6）file：文件上传
       7）submit：提交按钮
       8）reset：重置按钮
       9）button：普通按钮，通常与js结合使用
       10) hidden: 隐藏
   ii）下拉框
    select 定义下拉框
    option 定义下拉框中的具体内容
   iii）文本域
        textarea

四、CSS

CSS (Cascading Style Sheets) 翻译为指层叠样式表，用于HTML页面的美化

层叠样式是指对同一个HTML标签添加多种不同的样式（字号、字体、颜色等等），所有样式会叠加在一起展示出效果

4.1引入方式

HTML引入CSS的三种方式：

行内样式：定义在标签的属性中，作用于当前标签

内部样式：定义在页面的head部分，作用于当前页面中的所有（部分）标签

外部样式：定义在页面外部，通过link标签引入到页面中，作用于所有引入此样式文件的页面标签

CSS样式使用优先级: 行内样式 > 内部和外部样式(内部和外部样式，后面覆盖前面)

4.2选择器

选择器作用：找出页面一组特定的标签

标签选择器使用标签名称选中一类标签语法：标签名{css样式}

类选择器使用class属性选中一类标签语法：.class{css样式}

id选择器使用id属性选中一个标签语法：#id{css样式}

4.3样式

设置文字的颜色，大小，字体，风格，加粗以及行高，缩进，有无下划线等

font-size: 20px; /* 设置字号 */
font-family: '楷体'; /* 设置字体 */
font-weight: bold; /* 设置文字加粗（ normal:正常[默认], bold:粗体, 数值 ) */
font-style: italic; /* 设置文字倾斜（ normal:正常[默认], italic:倾斜） */
color：red; /* 设置字体颜色 */
line-height: 40px; /* 设置行高 */
text-indent: 40px; /* 设置段落的首行缩进 */
text-align: center /* 设置元素水平位置 */
text-decoration: none; /* 设置下划线( none:无, underline:下划线, overline:上划线, line-through:横穿线 ) */

总结

以上就是今天学习的内容。

html&css

一、web开发

1.1工作流程

1.2开发技术

二、HTML

2.1HTML规范

2.2基础标签

2.2.1标题

2.2.2水平线

2.2.3段落和换行

2.2.4文字效果

2.2.5超链接

2.2.6图像

2.2.7音频和视频

三、布局标签

3.1列表

3.2容器

3.3表格

3.4表单标签

四、CSS

4.1引入方式

4.2选择器

4.3样式

总结

相关文章：