devbox
Guff_9hys
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

web知识学习

作者：Guff_9hys | 2024-07-16 22:53:26

赞

踩

web前端技术指的不是一项技术
  • web前端技术指的不是某一项技术，而是一系列技术集合，主要包括：
  • html--结构标准：负责网页结构的搭建
  • css--样式标准/表现标准：负责网页的美化工作
  • js--行为标准：负责网页的行为动作
行业词条
  • Internet-->互联网
  • www-->万维网（资料空间）world wide web 万维网，简称www或3w
  • URL-->统一资源定位器（网路地址）
  • HTTP-->超文本传输协议
  • w3c-->万维网联盟（他是一个组织不是某一个公司）
  • 网站-->多个页面的集合（首页，内容页，列表页）
  • 网页-->网页文件就是后缀名以html或者.html结尾的文件，文字，图片，超链接；
  • 浏览器：观看网页最终效果的平台
浏览器（五大浏览器厂商）
  • IE
  • 谷歌（谷歌和苹果的内核是一样的）
  • 火狐
  • 苹果
  • 欧朋 注：其他浏览器就是用的是别人的浏览器的技术。
Html
  • 定义：超文本标记语言
  • html分为四个阶段
    • html2.0-->1995年由RFC组织发布
    • html3.0-->w3c（官方的组织）制定一系列规范
    • html4.0.1-->XHTML1.0(目前常用版本)-->XHTML相当于html的严谨版
    • html5.0-->发展趋势2008年起稿，2012年推广
  • html语法规范
    • 标签、标记符号--<>又称尖括号
    • html语言必须写在标签符号里面
    • html中的标签大多数都是成对出现
    • 关闭符号---/又称反斜杠
    • （HBuilder）
html页面
  1. <!DOCTYPE html>描述当前文件的版本信息，如果没有详细说明4.0还是X1.0那就是5版本
  2. <html lang="en">html文件
  3. <head>网页的头部
  4.     <meta charset="UTF-8">   ---嵌套  （UTF-8国际编码的意思）如果不写，或者写成其它都会有问题
  5.     <title>Title</title>   --网页的标题
  6. </head>
  7. <body>
  8. 所有自己写的html代码都放在body中
  9. </body>
  10. </html>
  11.  
  12. 复制代码
  • 注意：html文档不能正常识别回车和换行，只能使用特定代码实现；标签、标记、节点、元素都是尖括号
  • 代码工具推荐：dw、sublime、HBuilder、WebStorm、notepad++、editplus、
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <h1>我是h1标签</h1>>
  9. <h2>我是h2标签</h2>>
  10. <h3>我是h3标签</h3>>
  11. <h4>我是h4标签</h4>>
  12. <h5>我是h5标签</h5>>
  13. <h6>我是h6标签</h6>
  14. <p>我是p代表这里是文章段落</p>
  15. </body>
  16. </html>
  17. 复制代码
  • 浏览器只认识标签，想表达的东西自能用相应的标签来表示
  • 标签语义化的好处：语义化做的好，可以让搜索引擎把你的网站排名靠前
  • h和p标签
    • h有六个标签，从1-6依次变小
    • p发文章内容
bui标签
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>bui标签</title>
  6. </head>
  7. <body>
  8. <b>我是b代表加粗</b>
  9. <br>-----代表换行，br按tab键
  10. <strong>我也是加粗  可以代表强调语义化</strong>
  11. <br>-----代表换行，br按tab键
  12. <u>我是u代表下划线</u>
  13. <br>   -----代表换行，br按tab键
  14. <i>我是i代表倾斜</i>
  15. <em>我是em  也是倾斜多了强调的语义</em>
  16. <s>我是s  代表删除线  这种写法被渐渐淘汰</s>
  17. <del>我是del 也代表删除线  这种写法是主流</del>
  18. </body>
  19. </html>
  20. 复制代码
