自定义博客皮肤VIP专享

*博客头图：

格式为PNG、JPG，宽度*高度大于1920*100像素，不超过2MB，主视觉建议放在右侧，请参照线上博客头图

请上传大于1920*100像素的图片！

博客底图：

图片格式为PNG、JPG，不超过1MB，可上下左右平铺至整个背景

栏目图：

图片格式为PNG、JPG，图片宽度*高度为300*38像素，不超过0.5MB

主标题颜色：

RGB颜色，例如：#AFAFAF

Hover：

RGB颜色，例如：#AFAFAF

副标题颜色：

RGB颜色，例如：#AFAFAF

预览 取消 提交

自定义博客皮肤

-+
上一步保存

weixin_45636552的博客

  • 博客(12)
  • 资源 (11)
  • 收藏
  • 关注
排序：
按最后发布时间
按访问量
RSS订阅

原创 css的引入方式

css的引入方式（1）行内样式表（行内式 内联样式表） 控制一个标签 （2）内部样式表（嵌入式） 控制一个页面把所有样式定义在标签中 对当前所有标签生效（3）外部样式表（链接式） 控制多个页面...

2021-01-31 15:43:47 65

原创 css语法规范及代码风格

1.css 语法规范 注释/**/ ctrl+/2.代码风格（1）样式格式书写 ①紧凑格式 ②展开格式（属性值每行只写一个属性及样式）（2）样式大小写 推荐小写（3）空格规范 ①属性值前面 冒号后面 保留空格 ②选择器和大括号中间保留空格...

2021-01-31 15:42:50 95

原创 css文本属性

1.color 文本颜色（预定义颜色值 十六进制 RGB代码）2.text-align:center/right/left 让盒子内的文本水平对齐3.text-decoration 装饰文本 一般用来取消下划线 上划线 删除线none/underline下划线/overline上划线/line-through删除线4.text-indent 文本首行缩进 通常以em为单位设置 无需关注字体大小em相对单位 1em表示一个文字大小 2em缩进当前元素2个文字大小距离5.line-height 行

2021-01-31 15:41:05 86

原创 css字体属性

1.font-family 文本的字体选择器 {font-family: 字体1，字体2，字体3；}各个字体之间必须用英文状态下的逗号隔开尽量使用默认字体 以保证不同浏览器能正确显示一般整个页面使用同一字体 写在body后面如果字体中间有空格，用引号多个字体之间用，分隔2.font-size 字体大小谷歌浏览器默认 16px不同浏览器默认值不同 所以一般需要指定字体大小 避免浏览器之间的差异标题标签比较特殊 需要单独指定大小通常给body设置3.font-weight 字体粗细

2021-01-31 15:40:10 72

原创 基础选择器

选择器的作用 选择标签 ①标签选择器标签名 {属性1: 值；属性2: 值； } 将当前页面中所有的这个标签名都选择出来 修改样式 不能修改某一个的样式②类选择器 单独选择一个或某几个标签 .类名 { 属性1： 值； 属性2： 值； } 口诀：样式点定义 结构类（class）调用 一个或多个 开发最常用 命名规范：长类名中间可用短横线- 下划线_分割 不要使用纯数字、中文等命名，尽量使用英文命名（小写字母） 命名要有意义 多类名选择器 一个

2021-01-31 15:38:43 101

原创 css复合选择器以及背景属性

**1.复合选择器**（1）后代选择器（包含选择器 重要）语法：元素1 元素2 {样式声明}选择器1 选择器2{属性：属性值 }元素1和元素2用空格隔开元素1父亲 元素2后代 最终改变的是后代（元素2）的样式选择器可以是任意的基础选择器（2）子元素选择器（子选择器 重要）语法元素1>元素2{样式声明}元素1和元素2用>隔开元素1和元素2是父子关系只选择父元素最近一级的子元素 即必须是亲儿子选择器1 选择器2可以是任意基础选择器（3）并集选择器（重要）可以选

