web前端的初学一周
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、作用:解决冲突 左右尖括号、添加多个空格的实现
& & & and符号,与
“ " " 引号
© © © 版权标志
® ® » 注册标志
™ ™ ™ 商标标志
“ “ “ 左双引号
” ” ” 右双引号
< < < 小于号
> > > 大于号
≤ ≤ ≤ 小于等于号
≥ ≥ ≥ 大于等于号
× × × 乘号
÷ ÷ ÷ 除号
− − − 减号
± ± ± 加/减 号
≠ ≠ ≠ 不等于号
¥ ¥ ¥ 人民币元
€ € € 欧元   空格
————————————————
版权声明:本文为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前端的初学一周相关推荐
- Web前端学习第五周
Web前端学习第五周 strong和b.em和i strong 和 em 都是表示强调的标签,表现形态为文本加粗和斜体. b 和 i 标签同样也表示文本加粗和斜体. 区别在于,strong和em 是具 ...
- Web前端学习总结第一周
目录 前言 一.HTML和CSS概述 1.W3C 2.HTML 3.CSS CSS的作用 二.HTML术语 1.HTML注释 2.HTML元素 ⑴元素的组成部分 ⑵属性 3.层次关系 ⑴嵌套 ⑵若A直 ...
- 【web前端开发】第一周 初识HTML
1.HTML5发展历程 HTML的出现由来已久,1993年HTML首次以因特网的形式发布.随着HTML的发展,W3C(World Wide Web Consortium,万维网联盟)掌握了对HTML规 ...
- Web前端学习第六周
一百一十二.b标签和i标签 strong和em都表示强调的标签,表现形态为文本加粗和斜体.b和i标签同样也表示文本加粗和斜体. 区别在于,strong和em是具备语义化的,而b和i是不具备语义化的. ...
- Web前端开发------第五周
strong和b.em和i标签 几者都是表示强调的标签,表现为加粗和斜体 区别在于strong和em是具备语义化的,而b和i不具备语义化 引用标签 blockquote:引用大段解释 q:引用小段的短 ...
- web前端学习,第二周
二十一.嵌套列表 1.1 列表之间可以互相嵌套,形成多层级的列表 代码: <ul><li> 辽宁省<ul><li>沈阳</li><li ...
- 数字开头的正则表达式_初学Web前端要注意什么 正则表达式是怎么回事
初学Web前端要注意什么?正则表达式是怎么回事?很多初学Web前端的同学对于正则表达式的印象就是难学,全是各种各样的特殊符号,完全没有规律可循,根本不知道怎么下手.不过真正了解正则表达式之后,你会发现 ...
- 初学WEB前端的建议,你不看给别人可惜了!
初学WEB前端的建议 计算机语言及发展历程(了解) 计算机语言 : c语言 java c++ php python JavaScript VBScript c# 计算机语言发展 第一代 : 机器语言 ...
- Web前端从入门到精通(第五周)
Web前端从入门到精通(第五周) b标签和i标签 strong和b.em和i? 引用标签基本操作 iframe嵌套页面 br标签与wbr标签 pre标签与code标签 map标签与area标签 emb ...
- Web前端从入门到精通(第一周)
Web前端从入门到精通(第一周) HTML+CSS系列之导学 1.拨云见日:HTML.CSS.切图流程.PC企业布局.PC游戏站布局 2.溯本求源:扩展HTML.扩展CSS.HTML5新语法.CSS3 ...
最新文章
- AD恢复(3)使用AD回收站
- 解决:Sublime Text3 packagecontrol.io 无法访问的问题
- 图形处理(十二)拉普拉斯网格优化、最小二乘网格模型光顺
- 设计模式六大原则_设计模式—设计六大原则
- cocos2d-x初探学习笔记(18)--Lable
- 单行溢出 和多行溢出
- python表情符号编码大全_Emoji的编码以及常见问题处理
- flask 继承模版的基本使用1
- uoj #111. 【APIO2015】Jakarta Skyscrapers
- java工程师占比_2020年Java工程师就业分析
- 《Flutter 从0到1构建大前端应用》读后感—第4章【事件处理】
- ichariot测试路由器有线转发性能
- 利用SolidWorks解决方案取得健身器材市场的领先地位!
- SPSS步骤|卡方检验详细操作和结果分析
- linux pam认证 用户名,Linux-PAM 认证 模块
- 博主眼中的SEM竞价推广
- 4 windows安装vs6 - vs2017
- MATLABnbsp;nbsp;median函数amp;nbs…
- linux软件源历史版本,解决deepin 15.9.2以后版本软件太旧的问题,混合lion与panda源使用...
- 计算机信息的一般处理过程,信息一般处理过程包括什么?