img图片标签
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. 正常的图
  9. <br />
  10. <img src="1.jpg" />
  11. <br />
  12. 设置了宽高的图
  13. <br />
  14. <img src="1.jpg" width="200" height="200"/><br />
  15. 等比例缩放：宽或高设置其中一个 另外一个就等比例缩放了<br />
  16. <img src="1.jpg" width="200" /><br />
  17. 有提示文本的---鼠标悬停的提示文字<br />
  18. <img src="1.jpg" title="我是鼠标悬停才能看到的文字" /><br />
  19. 图片没有加载出来的时候才出现的文字2.可以让网页让阅读器把alt中的文字念出来  为了视用户名的体验这是一个人<br />
  20. <img src="11.jpg" alt="我是提醒文字（描述这张图片的内容  这是一张野外的小鸟站立图）" />
  21. </body>
  22. </html>
  23. 复制代码
  1. <img src="图片名字" width="宽度" height="高度" alt="1、图片未加载的提示文字2、网页阅读器可以读取这里的文字" title="鼠标悬停时候的提示文字" />
  2. 注意：属性名="属性值" 属性名="属性值"；
  3. 空格不能丢，符号都要使用英文状态下，属性设置不分先后；
  4. 宽高设置其中一个，另外一个就等比例缩放；
  5. 复制代码
  • 相对路径
  • 绝对路劲
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <!--ctrl+?可以实现注释用户看不到-->
  9. <!--这两个是属于相对路劲-->
  10. <img src="../../1.jpg" />
  11. <img src="1.jpg" />
  12. <!--以下属于绝对路劲-->
  13. <img src="file:///C:/Users/11839/Desktop/%E9%97%AE%E9%A2%98%E7%82%B9%E5%8F%8A%E6%80%BB%E7%BB%93/js-css-html/1.jpg />
  14. </body>
  15. </html>
  16. 复制代码
  • 链接
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <!--跳转到百度官网    如果想跳转到线上网址必须要添加http://-->
  9. <a href="http://www.baidu.com">跳转到百度官网</a><br />
  10. <!--跳转文件alt+? 代码提示功能-->
  11. <a href="Img标签.html">我想跳转到Img标签</a><br />
  12. <!--target="blank"可以设置新窗口打开-->
  13. <a href="html文章标签.html" target="_blank" >我想在新窗口打开</a>
  14. <p>我是文字</p>
  15. <p>我是文字</p>
  16. <p>我是文字</p>
  17. <p>我是文字</p>
  18. <p>我是文字</p>
  19. <p>我是文字</p>
  20. <p>我是文字</p>
  21. <p>我是文字</p>
  22. <p>我是文字</p>
  23. <p>我是文字</p>
  24. <p>我是文字</p>
  25. <p>我是文字</p>
  26. <p>我是文字</p>
  27. <p>我是文字</p>
  28. <p>我是文字</p>
  29. <p>我是文字</p>
  30. <p>我是文字</p>
  31. <p>我是文字</p>
  32. <p>我是文字</p>
  33. <p id="hahaha">1112233</p>
  34. <!--暂时不知道写什么地址的时候要用 并号来代表空链接-->
  35. <a href="###">我不知道点击之后跳转到哪里</a><br />
  36. <a href="javascript:">我还不知道点击之后跳转到哪里javascript</a><br />
  37. <a href="javascript:void(0);">我不知道点击之后跳转到哪里javascript void</a><br />
  38. <!--以上三种写法都正确，写一个或两个才提bug-->
  39. <a href="#hahaha">我是想跳转到某位置</a>
  40. <!--参照淘宝电梯导航-->
  41. <p>asadds</p>
  42. <p>asadds</p>
  43. <p>asadds</p>
  44. <p>asadds</p>
  45. <p>asadds</p>
  46. <p>asadds</p>
  47. <p>asadds</p>
  48. <p>asadds</p>
  49. <p>asadds</p>
  50. <p>asadds</p>
  51. <p>asadds</p>
  52. <p>asadds</p>
  53. <p>asadds</p>
  54. </body>
  55. </html>
  56. 复制代码
  • 注意：如果要跳转到线上地址，必须加http://.本地文件直接写路劲；
  • 空链接写法：1、### 2、javascript; 3、javascript:void(0);这三种都可以
  • 错点链接：点击之后可以跳转到页面的对应位置，给像跳转到的位置写一个id属性，a标签中的href属性写#id的值
  • 表单
    • action：代表要提交给哪一个后台程序
    • method： 代表传输过程中使用那种形式post(加密) get(不加密)
  1. <input type="" />     input 代表输入框标签（单标签），type类型决定这个输入框的类型
  2. Name属性代表 这个输入框的名字；
  3. id打包输入框的id编号
  4. Value代表默认输入框（不符合用户体验、应用换成placeholder）
  5. 注意：placeholder属性ie低版本不兼容，但是我们实际工作中还要使用，因为渐进增强（随着浏览器版本的提升，效果越来越好）、优雅降级（在高版本浏览器显示效果好的前提下，保证了低版本浏览器不错乱）
  6. 1.type="text" 代表普通输入框
  7. 2.type="password"  代表密码输入框
  8. 复制代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <!--所以的表单要填写的数据都要放在form标签中嵌套-->
  9. <!--action代表要提交给哪一个后台程序-->
  10. <!--method 代表传输过程中使用那种形式post(加密) get(不加密)-->
  11. <form action="" method="post"></form>
  12. <!--input 代表文本框标签type是类型的意思 如果设置text 代表最标准的输入框-->
  13. <!--name代表此输入框的名字-->
  14. <!--id代表此输入框的id编号-->
  15. <!--value代表默认文字，文本框的文字-->
  16. <!--昵称：<input type="text" name="hha" id="hhee" value="哈哈哈呵呵" />-->
  17. 昵称：<input type="text" name="hha" id="hhee" placeholder="哈哈哈呵呵" /><br>
  18. <!--placeholder属性属于html5最新的属性，它不兼容ie低版本浏览器（6、7、8、9）
  19. 此效果虽然低版本ie不支持，但是不会造成页面的混乱，我们就认为此属性没有问题，
  20. 以渐进增强（随着浏览器版本的升高用户体验越来越好）优雅降级（高版本浏览器效果好，保证低版本浏览器不混乱）-->
  21. 密码：<input type="password" />
  22. </body>
  23. </html>
  24. 复制代码
  • 单选按钮
  • Type="radio"
  • 注意：如果想让文字点击能切换，那要加label标签，并且设置for属性和对应的单选按钮的id属性值一致，必须给这一组单选按钮添加name值，才可以实现单选效果；设置默认选中状态，要给单选按钮添加checked="checked"
  1. <!--性别：<input type="radio" />男<input type="radio" />女<input type="radio" />保密-->
  2. 性别：<input type="radio" name="xb" id="nan" /><label for="nan">男</label><input type="radio" name="xb" id="nv"/><label for="nv">女</label><input type="radio" name="xb" id="mi"/><label for="mi">保密</label>
  3.  
  4. 复制代码
