一、三大核心语言
- HTML(Hypertext Markup Language) 超文本标记语言 结构
- CSS(Cascading Style Sheets) 层叠样式表 样式
- JS(JavaScript) 脚本语言 行为,动作
1.后缀
.html 网页
.css 样式
.js 脚本
2.标签(标记,元素)
大部分都是成对出现的,也有单独出现的
由尖角号+关键字组成
成对出现的,前边的叫开始标签,后边的叫结束标签
单独出现的标签,叫空标签或者自闭合标签
标签上有自己的属性
3.属性
<h2 title='标题'>人物外貌编辑</h2>
位置: 设置在开始标签里,关键词的后边
4.注释
html :
css : /* 注释文本 */
快捷键 : ctrl + /
二、基本结构
<!DOCTYPE html>
<!-- 声明文档: 告诉浏览器的解析器,该文档是一个html文件 不是一个标签,是一条声明语句-->
<html>
<!-- 根标签: 所有标签都要放到html标签里 -->
<head>
<!-- 头部容器 -->
<meta charset="UTF-8">
<!--
设置编码格式
常见的编码格式:
GBK:国标库
gb2312 : 中文简体
utf-8 : 万国码
-->
<title>hello world</title>
<!-- 设置页面的标题 -->
</head>
<body>
<!-- 主体 -->
<h2 title='标题'>人物外貌编辑</h2>
<p>穿着:总喜欢戴一个蓝帽子,上身穿一件带窟窿地白色背心,下穿一个所谓的“七分裤”,一双大皮鞋。
特点:一说话嘴老抽,他妈在梦里给他说是小时候掉冰窟窿里了,给冻成的(见《本山快乐营》)。
现居住地:象牙山。</p>
</body>
</html>
三、常用标签
1.块标签
特点:独占一行,可以设置宽高
-
h1 – h6 标题标签
- 注意:一个页面只能写一个h1标签,合理使用,有利于seo优化
-
p 段落
-
div 无语义,用来布局的容器,用来画大块
-
hr 分割线 空标签
2.内联标签
特点:多个内联标签在一行显示,不能设置宽高
-
strong 加粗 起强调作用
-
b 加粗
-
em 倾斜 起强调作用
-
i 倾斜
-
span 无语义,用来布局,用来画小块
-
br 换行 空标签
-
sub 定义下标文字
-
sup 定义上标文字
-
del 删除标签
-
a 超链接
-
href属性:设置要跳转的页面地址
-
跳转到网址
<a href="https://www.baidu.com" target="_blank">百度</a>
-
跳转到本地的其他页面
<a href="./3.图片标签.html">本地另一个页面</a>
-
锚点链接(跳转到本页面的其他位置)
- 首先给要跳转的地方设置id属性(id属性值是唯一的),再给a标签的href属性里设置 #加上id的值
<a href="#html">html</a> <a href="#css">css</a> <a href="#js">js</a> <div id="html">html</div> <hr> <div id="css">css</div> <hr> <div id="js">js</div>
-
跳转到另外一个页面的某个位置
在当前页面a标签的href属性里设置另一页面的路径,再加上#id名
id名就是另一个页面里要跳转的位置上设置的id属性
当前页面里: <a href="./4.anther.html#hei">跳转到anther</a> 4.anther.html页面里: <div id="hei">嘿嘿嘿</div>
-
下载文件
<a href="./1.哈哈.doc">下载doc文件</a> <a href="./机密文件.txt">下载txt文件</a> <a href="../zhaosi.png">下载图片</a>
-
不知道跳转到哪先用#代替
-
-
target: _self (默认,在当前窗口打开) _blank(在新窗口打开)
-
3.内联块标签
特点:多个内联块标签在一行显示,可以设置宽高
- img 图片标签
- src 属性: 用来引入图片的路径
- alt 属性: 当图片路径错误或者找不到图片加载不出来的时候显示
- title属性: 鼠标移入图片上的时候的提示信息
- width属性 : 设置图片的宽度
- height属性: 设置图片的高度
四、引入文件的路径
1.绝对路径
- 从https://… 完整的网址
- 从盘符开始的路径 c:/ … (特别不推荐使用)
2.相对路径
- 当前文件夹 直接文件名加后缀 或者 ./ 文件名加后缀
- 下一级目录 ./文件夹的名字/文件名加后缀
- 上一级目录 …/
- 上上一级目录 …/…/
五、浏览器的内核
谷歌 chrome 内核: webkit – 》 13年 blink
火狐 Firefox 内核 : gecko
微软 IE 内核 : trident
欧朋 opera 内核 : presto --》 webkit —> blink
苹果 safari 内核 : webkit
六、拓展(了解)
代码 效果 描述
< < 小于号或显示标记
> > 大于号或显示标记
& & 可用于显示其它特殊字符
® ® 已注册
© © 版权
&trade ™ 商标
  不断行的空白
七、什么是语义化?语义化的好处
使用合适的标签和属性来格式化文档,如:段落p 标题用h1-h6
好处:
- 如果css样式丢失,也能很好的显示页面
- 有利于seo优化
- 有利于团队的开发和维护
- 用户体验更好
八、vscode快捷键(了解)
- ctrl + / 注释
- shift+alt + 下箭头 快速的向下复制一行
- alt + 下箭头 (alt + 上箭头) 快速的切换两行的位置
- ctrl + d 快速选中相同的关键词
- alt + 鼠标点击 使光标在多处选中
- ctrl + shift + v 预览.md格式的文件
- ctrl + f 查找
- ctrl + h 查找替换
- shift + alt + f 格式化