html基础&标签

html相关概念&&建站流程

html
- 英文：Hyper Text Markup Language
- 中文：超文本标记语言
  - 标记语言：描述网页的一种语言
  - 超文本：可以进行点击且跳转的文本或者图片等
网页的组成部分
- 结构(html)==w3c(万维网联盟)
- 样式(css)==w3c(万维网联盟)
- 行为(js)==ECMA(欧洲厂商联盟)
html的发展史
xhtml 可扩展的超文本标记语言
- xhtml和html的区别
  - xhtml后面必须带斜杠
  - xhtml的属性值必须是双引号
  - xhtml的标签必须都是小写
建站流程
- 申请域名
- 租用服务器
- 建设网站
  - 产品经理==>原型图
  - 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
    1. 双标签
    2. 加粗
    3. 在同一行显示
  - 倾斜 i em
    1. 双标签
    2. 倾斜
    3. 同一行显示
  - 下划线 u
    1. 双标签
    2. 加下划线
    3. 在同一行显示
  - 删除线 del
    1. 双标签
    2. 加删除线
    3. 在同一行显示
  - 下标 sub
  - 上标 sup
  - 水平线 hr
    1. 单标签
  - 换行标签 br
    1. 单标签，强制换行
- 特殊字符
  - 空格
  - 左尖括号 <
  - 右尖括号 >
  - 版权符号 ©
  - 注册商标 ®
图片
- 单标签
- src 图片路径
  - 绝对路径
  - 相对路径
    1. 当前文件和目标文件在同一个目录下面，直接图片名.后缀
    2. 当前文件和目标文件的文件夹在同一个目录下面目标文件文件夹名/图片名.后缀
    3. 当前文件的文件夹和目标文件的文件夹在同一个目录下面，当前文件套几层就写几个../目标文件文件夹名/图片名.后缀
- alt 图片未加载成功的时候的提示
- title 提示文本，鼠标滑到图片标签的提示信息，可以加在任何标签
- width 宽度
- height 高度
超链接
- 双标签
- 自带下划线，自带字体颜色
- href: 链接的地址默认值 href="#"
- target
  - _self 当前窗口打开默认值
  - _blank 新开一个窗口打开

vscode快捷键

保存 ctrl+s
注释 ctrl+/
向前缩进 shift+tab
向后缩进 tab
全选 ctrl+a
搜索 ctrl+f
撤销 ctrl+z
反撤销 ctrl+y

html相关概念&&建站流程

html的基本结构

html的语法

html的基本标签

vscode快捷键

猜你喜欢