您的位置: 首页  >  文章  >  html是web前端的入门必学，你真的学完了吗?

html是web前端的入门必学，你真的学完了吗?

分类: 文章 • 2024-12-28 22:47:16

html是web前端的入门必学，你真的学完了吗?

html

  • 概念
  • 前端最核心的技术 HTML + CSS + javascript
  • HTML - 结构 - 骨架
  • CSS - 样式 - 效果
  • JAVASCRIPT - (用户)行为 - 做的事情
  • 超文本标记语言
  • 超文本
  • 文本(txt文件) - 浏览器可以直接打开
  • 如果具有中文，可能出现乱码问题
  • 标记
  • 语法结构 - <标签名>
  • 注意 - 浏览器解析标记（规定的标记内容）
  • 注意
  • HTML是不严格的语言
  • 允许不用编写所有内容
  • 标签名没有明确的规定(大小写)
  • 建议标签名使用小写
  • XHTML
  • 解释为严格意义的HTML

html是web前端的入门必学，你真的学完了吗?

HTML结构

HTML结构

<!DOCTYPE html> - 声明:当前页面使用的是哪个HTML版本

<html lang="en">- 根标签:有且仅有一个

<head>- 用于设置当前页面的信息

<meta charset="UTF-8"> - 设置当前页面的编码

<title>Title</title> - 当前页面的标题

</head>

<body>- 用于显示在浏览器中

</body>

</html>

声明

  • 注意 - 必须在HTML文档的 0 行 0 列
  • 记住 - HTML5的声明
  • 作用 - 告诉浏览器当前HTML页面使用的版本
  • 不同的HTML版本支持不同的标记(标签)内容

根标签

  • <html></html>
  • 除声明以外，所有内容全部被包含在根标签中
  • 注意 - 有且仅有一个
  • 标记（标签）
  • 起始标签 - 有开始，有结束
  • 开始标签 - <标签名>
  • 结束标签 - </标签名>
  • 空标签 - 只有开始标签
  • <br/>- 换行标签
  • 注意 - 建议使用小写

<meta>元素

  • 第一个作用 - 设置当前HTML页面的编码格式
  • <meta charset="UTF-8">
  • 第二个作用 - 设置当前HTML页面的关键字
  • <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
  • 第三个作用 - 设置当前HTML页面的描述(很少)
  • <meta name="description" content="Free Web tutorials on HTML and CSS">
  • 第四个作用 - 设置当前HTML页面的作者
  • <meta name="author" content="King">

HTML属性

  • 出现在标签中的开始标签中，而不是结束标签
  • 格式
  • 属性名=属性值
  • 属性值 - 必须使用双引号包裹

HTML页面被搜索引擎抓取

  • <title>元素 - 页面的标题
  • <meta name="keywords">元素 - 页面的关键字
  • <h1>元素 - 标题

分类

  • 私有属性 - 当前标签独有的属性
  • 标准属性 - 几乎所有标签都有的属性
  • 事件属性 - 标准事件(了解)

HTML标题

  • <h1> ~ <h6> - 从最大到最小
  • 并不关心标题显示的效果 - 可以通过 CSS 完成
  • 关心标题的 语义化
  • 语义化 - 当前标签的含义

HTML列表

  • 有序列表

<ol>

<li></li>

</ol>

  • 默认情况下 - 1,2,3,4,5…
  • 无序列表

<ul>

<li></li>

</ul>

  • 默认情况下 - 黑点
  • 定义列表

<dl>

<dt>列表名称</dt>

dd>列表项</dd>

</dl>

  • HTML链接

<a href="地址"></a>

链接元素

  • 作用
  • 用于从当前页面跳转到另一个(指定)页面
  • 实现锚点效果
  • 实现回到顶部效果
  • 实现发送邮件功能(了解)
  • href=“mailto:邮件地址”
  • 路径(地址)
  • 绝对路径 - 查找的开始位置是固定
  • 相对路径 - 查找的开始位置是变化
  • 在实际开发中，使用更多
  • 完整的地址
  • http:// localhost : 8080 /day02 #name
  • 网络协议 IP地址 端口号 相对路径 锚点
  • localhost - 等价于 127.0.0.1 - 表示本机
  • 网络访问 - 通过互联网
  • http://192.168.10.165:63342/D…
  • file:///C:/0507/DAY02/CODE/00.html

C:\0507\DAY02\CODE\00.html

  • 本地访问 - 和网络无关

html是web前端的入门必学，你真的学完了吗?

图片元素

  • <img> - 空标签，没有结束标签
  • 必要属性 - src属性

可选属性

  • width
  • height
  • 单位
  • 像素值
  • 百分值

HTML表格

  • 概念 - 具有行和列（单元格）
  • 行 - 表示水平方向（多个单元格）
  • 列 - 表示垂直方向（多个单元格）
  • HTML表格
    • 表示为表格
  • 作用
  • 表格的语义化 - 配合 CSS 可以实现漂亮的表格效果
  • 利用表格的行和列的概念 - 实现页面元素的布局
  • HTML表单
  • <form>标签
  • 语义化 - 表示为表单
  • 容器元素 - 浏览器中不会有任何显示效果
  • 文件的编码格式 - UTF-8
  • HTML页面的编码格式 - UTF-8
  • <meta charset="UTF-8">
  • 设置当前HTML页面的编码格式
  • 在浏览器运行当前HTML页面时，告诉浏览器当前的编码格式
  • 字符集
  • 概念 - 存放所使用的所有的字符（汉字）

分类

  • ANSI - 美国
  • ISO-8859-1 - 欧洲
  • GBK - 中国
  • GB2312
  • Unicode - 万国码
  • UTF-8 - 主要使用
  • UTF-16
  • 计算机的存储方式
  • 利用二进制方式 - 1和0
  • 中国
  • 存储 - 将汉字 “中国” 转换成 二进制 进行存储 - GBK
  • 读取 - 将 二进制 转换成 “中国” 进行显示 - UTF-8

希望本文对你有所帮助，有句话叫做“方法不对，努力白费”所有的前端大神都有自己的学习方法，而学web前端的学习也基本一致，而对于一个什么都不懂的初学者，根本不会知道该怎么学，这也是造成失败的最直接原因。如果你处在迷茫期，找不到方向。可以加入我们的前端学习秋秋qun ：⑦⑥⑦-②⑦③-①零②
（从零基础开始到前端项目实战教学分享，学习工具，职业规划指导）点：前端学习交流圈

相关推荐