前端day01

@没蓝

已于 2022-05-06 07:57:39 修改

阅读量1.1k

点赞数

分类专栏：笔记文章标签：前端 html

于 2022-05-05 23:51:33 首次发布

本文链接：https://blog.csdn.net/qq_44949668/article/details/124342006

版权

这篇博客介绍了HTML的基础知识，包括文本标签、列表标签、图片标签、表格、表单和分区标签的使用，以及CSS的选择器概念。还提到了CSS的三种引入方式和不同选择器的用途。

摘要由CSDN通过智能技术生成

- 客户端分为手机客户端和浏览器客户端
- 在客户端点完之后(各种链接,搜索等),就会发送请求,请求从客户端发送到服务端上(web服务器)
- 服务器就是一台高性能的电脑
- web服务器就是电脑上安装了web服务软件
- 我们在一台电脑上安装了web服务软件,这台电脑就可以被称之为是web服务器
- 我们开发的网站实际上就是部署在web服务软件中,tomcat中的
- 业务逻辑是判断发送的请求的目的
- 数据存储是在数据库服务器
- 数据库服务器是电脑上安装了数据库软件
- 安装了数据库软件的电脑被称为数据库服务器

在手机上点击首页的完整流程:
1. 手机客户端点击首页,会给服务端发送一个请求
2. 服务端根据自身的业务逻辑,判断出请求的目的是请求首页
3. 服务器会在数据库服务器中去提取响应的数据
4. 数据库服务端把web服务器想要的数据返回给web服务器,数据返回的形式是纯数据
5. web服务器会把从数据库服务器中返回的纯数据装到相应的页面中,这里是首页的页面中
6. 最后web服务器会把这个首页的页面返回给客户端,也就是手机,此时手机就会得到想要的首页

所以以后我们想要实现一个完整的网站:
需要写页面,服务器端的代码,数据库服务器端的代码

复制整行快捷键: ctrl + D

注释快捷键: ctrl + shift + /

快速进入下一行: shift + 回车

一. 文本相关标签

h1-h6 文本标题,特点:独占一行,自带上下间距,字体加粗,文本标签中可以用属性align指定文本标题的位置:<h1 align="center">内容标题1</h1>
p 段落标签,特点:独占一行,自带上下间距,即使两个段落标签写在了同一行中,在页面中也都是分别独占一行
hr 水平分割线
br 换行
b 加粗
i 斜体
u 下划线
s 删除线

二.列表标签

无序列表: ul和li 组合 unodered list list item列表项
有序列表: ol和li 组合 ordered list
列表嵌套: 有序列表和无序列表可以任意无限嵌套

三.图片标签img

src: 资源路径
相对路径:访问站内资源
图片和页面在同级目录:直接写图片名
图片在页面的上级目录:

../图片名

图片在页面的同级目录中的下级目录:文件夹名/图片名
绝对路径:访问站外资源,图片盗链(复制图片地址),有找不到图片的风险
alt :图片不能正常显示时显示的文本
title : 图片标题(鼠标停在图片上显示的文本)
width/height : 设置宽高,只设置宽度时高度会自动等比例缩放(图片的宽高比是不变的)
图片大小的两种显示方式: 1像素px 2.上级元素的百分比

补充:body是比整个窗口的各个方向小了8个像素,为了让页面好看一点

四.表格table

相关的标签:
tr : table row 行
td : table data 列:元素中的文本通常是普通的左对齐文本。
th : 表头:元素中的文本通常呈现为粗体并且居中
caption : 标题,表格的标题,会出现在该表格的正上方
相关属性
border : 边框
colspan : 跨列
rowspan : 跨行

补充：跨行和跨列都是设置在先出现的行或者列中，然后删除其他被合并的行或者列

    <table border="1">
        <caption>课程表</caption>
        <tr>
            <td></td>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
        </tr>
        <tr>
            <th rowspan="2">上午</th>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
        </tr>
        <tr>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
            <td>数学</td>
        </tr>
        <tr>
            <th colspan="6">午休</th>
        </tr>
        <tr>
            <th rowspan="2">下午</th>
            <td>物理</td>
            <td>物理</td>
            <td>物理</td>
            <td>物理</td>
            <td>物理</td>
        </tr>
        <tr>
            <td>化学</td>
            <td>化学</td>
            <td>化学</td>
            <td>化学</td>
            <td>化学</td>
        </tr>
    </table>