下拉菜单
  • select和option的组合
  • 注意：如果想设置多组下拉菜单，需要添加一个optgroup标签，并设置label属性做为提示文字；如果想设置默认选中状态，需要给对应的option添加selected属性
  1. <select name="" id="">
  2.     <option value="" selected="selected">杭州</option>
  3.     <option value="">上海</option>
  4.     <option value="">北京</option>
  5.     <option value="">武汉</option>
  6.     <option value="">黄冈</option>
  7.     <option value="">浙江</option>
  8. </select>
  9. <select name="" >
  10.     <optgroup label="杭州"></optgroup>
  11.     <option value="">余杭区</option>
  12.     <option value="">上城区</option>
  13.     <option value="">下城区</option>
  14.     <option value="">江干区</option>
  15.     <option value="">拱墅区</option>
  16.     <option value="">滨江区</option>
  17.     <option value="">萧山区</option>
  18.     <option value="">富阳区</option>
  19.     <optgroup label="上海"></optgroup>
  20.     <option value="">滨江</option>
  21.     <option value="">昌平</option>
  22.     <option value="" selected="selected">邯郸</option>
  23.     <option value="">顺义</option>
  24. </select>
  25. 复制代码
文本域
  • Textarea标签来设置多行文本（文本域）
  • 注意：不能使用cols、rows来设置宽高，要用width、height来设置，它也可以使用placeholder来设置默认提示文字

多选框（复选框）

  • Type=“checkbox”
  • 它的使用方法和细节与单选框一致
按钮
  • 提交按钮type=“submit”注意：必须设置vulue属性，否则浏览器之间有兼容性问题
  • 重置按钮type=“reset”注意：必须设置vulue属性，否则浏览器之间有兼容性问题；恢复刷新后的默认状态
  • 按钮type=‘“button”或都可以
  • 用户体验细节：刷新后想让第一个输入框默认选中状态，给输入框设置autofous="autofous"
  1. <textarea name="" cols="30" rows="10" placeholder="请输入文字"></textarea><br>
  2. 你的爱好是：<input type="checkbox" checked="checked" id="pb" /><label for="pb">跑步</label><input type="checkbox" id="tg"/><label for="tg">跳高</label><input type="checkbox" id="ms"/><label
  3.         for="ms">美食</label><br>
  4. <input type="submit" value="提交" />
  5. <input type="reset" >
  6.     <input type="button" value="按钮">
  7.     <button>按钮</button>
  8. 复制代码

