web前端的三大核心技术

vscood的使用

vscood的快捷键

1、注释:a) 单行注释:[ctrl+k,ctrl+c] 或 ctrl+/b) 取消单行注释:[ctrl+k,ctrl+u] (按下ctrl不放,再按k + u)c) 多行注释:[alt+shift+A]d) 多行注释:/**2、移动行:alt+up/down3、显示/隐藏左侧目录栏 ctrl + b4、复制当前行:shift + alt +up/down5、删除当前行:shift + ctrl + k6、控制台终端显示与隐藏:ctrl + ~7、查找文件/安装vs code 插件地址:ctrl + p8、代码格式化:shift + alt +f9、新建一个窗口 : ctrl + shift + n10、行增加缩进: ctrl + [11、行减少缩进: ctrl + ]12、裁剪尾随空格(去掉一行的末尾那些没用的空格) : ctrl + shift + x13、字体放大/缩小: ctrl + ( + 或 - )14、拆分编辑器 : ctrl + 1/2/315、切换窗口 : ctrl + shift + left/right16、关闭编辑器窗口 : ctrl + w17、关闭所有窗口 : ctrl + k + w18、切换全屏 : F1119、自动换行 : alt + z20、显示git : ctrl + shift + g21、全局查找文件:ctrl + shift + f22、显示相关插件的命令(如:git log):ctrl + shift + p23、选中文字:shift + left / right / up / down24、折叠代码: ctrl + k + 0-9 (0是完全折叠)25、展开代码: ctrl + k + j (完全展开代码)26、删除行 : ctrl + shift + k27、快速切换主题:ctrl + k / ctrl + t28、快速回到顶部 : ctrl + home29、快速回到底部 : ctrl + end30、格式化选定代码 :ctrl + k / ctrl +f31、选中代码 : shift + 鼠标左键32、多行同时添加内容(光标) :ctrl + alt + up/down33、全局替换:ctrl + shift + h34、当前文件替换:ctrl + h35、打开最近打开的文件:ctrl + r36、打开新的命令窗:ctrl + shift + c37、保存:ctrl+s38、全选:ctrl+a39、快速复制一行:ctrl+v40、复制:ctrl+c41、剪切:ctrl+x42、撤销,前进:ctrl+z,ctrl+y43、从头选中一行:shift+end44、快速移动一行:Alt+ ↑ / ↓45、向上/向下复制行:Shift+Alt + ↓ / ↑

HTML的基本结构与属性

HTML:超文本,标记,语言

超文本

超文本:文本内容+非文本内容(图片,视频,音频等)

标记

标记也叫标签,写法分为单标签和双标签

语言

语言为编程语言

常见标签

[常见的基本标签]
(https://www.w3school.com.cn/tags/index.asp)

初始代码

:文档声明 html文件的最外层标签:包裹着所有html标签代码 lang="en表示一个英文网站 lang="zh-cn"表示一个中文网站 元信息:编写网页中的一些赋值信息 charsset="UTF-8"国际编码,让网页不出现乱码的情况

<!DOCTYPE html>  :文档声明
<html lang="en">       html文件的最外层标签:包裹着所有html标签代码  lang="en表示一个英文网站 lang="zh-cn"表示一个中文网站
<head><meta charsset="UTF-8">      元信息:编写网页中的一些赋值信息  charsset="UTF-8"国际编码,让网页不出现乱码的情况<meta name="viewport" content="width=device-width,inital-scale=1.0">    <meta http-equiv="X-UA-compatible"content="ie=edge"><title>Document</title>       设置网页的标题</head><body>显示网页内容的区域</body></html>

HTML注释

写法:在浏览器中看不到,只能在代码中看到注释的内容
意义:
1、吧暂时不用的代码注释起来,方便以后使用。
2、对开发人员进行提示。
快捷添加与删除注释:
1、ctrl+/
2、shift+alt+a

HTML语义化

HTML语义化:根据网页中内容的结构,选择合适的HTML标签进行编写。
好处:
1、在没有css的情况下,页面也能呈现出很好的内容结构。
2、有利于SEO,让搜索引擎爬虫更好的理解网页。
3、方便其他设备解析(如屏幕阅读器、盲人阅读器)。
4、便于团队开发与维护。

标题与段落

标题 -> 双标签:


例子

一个html文件中只能出现一次h1标签
段落 ->双标签:

文本修饰标签

<strong></strong>    强调 加粗字体
<em></em>    强调斜体
<sub>、<sup>:下标文本、上标文本
<del>、<ins>:删除文本、插入文本


图片标签与图片属性

img -> 单标签
src : 引入图片的地址。
alt :当图片出现问题时,可以显示一段友好的提示文字。
title:提示信息
width、height:图片大小

引入文件的地址路径

1、相对路径
2、绝对路径

跳转链接

链接标签

a->双标签   <a></a>
href属性:链接地址   形式:<a href="网址">访问+网址名</a>
target属性:<a href="网址" target="-black">访问+网址名</a>
base->单标签   作用改变连接的默认行为

特殊符号

1、组成:&+字符
2、作用:解决冲突 左右尖括号、添加多个空格的实现

&    &amp;   &#38;   and符号,与
“   &quot;  &#34;   引号
©   &copy;  &#169;  版权标志
®   &reg;   &#187;  注册标志
™   &trade; &#153;  商标标志
“   &ldquo; &#147;  左双引号
”   &rdquo; &#148;  右双引号
<    &lt;    &#60;   小于号
>    &gt;    &#62;   大于号
≤   &le;    &#8804; 小于等于号
≥   &ge;    &#8805; 大于等于号
×   &times; &#215;  乘号
÷   &divide;    &#247;  除号
−   &minus; &#8722; 减号
±   &plusmn;    &#177;  加/减 号
≠   &ne;    &#8800; 不等于号
¥   &yen;   &#165;  人民币元
€   &euro;  &#8364; 欧元&nbsp;    &#160;  空格

————————————————
版权声明:本文为CSDN博主「青颜的天空」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/a1056244734/article/details/107235102

无序列表

采用<ul>、<li>:列表的最外层容器、列表项
注:ul个li必须是组合出现,他们之间是不能有其他标签的,且符合嵌套的规范

或<li>+<a href="网址">访问+网址名</a></li>
type属性:改变前面标记的样式
disc         默认值、实心圆
circle      空心圆
square    实心方块
例如:<ul  type="disc  ">(第一个ul)

有序列表

例如:

<ol>、<li>:列表的最外层容器、列表项
注:有序列表用的非常少,经常用的是无序列表,无序列表可以代替有序列表,和无序列表的要求一样,也可以用type来改变前面标记的样式
1     默认值(1、2、3....)
a     按字母顺序来排列,小写(a,b,c...)
A       按字母顺序来排列,大写(A,B,C...)
i       罗马字母 ,小写(i,ii,iii,iv...)

定义列表

<dl>:定义列表
<dt>:定义专业术语或名词
<dd>:对名词进行解释和描述


嵌套列表

列表之间可以互相嵌套,形成多层级列表



定义列表的格式和语法规则同上

web前端的初学一周相关推荐

  1. Web前端学习第五周

    Web前端学习第五周 strong和b.em和i strong 和 em 都是表示强调的标签,表现形态为文本加粗和斜体. b 和 i 标签同样也表示文本加粗和斜体. 区别在于,strong和em 是具 ...

  2. Web前端学习总结第一周

    目录 前言 一.HTML和CSS概述 1.W3C 2.HTML 3.CSS CSS的作用 二.HTML术语 1.HTML注释 2.HTML元素 ⑴元素的组成部分 ⑵属性 3.层次关系 ⑴嵌套 ⑵若A直 ...

  3. 【web前端开发】第一周 初识HTML

    1.HTML5发展历程 HTML的出现由来已久,1993年HTML首次以因特网的形式发布.随着HTML的发展,W3C(World Wide Web Consortium,万维网联盟)掌握了对HTML规 ...

  4. Web前端学习第六周

    一百一十二.b标签和i标签 strong和em都表示强调的标签,表现形态为文本加粗和斜体.b和i标签同样也表示文本加粗和斜体. 区别在于,strong和em是具备语义化的,而b和i是不具备语义化的. ...

  5. Web前端开发------第五周

    strong和b.em和i标签 几者都是表示强调的标签,表现为加粗和斜体 区别在于strong和em是具备语义化的,而b和i不具备语义化 引用标签 blockquote:引用大段解释 q:引用小段的短 ...

  6. web前端学习,第二周

    二十一.嵌套列表 1.1 列表之间可以互相嵌套,形成多层级的列表 代码: <ul><li> 辽宁省<ul><li>沈阳</li><li ...

  7. 数字开头的正则表达式_初学Web前端要注意什么 正则表达式是怎么回事

    初学Web前端要注意什么?正则表达式是怎么回事?很多初学Web前端的同学对于正则表达式的印象就是难学,全是各种各样的特殊符号,完全没有规律可循,根本不知道怎么下手.不过真正了解正则表达式之后,你会发现 ...

  8. 初学WEB前端的建议,你不看给别人可惜了!

    初学WEB前端的建议 计算机语言及发展历程(了解) 计算机语言 : c语言 java c++ php python JavaScript VBScript c# 计算机语言发展 第一代 : 机器语言 ...

  9. Web前端从入门到精通(第五周)

    Web前端从入门到精通(第五周) b标签和i标签 strong和b.em和i? 引用标签基本操作 iframe嵌套页面 br标签与wbr标签 pre标签与code标签 map标签与area标签 emb ...

  10. Web前端从入门到精通(第一周)

    Web前端从入门到精通(第一周) HTML+CSS系列之导学 1.拨云见日:HTML.CSS.切图流程.PC企业布局.PC游戏站布局 2.溯本求源:扩展HTML.扩展CSS.HTML5新语法.CSS3 ...

最新文章

  1. AD恢复(3)使用AD回收站
  2. 解决:Sublime Text3 packagecontrol.io 无法访问的问题
  3. 图形处理(十二)拉普拉斯网格优化、最小二乘网格模型光顺
  4. 设计模式六大原则_设计模式—设计六大原则
  5. cocos2d-x初探学习笔记(18)--Lable
  6. 单行溢出 和多行溢出
  7. python表情符号编码大全_Emoji的编码以及常见问题处理
  8. flask 继承模版的基本使用1
  9. uoj #111. 【APIO2015】Jakarta Skyscrapers
  10. java工程师占比_2020年Java工程师就业分析
  11. 《Flutter 从0到1构建大前端应用》读后感—第4章【事件处理】
  12. ichariot测试路由器有线转发性能
  13. 利用SolidWorks解决方案取得健身器材市场的领先地位!
  14. SPSS步骤|卡方检验详细操作和结果分析
  15. linux pam认证 用户名,Linux-PAM 认证 模块
  16. 博主眼中的SEM竞价推广
  17. 4 windows安装vs6 - vs2017
  18. MATLABnbsp;nbsp;median函数amp;nbs…
  19. linux软件源历史版本,解决deepin 15.9.2以后版本软件太旧的问题,混合lion与panda源使用...
  20. 计算机信息的一般处理过程,信息一般处理过程包括什么?

热门文章

  1. 树莓派4B安装WPS步骤及缺失字体问题
  2. 文本信息过滤中的变体词识别(一)
  3. 12张大数据图看看2016年世界各地发生大事件!
  4. 文学-诗词-词人:词人
  5. 我的职业梦计算机软件,我的职业梦作文1000字
  6. python画美女代码_3分钟画字符画跟女神表白,利用python字符串、列表方法
  7. 节假日表-BaseHolidaysManager
  8. docker迁移禅道
  9. 《系统集成项目管理》第九章 项目成本管理
  10. 教你制作高逼格的技术分享Keynote(PPT)