html相关概念&&建站流程
- html
- 英文：Hyper Text Markup Language
- 中文：超文本标记语言
- 标记语言：描述网页的一种语言
- 超文本：可以进行点击且跳转的文本或者图片等
- 网页的组成部分
- 结构(html)==w3c(万维网联盟)
- 样式(css)==w3c(万维网联盟)
- 行为(js)==ECMA(欧洲厂商联盟)
- html的发展史
- xhtml 可扩展的超文本标记语言
- xhtml和html的区别
- xhtml后面必须带斜杠
- xhtml的属性值必须是双引号
- xhtml的标签必须都是小写
- xhtml和html的区别
- 建站流程
- 申请域名
- 租用服务器
- 建设网站
- 产品经理==>原型图
- ui设计师==>ui设计图
- 前端工程师==>将ui设计图百分百还原
- 后端工程师==>将静态网页转换成动态(数据动态)的
- 测试工程师==> 保证页面功能/性能没有问题
- 推广
- 维护
html的基本结构
- 手动编写
<!-- 声明文档类型 -->
<!DOCTYPE html>
<html>
<!-- 头部 -->
<head>
<!-- 网页的编码格式 -->
<meta charset="UTF-8">
<title>网页的标题</title>
</head>
<body>
主体 文字，图片等
</body>
</html>
- 自动生成网页基本结构
- 新建一个.html后缀名的文件
- 英文状态下，写出 ! 按回车或者tab键
- alt+b运行到浏览器
html的语法
- 标签/标记/元素：放到尖括号里面的单词
- 双标签/标记：成对出现的标签
- 单标签/标记/空标签：单独出现的标签
- 属性：放到标签后面，且用空格隔开
- 属性值：属性和属性值之间用等号连接，属性值要用引号引起来，可以出现多个属性，且每个属性之间用空格隔开
html的基本标签
- 文章类
- 标题标签 h1-h6
- 双标签
- h1-h6字体逐渐变小，且加粗
- 独占一行
- 段落标签 p
- 双标签
- 独占一行
- 修饰类标签
- 加粗 b strong
- 双标签
- 加粗
- 在同一行显示
- 倾斜 i em
- 双标签
- 倾斜
- 同一行显示
- 下划线 u
- 双标签
- 加下划线
- 在同一行显示
- 删除线 del
- 双标签
- 加删除线
- 在同一行显示
- 下标 sub
- 上标 sup
- 水平线 hr
- 单标签
- 换行标签 br
- 单标签，强制换行
- 加粗 b strong
- 特殊字符
- 空格
- 左尖括号 <
- 右尖括号 >
- 版权符号 ©
- 注册商标 ®
- 标题标签 h1-h6
- 图片
- 单标签
- src 图片路径
- 绝对路径
- 相对路径
- 当前文件和目标文件在同一个目录下面，直接图片名.后缀
- 当前文件和目标文件的文件夹在同一个目录下面 目标文件文件夹 名/图片名.后缀
- 当前文件的文件夹和目标文件的文件夹在同一个目录下面，当前文件套几层就写几个../目标文件文件夹名/图片名.后缀
- alt 图片未加载成功的时候的提示
- title 提示文本，鼠标滑到图片标签的提示信息，可以加在任何标签
- width 宽度
- height 高度
- 超链接
- 双标签
- 自带下划线，自带字体颜色
- href: 链接的地址 默认值 href="#"
- target
- _self 当前窗口打开 默认值
- _blank 新开一个窗口打开
vscode快捷键
- 保存 ctrl+s
- 注释 ctrl+/
- 向前缩进 shift+tab
- 向后缩进 tab
- 全选 ctrl+a
- 搜索 ctrl+f
- 撤销 ctrl+z
- 反撤销 ctrl+y