css

  • 样式表、层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（文字、大小、对齐方式等）、图片的外形（宽高、边框样式、边框等）以及版本的布局等外观显示样式。
  • css以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式
css基础语法
  • css代码放在style标签里面，放在head标签中；大括号中写键值对语法，例子：属性名1；属性名1；属性名2；属性名2；
  • color 文字颜色
  • font-famliy字体
  • Font-size字号
  • Text-indent 首行缩进 单位是em 代表一个文字的间距
  • Text-align 文本对齐方式，默认是left,还可以设置center剧中
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style type="text/css">p{color: red;font_size:30px; font-family: 黑体; text-align: center; text-indent:2em;  }</style>
  7. </head>
  8. <body>
  9. <p>哈哈哈哈 <br> 哈哈哈</p>
  10. </body>
  11. </html>
  12. 复制代码
  • background 背景色属性
  1.    <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style type="text/css">p{ width: 200px; height: 200px; background:red;}</style>
  7. </head>
  8. <body>
  9. <p></p>
  10. </body>
  11. </html>
  12. 复制代码
标签选择器
  • 直接在css语法中写标签的名字就可以选中对应的标签
  • div 代表大盒子（容器 存放内容的）
  • span 代表小盒子（容器 存放内容的）
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style type="text/css">
  7.         p{color: red}
  8.         div{color: pink}
  9.         span{color: aqua}
  10.     </style>
  11. </head>
  12. <body>
  13. <p>我是p</p>
  14. <div>我是div标签 代表大盒子（容器 存放内容的）</div> 
  15. <span>span 代表小盒子（容器 存放内容的）</span>
  16. <p>我是p</p>
  17. </body>
  18. </html>
  19. 复制代码
  • id选择器
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style type="text/css">#p1{color: aqua}#p2{color: pink}</style>
  7. </head>
  8. <body>
  9. <p id="p1">我是ppppPPppPPPPP</p>
  10. <p id="p2">我爱hipPpPPPPPPPpPPppp</p>
  11. </body>
  12. </html>
  13. 复制代码
  • 类选择器class
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style type="text/css">.p1{color: aqua}.p2{color: red}.shxs{font-size:30px;}</style>
  7. </head>
  8. <body>
  9. <p class="p1 shxs">11111</p>
  10. <p class="p2">222222</p>
  11. <p class="p1">333333</p>
  12. </body>
  13. </html>
  14. 复制代码
  • id选择器语法：#名字 特点：不能重复，也不能一个人拥有多个
  • class类选择器语法：名字 特点：可以重复使用，一个人可以有多个类名（好像是人的称号一样）
  • 总结：今后class选择器使用频率高于id选择器