2021-01-31 15:09:23 384

原创 列表

1.无序列表（重点） <ul > <li>任意内容</li> <li>任意内容</li> <li>任意内容</li> </ul> 注意： ①没有顺序要求 ②ul标签里面只能有li 其他标签不允许 ③li标签中可以是任意元素 ④自带样式（默认是小圆点样式）css控制2.有序列表 <ol> <li

2020-07-30 19:43:16 106

原创 表格

1.表格作用：表格用来展示数据2.写法 姓名 性别 年龄 张三 男 35 李四 男 27 注意: （1）行 （2）行里面单元格 （3）表头单元格标签（会居中 加粗） （4） 表格头部 （5） 表格主体3.合并单元格跨行合并

2020-07-30 19:42:21 116

原创 表单

1.组成由表单域 表单控件（表单元素）提示信息3个部分组成2.使用场景收集用户信息发送到后端/台3.表单域包含表单元素的区域form会把它范围内的表单提示元素提交给服务器注意：①action 表单数据提交地址/路径②method提交表单数据的方式 get（提交时有地址）/post（提交时隐藏地址）4.表单元素input输入表单元素注意：①input是一个单标签 不独占一行②name是表单元素名字 要求单选框和复选框都要有相同的name值 value值则不同③name和

2020-07-30 19:41:17 219

原创 Web标准

（1）HTML——结构—————生成html文件 (.html)（2）CSS ——样式（表现）——生成css文件(.css)（3）JS——动作（行为）—— 生成js文件(.js)注：①HTML是一种超文本标记语言，它是用来描述网页的一种语言。 ②JS即 JavaScript。 ③结构 样式 行为相分离。 ④网页是一个html文件，由各种标签组成。网页与网页之间跳转组成一个网站...

2020-07-30 19:38:12 65

原创 HTML常用标签

1.标题标签标题标签共有六级<h1></h1>...<h6></h6>特点：标题标签的文字会加粗、独占一行、h1到h6字号由大到小 2.段落标签<p></p> 分几段写几个p标签 特点：空行分段 自动换行 段落于段落之间有空隙3.换行标签<br/>4.文本格式化标签（并非独占一行）加粗<strong></strong>或<b></b> 倾

2020-07-30 19:36:06 66

原创 css的引入方式

（1）行内样式表 即行内式 内联样式表 控制一个标签 <div style=" 属性： 属性值；"></div> （2）内部样式表（嵌入式） 控制一个页面 把所有样式定义在<style></style>标签中 对当前所有标签生效 （3）外部样式表（链接式） 控制多个页面 <link rel="stylesheet" href="css文件相对路径"> ...

2020-07-30 19:32:23 55

