前端与HTML|青训营笔记

Louisvent
155 阅读2分钟

前端与HTML|青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第1天

前端技术栈

  • HTML(内容)
  • CSS(样式)
  • Javascript(行为)

image.png

初识HTML

什么是HTML

HTML(HyperText Markup Language)全称为超文本标记语言，它不是编程语言，而是一种标记语言。
它由一系列的元素(elements)组成。

分析HTML元素的组成

eg:<p>THis is my cat</p>

  1. 开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。表示元素从这里开始或者开始起作用
  2. 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾
  3. 内容（Content）：元素的内容
  4. 元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。

HTML属性

eg:<p class="note">THis is my cat</p>
class就是这个元素的属性，它可以识别这个元素的其他信息

HTML文档的结构

image.png

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"> 
    <title>标题</title>
  </head>
  <body>
    <p>段落内容</p>
  </body>
</html>
  • <!DOCTYPE html> 用来声明当前网页的版本
  • <html>是文档的根元素里面包含head，body
  • <head>里面包含了html中不可见的内容以及引入的CSS和Javascript
  • <meta>用来声明文档使用的语言，常用的为UTF-8包含了大部分的语言
  • <title>用来声明文档的标题
  • <body>中的内容为html中可见的内容

HTML语法

  • 标签不区分大小写但建议小写
  • 空标签可以不闭合
  • 属性值推荐用双引号包裹

HTML常用标签

列表

  • ul 无序列表
  • ol 有序列表
  • dl 定义列表

链接

使用<a>标签来实现
<a href="链接" target="跳转方式">
链接可以是外部网页也可以是内部链接
target可以选择_slef和_blank
_slef是页面自身跳转不打开新网页， _blank是打开新网页

输入

<input type="输入框的种类"> type可以是数字，日期，文件等

  • <textarea> 用户输入长文字
  • <checkbox> 方框多选
  • <radio> 圆形按钮可以限制只选择一个

语义化

什么是语义化

image.png

语义化是指用合理HTML标记以及其特有的属性去格式化文档内容。

语义化的好处

  1. 页面结构: 使页面没有css的情况下，也能够呈现出很好的内容结构
  2. 便于团队开发和维护: 语义化使得代码更具有可读性，让其他开发人员更加理解你的html结构，减少差异化。
  3. 方便其他设备解析: 如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页。
avatar
文章
阅读
粉丝