ps吸取颜色
  • 按prtsc这个按钮，截屏幕当前状态
  • 打开ps新建，ctrl+v把刚刚截取放入ps中
  • 找到
    点击，鼠标变为吸管，吸取想要的颜色值，复制
    放在css代码中，在前面加#
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style type="text/css">
  7.         span{font-size:100px}
  8.         .logo_blue{ color: blue }
  9.         .logo_juhong{ color: #cc3300}
  10.         .logo_orange{color: orange}
  11.         .logo_green{color: green}
  12.     </style>
  13. </head>
  14. <body>
  15. <span class="logo_blue">G</span>
  16. <span class="logo_juhong">o</span>
  17. <span class="logo_orange">o</span>
  18. <span class="logo_blue">g</span>
  19. <span class="logo_green">l</span>
  20. <span class="logo_juhong">e</span>
  21. </body>
  22. </html>
  23. 复制代码
css引入方式
  • 内嵌式：
    • style标签放在head中
    • 优点：方便课上案例的书写：电商网站的页面必须使用这种方式，因为电商首页要求加载速度必须快，内嵌式比外链式快一些
    • 缺点：html和css代码没有实现分离，不方便修改
  • 外链式：
    • 通过link放在head标签中，把外部的css文件引入到html文件中
    • 优点：实现了代码分离，方便修改和管理；
    • 缺点:运行速度比内嵌稍慢
  • 行内式：
    • 这种形式一定不要用，它会上代码量变得非常庞大，不方便修改
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style type="text/css">
  7.     p{color: red;}
  8.     </style>
  9. </head>
  10. <body>
  11. <p>我是外链式</p>
  12. </body>
  13. </html>
  14. 复制代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" href="new.file.css">
  7. </head>
  8. <body>
  9. <p>我是外链式</p>
  10. </body>
  11. </html>
  12. p{color: red;}
  13. 复制代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <p style="color: red;">我是行内css</p>
  9. <!--非常繁琐，消耗代码量-->
  10. </body>
  11. </html>
  12. 复制代码
  • 基础选择器权重
  • id>class>标签
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style type="text/css">
  7.         #big{color: green}
  8.         div{color: blue}
  9.         .big_div{color: red}
  10.     </style>
  11. </head>
  12. <body>
  13. <div class="big_div" id="big">大盒子</div>
  14. </body>
  15. </html>
  16. 复制代码
后代选择器
  • Div span 用空格来链接，代表的意思是找到后代元素
  • 注意：后代可以是儿子、儿子的儿子
并集、并列选择器
  • Div，span,h1,span1,#span2
  • 用逗号链接选择器，代表这些元素同时被选中
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style type="text/css">
  7.         /*span{color:red;}*/
  8.         div span{color: blue;}
  9.     </style>
  10. </head>
  11. <body>
  12. <div>
  13.     <p>
  14.         <span>我是老p家的span</span>
  15.     </p>
  16.     <div>
  17.         <span>我是老div家的span</span>
  18.     </div>
  19. </div>
  20. </body>
  21. </html>
  22. 复制代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style type="text/css">
  7.         p,div,h3,h4,.span1,#span2{color:red;}
  8.     </style>
  9. </head>
  10. <body>
  11. <p>我是p</p>
  12. <div>我是div</div>
  13. <h2>我是h2</h2>
  14. <h3>我是h3</h3>
  15. <h4>我是h4</h4>
  16. <span class="span1">我是class 的span1</span>
  17. <span id="span2">我是span2 有id</span>
  18. </body>
  19. </html>
  20. 复制代码
标签指定式、指定标签式
  • div.类名
  • 注意：标签和类名之间没有空格
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style type="text/css">
  7.         div.div1{color:red;}
  8.     </style>
  9. </head>
  10. <body>
  11. <div class="div1">我是div1</div>
  12. <div>我是div2</div>
  13.  
  14. <p>我是p1</p>
  15. <p class="p2">我是p2</p>
  16. </body>
  17. </html>
  18. 复制代码
高级权重对比
  • 引入方式对比
    • 外链和内嵌权重相同，先写的会被后写的覆盖
    • 内嵌权重最大，如果想要覆盖它，就只能给样式中添加！important来把权重提高
  • 复合选择器
    • id我们认为是100斤 class类名认为10斤 标签认为1斤
    • 综合起来大的权重就高，如果权重一样，先写的被后写得覆盖
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style type="text/css">
  7.         /*标签1斤 类10斤 id100斤*/
  8.         .div1 span{color: darkgoldenrod;}
  9.         span.span1{color: green;}
  10.         .span1{color: pink;}
  11.         p span{color: blue;}
  12.         span{color: red}
  13.     </style>
  14. </head>
  15. <body>
  16. <div>
  17.     <div class="div1"></div>
  18.     <p>
  19.      <span class="span1">呵呵呵呵</span>
  20.     </p>
  21. </div>
  22. </body>
  23. </html>
  24. 复制代码
高级权重对比
  • 引入方式对比
    • 外链式和内嵌权重相同，先写的会被后写的覆盖
    • 内嵌权重最大，如果想覆盖它，就只能给样式中添加!important来把权重提高
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <!--外链与内嵌权重相同 先写的会被后写的覆盖-->
  7.     <link rel="stylesheet" href="my.css">
  8.     <style type="text/css">
  9.         p{color: red;!important}
  10.     </style>
  11. </head>
  12. <body>
  13. <p style="color: green;">呵呵呵和合伙人</p>
  14. </body>
  15. </html>
  16. 复制代码
css常用属性
  • font-weight 设置字体粗细的
  • normal 代表不加粗
  • bold 代表加粗
  • font-style 设置字体倾斜
  • italic 代表倾斜
  • normal 代表不倾斜
  • text-decoration 设置线
  • none 没有线
  • underline 下划线
  • overline 上划线
  • line-through 贯穿线（删除线）
  • word-break:break-all 强制换行
  • :hover 伪类写法 代表鼠标悬停状态的样式
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         h1{ font-weight:normal;}
  8.         p{font-weight:bold;}
  9.         em{font-style:normal;}
  10.         h7{font-style:italic}
  11.         a{text-decoration: none;}
  12.         h5{width:200px;height:300px;background: pink;}
  13.         h5{word-break: break-all;}
  14.         /*:hover 鼠标悬停状态的样式设置*/
  15.         a:hover{color: green}
  16.     </style>
  17. </head>
  18. <body>
  19. <h1>我是h1标签</h1>
  20. <p>我是p 我也想加粗</p>
  21. <em>我是倾斜</em>
  22. <h7>我是h3 我也想倾斜</h7>
  23. <a href="###">我是默认的a</a>
  24. <h5>yuighjmkhhsjasjklkl;lllkmsdfghtyui;fghjkfghj</h5>
  25. </body>
  26. </html>
  27. 复制代码
行高属性
  • 一行文字的结束到上一行文字结束的间距：line-height
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style type="text/css">
  7.         p{ width: 200px; height: 500px; background: pink; line-height: 30px;}
  8.     </style>
  9. </head>
  10. <body>
  11. <p>号都是绝对误差参加哦吴佩慈完成从破产美联储麽了vcp是VS吗v怕速率浪漫旅联盟v浪费vvvkf;lvmdvmwlcmvlkvmpvl看vvv恐怕v催眠术催眠速率vkvp;vlmsc;盲从模范人物破软件给人家外婆飞机场触控屏手机方面我v率每次离开充满了</p>
  12. </body>
  13. </html>
  14. 复制代码
边框属性
  • border:1px solid red
    1.    粗线  实线 颜色
    2. 复制代码
  • 虚线：dashed 这样设置是四个方向相同；如果想单独设置某个方向只需要：border-left(right、top、button)
  • 注意：边框属性只有实线和虚线是没有兼容性问题的，其它方式的线都会有不同程度的兼容问题，如果程序员使用了，一定要报错！ div{width:200px;height: 200px;background: pink;border: 3px solid red;
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         div{width:200px;height: 200px;background: pink;/*border: 3px solid red;*/border-bottom: 3px solid green;border-top:5px solid blue;
  8.         border-left: 10px dashed orange;border-right:15px dashed olivedrab}
  9.     </style>
  10. </head>
  11. <body>
  12. <div></div>
  13. </body>
  14. </html>
  15. 复制代码
  1. div{width:200px;height: 200px;background: pink;/*border: 3px solid red;*/border-bottom: 3px solid green;border-top:5px solid blue;
  2.             border-left: 10px dotted orange;border-right:15px double olivedrab;}
  3. 复制代码
css盒子模型的组成
  • 宽高+边框+内边框（内容和边框的距离padding）+外边距（盒子和盒子之间的距离margin）+盒子模型的组成
  1. div{width: 200px;height:200px;background: pink;border: 2px solid green}
  2. div{width: 200px;height:200px;background: pink;border: 2px solid green;padding: 20px}
  3. div{width: 200px;height:200px;background: pink;border: 2px solid green;/*padding: 20px;margin: 20px;*/padding: 10px 20px 30px 40px;}
  4. 复制代码
html5中独有的标签
  • header 头部
  • nav 导航
  • aside 侧导航
  • article 文章块
  • footer 底部
  • 注意：这些html5新标签只能使用在手机网站的书写中，可以提升搜索引擎对网站的优化，不能用在pc(电脑)端网站，因为ie低版本不识别这些新标签

psd文件

  • 图片放大缩小 alt+鼠标滚轮
  • 按住空格不放，拖拽鼠标可以改变图片的位置
  • 英文状态下按字母t,再点击想要查看的文字，就可以在菜单栏上看到所有属性（取消选中按esc键）
  • 点击查看间距，w代表宽，h代表高度
  • 注意：间距可以有3像素左右的误差
  • 选择第一个工具，点击自动按钮，再点击图片中的某个区域就可以在右侧的菜单中设置眼睛的开头
  • 注意：要把此处设置为像素才可以
  • text-align:center 居中

转载于:https://juejin.im/post/5caff99ee51d456e80351671

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Guff_9hys/article/detail/836625
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号