Web前端与移动开发之复合选择器 css元素显示模式 背景属性.txt
1.复合选择器 （1）后代选择器（包含选择器 重要） 语法： 元素1 元素2 {样式声明} 选择器1 选择器2{ 属性：属性值 } 元素1和元素2用空格隔开 元素1父亲 元素2后代 最终改变的是后代（元素2）的样式 选择器可以是任意的基础选择器 （2）子元素选择器（子选择器 重要） 语法 元素1>元素2{样式声明} 元素1和元素2用>隔开 元素1和元素2是父子关系 只选择父元素最近一级的子元素 即必须是亲儿子 选择器1 选择器2可以是任意基础选择器 （3）并集选择器（重要） 可以选择多组标签 定义相同样式 通常用于集体声明 语法 元素1， 元素2{样式声明} 元素1和元素2都改了样式 逗号，为和的意思 任何选择器都可以作为并集选择器 约定的语法规范：并集选择器约定竖着写 最后一个选择器不需要加逗号， （4）交集选择器 语法 选择器1选择器2选择器3{ 属性： 属性值； } 用选择器1选择元素集合A，用选择器2在A中选择元素 标签名只能写在前面并且只能有一个标签 （5）伪类选择器（只用于链接 用：表示） a:link 未访问过的链接 a:visitied 已访问过的链接 a:hover 选择鼠标经过的链接/悬停时链接 a:active 选择的是鼠标正在按下没有弹起的链接 注意：按照LVHA的顺序写 链接在浏览器中有默认样式 所以一般需要单独指定 （6）焦点选择器（对input标签） 用于选取获得焦点（光标选中）的表单元素 语法 表单元素：focus{ 属性： 属性值； } 注意： 表单元素最常用的是input 在input框选中时显示的样式 2.css的元素显示模式 html元素一般分为块元素和行内元素 （1）块级元素 div p h1-h6 ul ol li ①独占一行 ②宽度 高度 外边距 内边距都可控制 ③宽度默认是容器（父级元素）100%的宽度 ④是一个容器及盒子 里面看可以放行内或块级元素 ⑤文字类的元素如p h1-h6里面不能放块级元素 尤其是div （2）行内元素 a strong b em i del s ins u span ①相邻行内元素在一行上，一行可以显示多个 ②宽高直接设置是无效的 ③默认宽度就是他本身内容的宽度 ④行内元素只能容纳文本或其他行内元素 ⑤链接（a标签）里面不能再放链接 但可以放块级元素 比如图片 （3）行内块元素 img input td ①一行上可以有多个行内块元素 中间有空隙（行内元素特点） ②默认宽度就是他本身内容的宽度（行内元素特点） ③宽高 高度 外边距 内边距可以控制（块级元素特点） 元素显示模式的转换 （1）行内元素转块级元素 display：block；√ （2）块级元素转换为行内元素 display：inline； （3）行内块 元素 display：inline-block√、 单行文字垂直居中 文字的行高line-height=盒子高度 仅限于单行文字垂直居中 3.css的背景属性 （1）背景颜色 选择器{ background-color： transparent透明（透明）/color； } （2）背景图片（便于控制位置） 常用于logo 装饰性的小图片或者超大图片 background-image： none（默认） | url（图片地址/路径）; （3）背景平铺 background-repate: repate（默认） | no-repate | repate-x（沿x轴/横向平铺） | repate-y（沿y轴/纵向平铺）; 注意： 页面元素既可以添加背景颜色 也可以添加背景图片 只不过背景图片在背景颜色上方 即背景图片会压住背景颜色 （4）背景图片的位置 background-position: x y; ①参数是方位名词 top | center | bottom | left | center | right 方位名词 x（ left | center | right） y（top | center | bottom） background-position: 水平 垂直; background-position: center top ; background-position: top center ; 指定两个方位名词时 与顺序无关 指定一个方位名词时 没有指定的那个默认是居中对齐 ②参数是精确单位 前面x 后面y 顺序不可变 若第一个是精确单位 一定是x 则另一个垂直居中 ③混合单位 有顺序要求 第一个为x 第二个为y （5）背景固定 background-attachment: scroll | fixed ; （6）背景复合写法 background：颜色 图片地址url 平铺 滚动 位置 没有顺序要求 （7）背景色半透明 background：rgba（0,0,0,0.3）取值0-1 0.3也可以写成.3 背景色半透明 盒子里面内容不受影响

2020-07-30

Web前端与移动开发之基础选择器.txt
选择器的作用 选择标签 ①标签选择器 标签名 { 属性1: 值； 属性2: 值； } 将当前页面中所有的这个标签名都选择出来 修改样式 不能修改某一个的样式 ②类选择器 单独选择一个或某几个标签 .类名 { 属性1： 值； 属性2： 值； } 口诀：样式点定义 结构类（class）调用 一个或多个 开发最常用 命名规范：长类名中间可用短横线- 下划线_分割 不要使用纯数字、中文等命名，尽量使用英文命名（小写字母） 命名要有意义 多类名选择器 一个类名可以被多个标签调用 一个标签也可以设置多个类名 多各类名样式同样生效 好处：提高css代码的复用性 不需要写很多重复的代码 ③id选择器 语法： #id名 { 属性1： 值； 属性2： 值； } id选择器口诀：样式#定义 结构id调用 只能调用一次 别人切勿使用 id选择器和类选择器区别： 类选择器好比人的名字 一个人可以有多个名字 同一个名字也可以被多个人使用 id选择器 身份证全国唯一 不能重复 二者使用次数不同 注意： 只要被选择器选中 设置对应的样式均会生效 如果不同的选择器定义了相同的属性 至于哪个生效由选择器的优先级决定 ④通配符选择器 选取页面中所有元素（标签） * { 属性： 属性值； } 通配符选择器不需要调用 自动给所有元素使用样式

