HTML学习笔记|青训营笔记

84 阅读2分钟

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

HTML和前端

前端不仅要关注技术,还要关注功能、美观、无障碍、安全 electron、webGL

1.什么是HTML?

HyperText Markup Language,HTML不是一门编程语言,而是一种告知浏览器如何去阻止页面的标记语言,用标签来表示。由一系列elements组成。

img等一些里面无需嵌套内容可以省略结束标签

[1] doc type

<!DOCTYPE>

这个声明并不是一个HTML标签,而是用来告知Web浏览器页面使用的html版本

[2] head标签内部

放一些页面的元数据,页面的编码、标题

[3] body标签内部

放一些用户可见的内容

2.HTML页面渲染和标签

浏览器会对html进行解析,html解析器将html文本解析成一颗dom树

截屏2022-07-24 14.48.57.png

[1]列表相关标签

  1. ol——ordered list
  2. ul——unordered list
  3. dl/dt/dd——data list?data title?data data

[2]链接标签

a标签,href指定跳转链接,新建页面跳转target=“_blank”

[3]多媒体标签

浏览器多媒体标签中属性加入controls才会显示多媒体的控制按钮

[4]输入标签

  1. input标签/textarea标签

一些常用属性 【placeholder】提示 【type】date/number/textarea/range(滑块)/password

  1. select-options 下拉选择菜单
  2. checkbox 复选框
  3. radio 单选框

[5]文字展示标签

  1. blockquote-长引用标签
  2. p-段落标签
  3. cite-规定引用来源
  4. code-代码标签
  5. pre+code-多段代码标签
<!-- 单行: -->
<code></code>

<!-- 多行 -->
<pre>
    <code></code>
</pre>

<pre>标签用来定义与格式化的文本,被包围在pre标签中的文本通常会保留空格和换行符,是一个块级元素,<code>是一个行内元素,用<pre>包裹<code>来展示多行代码
  1. strong-强调
  2. em-一句话中突出表示的一个词

3.html里为什么需要这么多标签,标签起到了什么作用?

语义化

  1. 元素、属性和属性值都拥有某些含义
  2. 开发者应遵循语义来编写HTML

html语法的一些小tips:

  1. 标签和属性不区分大小写,推荐小写
  2. 空标签可以不闭合必入input、meta
  3. 属性值推荐用双引号包裹
  4. 某些属性值可以省略,required、readonly