# rw-web-ui **Repository Path**: lj0807/rw-web-ui ## Basic Information - **Project Name**: rw-web-ui - **Description**: 人文上web前端课程笔记及上课代码 - **Primary Language**: HTML - **License**: Unlicense - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 7 - **Forks**: 0 - **Created**: 2022-03-08 - **Last Updated**: 2022-06-23 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # WEB 前端 ## 第一次课:HTML页面的结构 页面中必须包含的标签:html title head body **如无特殊的情况,标签一般是成对出现的:<标签>** * html 标签表示的html页面的根标签 * head 页面的头信息 * title 表示的标题,一般展示浏览器的标签上,主要用来表示页面的名称 * body 标签正浏览的窗口部分的代码 ```html luojian ``` ---- ## 第二次课 简历的制作 1. **简历的标题如何处理:** - h1 h2 h3 h4 h5 h6 不同的数字表示的字体大小不一样, - font 标签可以通过size设置它的字体大小 - 第一个问题:页面标题出现乱码: 需要在head标签声明的编码格式`````` - meta标签的作用:主要用来设置页面的描述信息、关键字(供搜索引擎检索信息)、字符集(解决中文乱码:```charset="utf-8"```) - 第二个问题:标题如何居中?解决方法很多:先用标签```center```解决 center在标签的中间加上需要居中的内容 2. **简历的正文如何处理** * 在html中,有表格标签table --> tr --> td * table是一张表格标识:需要设置边框的是时候,可以使用 border属性设置``````,数字表示的边框宽度 * tr表示的是一行 * td表示的一行中的一个单元格 * 表格初步的设计: 代码如下 ```html luojian简介

个人信息

个人简介
姓名 罗剑 性别 保密 出生日期 2004年3月8日 照骗
最高学历 高中 最高学位 身份证号 5224xx20040308111x
毕业院校 专业 搬砖
户口 贵州 期望月薪 10w 毕业时间 2008年7月
``` 结果如下 ![第一版设计](./docimg/第一版设计.PNG) * 第一版中出现的问题:单元格无法按照word中的效果合并单元格,无照片,文字无加粗 * **解决合并单元格:td中有一个合并单元格的属性** * colspan="水平方向需要合并的数量" * rowspan="竖直方向需要合并的数量" * ```照骗``` * 合并单元格的时候,一定要讲多余的单元格删掉,否则多余被挤出来 * ![合并后的效果](docimg/image-20220308111141068.png) * **解决无照片** * 在html中,图片需要使用img标签导入,img标签中有一个src属性用来指定图片的存储地址 * img标签中有宽和高属性: * 宽属性:width="250" 设置宽度,当只设置宽度的时候,高度会根据图片原始尺寸自适应 * 高属性:height="100" 设置图片的高度,当只设置高度的时候,宽度会根据图片原始尺寸自适应 * 宽高同事设置的时候,按照设置的尺寸来进行处理 * 宽和高设置的默认单位是像素(px),宽可以是百分比,表示的上级(父容器)容器标签的宽度的百分比,高度不能用百分比设置 * src 可以是本地的图片,也可以是网络图片(http开头的URL) * 本地的图片可以使用绝对路径和相对路径处理 * 绝对路径:是指代盘符的路径,在Windows上一般是以 `盘符:\文件夹\文件名称` *不推荐使用* * 相对路径:使用.(点)表示当前文件所在的文件夹,斜线表示的文件夹的分割符号,使用(..)两个点表示上一级目录*强烈推荐使用* * **解决文字无加粗,无居中** * 字体加粗:标签b和strong标签 * 字体居中,可以在td标签上加上`align='对齐方式'` * **解决边框感觉有两条线** * `cellpadding="0" `设置的单元格的和table边框的距离 * `cellspacing="0"` 设置的单元格和单元格之间的距离 * 设置后最终效果 ![最终效果](docimg/image-20220308114908072.png) --- ## 第三次课 简历的完善 1. 个人简历完善: * 兴趣爱好 设置列表型的样式的时候,需要使用新的列表标签: 在html中,列表标签有两种: a. 有序列表 `
  1. `第一`
` 会自动的在列表项的前面加上序号,并且该序号会自动递增或者递减 b. 无序列表 `