2020-07-30

Web前端与移动开发之css字体属性.txt
1.font-family 文本的字体 选择器 { font-family: 字体1，字体2，字体3； } 各个字体之间必须用英文状态下的逗号隔开 尽量使用默认字体 以保证不同浏览器能正确显示 一般整个页面使用同一字体 写在body后面 如果字体中间有空格，用引号 多个字体之间用，分隔 2.font-size 字体大小 谷歌浏览器默认 16px 不同浏览器默认值不同 所以一般需要指定字体大小 避免浏览器之间的差异 标题标签比较特殊 需要单独指定大小 通常给body设置 3.font-weight 字体粗细 normal正常/bold粗体/bolder特粗/lighter细体/number数字加粗 无单位 实际开发中更提倡使用数字加粗 400（不加粗）等同于normal 700（加粗）等同于bold 注意这个数字后不跟单位 4.font-style 字体样式 normal正常（不倾斜）/tialic斜体 font-style主要将倾斜的标签em i改为不倾斜 5.字体的复合属性（简写方式 节约代码） body { font: font-style font-weight font-size/line-height font-family; } 不能更换顺序 属性间以空格隔开 不需设置的属性可以省略（取默认值） font-size font-family不可省略

2020-07-30

Web前端与移动发开之css的文本属性
1.color 文本颜色（预定义颜色值 十六进制 RGB代码） 2.text-align:center/right/left 让盒子内的文本水平对齐 3.text-decoration 装饰文本 一般用来取消下划线 上划线 删除线 none/underline下划线/overline上划线/line-through删除线 4.text-indent 文本首行缩进 通常以em为单位设置 无需关注字体大小 em相对单位 1em表示一个文字大小 2em缩进当前元素2个文字大小距离 5.line-height 行间距（行高）单位 px 无单位表示多少倍行间距 行高=上间距+文字大小+下间距 上间距=下间距 文字垂直居中 文本属性也就是外观属性

2020-07-30

Web前端与移动开发之css的引入方式
css的引入方式 （1）行内样式表（行内式 内联样式表） 控制一个标签 <div style=" 属性： 属性值；"></div> （2）内部样式表（嵌入式） 控制一个页面 把所有样式定义在<style></style>标签中 对当前所有标签生效 （3）外部样式表（链接式） 控制多个页面 <link rel="stylesheet" href="css文件相对路径">

2020-07-30

Web前端与移动开发之css语法规范及代码风格
1.css 语法规范 <head> <style> 选择器 { 属性1： 值； 属性2： 值； } </style> </head> 注释/**/ ctrl+/ 2.代码风格 （1）样式格式书写 ①紧凑格式 ②展开格式（属性值每行只写一个属性及样式） （2）样式大小写 推荐小写 （3）空格规范 ①属性值前面 冒号后面 保留空格 ②选择器和大括号中间保留空格

2020-07-30

前端与移动开发之表单
1.组成 由表单域 表单控件（表单元素）提示信息3个部分组成 2使用场景 收集用户信息发送到后端/台 3.表单域 包含表单元素的区域 form会把它范围内的表单提示元素提交给服务器 <form action="#" method="提交数据的方式" name="表单的名字"> </form> 注意： ①action 表单数据提交地址/路径 ②method提交表单数据的方式 get（提交时有地址）/post（提交时隐藏地址） 4.表单元素 input输入表单元素 <input type="text文本框/password密码框 /radio单选框/checkbox复选框/ name定义input元素名称/value/checked/maxlength最大长度/submit提交/reset重置/button普通按钮"> 注意： ①input是一个单标签 不独占一行 ②name是表单元素名字 要求单选框和复选框都要有相同的name值 value值则不同 ③name和value是每个表单元素都有的属性值 主要给后台人员使用 ④name属性可以自定义名字 value一般设置为空（有实际意义的选项除外，否则不能向后台传递数据 每个选项的value值不能相同） ⑤后端提交的数据 name的属性值=value的值（输入框中的内容） ⑥checked="checked"只针对单选框和复选框 设置默认选中 重要 ⑦maxlength="6"设置文本输入框最大长度 ⑧submit（可以把表单域里面元素提交给后台）和reset（还原表单中数据到初始状态）里面通过value属性可以改变文字 5.表单标签 都应该在form里面 增加用户体验 帮助表单元素提高作用域 （1）<label for="text1"></label><input id="text1"> for属性是必须的 且for属性值必须是绑定表单元素的id的属性值 id属性值可以自定义 但不能重复 即全局唯一 （2）下拉表单元素 <select name="" id=""> <option value=""></option> <option selected=""></option> <option></option> </select> 注意： ①select里至少包含一对option selected="selected"默认选定 ②如果想向后台传送数据，需要在select标签中写上name属性，每个option标签中写上value属性 （3）文本域textarea <form> <textarea cols="每行显示字符数" rows="行数"> 文本内容 </textarea> </form>

2020-07-25

前端与移动开发之列表
1.无序列表（重点） <ul > <li>任意内容</li> <li>任意内容</li> <li>任意内容</li> </ul> 注意： ①没有顺序要求 ②ul标签里面只能有li 其他标签不允许 ③li标签中可以是任意元素 ④自带样式（默认是小圆点样式）css控制 2.有序列表 <ol> <li>任意内容</li> <li>任意内容</li> <li>任意内容</li> </ol> 注意：ol标签里面只能有li li相当于一个容器 可以容纳所有元素 默认阿拉伯数字1234 3.自定义列表（重要） <dl> <dt>名词或项目名</dt> <dd>解释一</dd> <dd>解释二</dd> <dd>解释三</dd> </dl> 注意： ①dl是外面大框框 dt名字 dd里面小项目 dt和dd并列 ②dl里面只能包含dt和dd ③dt一般写术语或名词 ④dd一般是对dt中内容的解释说明 ⑤dd和dt是兄弟关系 使用场景：对术语或名词的解释说明

2020-07-25

前端与移动开发之表格
1.表格作用：表格用来展示数据 2.写法 <table align="表格对齐方式center/right/left" border="表格边框 默认没有边框" cellpadding="文字和单元格之间边距 默认为1" cellspacing="单元格和单元格之间间距 默认为2" width="表格宽度" height="表格高度"> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>男</td> <td>35</td> </tr> <tr> <td>李四</td> <td>男</td> <td>27</td> </tr> </tbody> </table> 注意: （1）<tr></tr>行 （2）<td></td>行里面单元格 （3）<th></th>表头单元格标签（会居中 加粗） （4）<thead> </thead> 表格头部 （5）<tbody></tbody> 表格主体 3.合并单元格 跨行合并 rowspan="合并单元格的个数" 最上侧单元格为目标单元格 跨列合并 colspan="合并单元格的个数" 最左侧单元格为目标单元格 步骤： （1）确定跨行还是跨列 （2）找到目标单元格 写合并单元格数量 rowspan/colspan=" " （3）删除多余单元格

2020-07-25

前端与移动开发之HTML标签
HTML常用标签

2020-07-23

前端与移动开发入门之Web标准
前端与移动开发入门之Web标准

2020-07-23

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章？
取消 删除