前端与HTML | 青训营笔记

Eliauk要努力
71 阅读3分钟

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

一、课前准备

HTML介绍

二、什么是前端

  • 解决GUI人机交互问题
  • 跨终端
  • Web技术栈

三、HTML

1. 标签介绍

<!doctype html>标记了当前使用的html文件的版本

<html></html>根标签，所有其他标签都是写在该标签内。

<head></head>放一些页面原数据，即页面需要但不必直接呈现给用户的信息，如页面标题、页面编码等。

<body></body>放一些需要真正呈现给用户的内容

<h1></h1>表示一级标题

<h2></h2>表示二级标题

以此类推···

<h6></h6>表示六级标题

<p></p>段落内容

<ol></ol>order list表示有序列表，里面每个列表项用<li></li>去表示，默认会展示123...

<ul></ul>unorder list表示无序列表，里面每个列表项用<li></li>去表示，默认会展示黑色实心圆点。

<dl></dl>definition list表示描述列表，<dt></dt>definition title描述列表的标题，<dd></dd>definition description描述列表的值，二者是多对多的关系。

<a></a>anchor（锚）表示链接，最重要的属性是href，其属性值是跳转到的链接地址，当target属性的属性值是“_blank“时，将打开一个新标签页来显示跳转后的页面。

<img>表示图片标签，属性src的属性值是图片地址，属性alt的属性值是当图片加载失败后原位置显示出来的信息，属性width的属性值是图片宽度。

<audio></audio>表示音频标签，属性src的属性值是音频地址，controls属性（没有属性值）表示默认显示播放控件来控制音频播放。

<video></video>表示视频标签，属性src的属性值是视频地址，controls属性（没有属性值）表示默认显示播放控件来控制视频播放。

<input></input>表示文本输入框，属性placeholder表示占位符，属性值是还未输入时默认的显示内容，属性type，属性值是range时会显示出一个滑动块供滑动选择；属性值是number时可以在后面添加属性min、max指定可输入数字的最小值最大值；属性值是date时可以在后面添加属性min、max指定可输入日期的最小值最大值；属性值是checkbox时可以进行多选；属性值是radio时后跟属性name，其属性值为sport，就只能进行单选。除此之外还可以给输入一些快捷的提示

image.png

<textarea></textarea>是一个可输入多行文字的文本框，标签内的内容是默认显示在文本框中的内容。

<select></select>表示下拉选择，里面每个选项写在<option></option>内。

<blockquote></blockquote>表示快捷引用，长引用，属性cite的属性值是地址，表示引用的来源。

<cite></cite>短引用，表示名字或某一章节。

<q></q>短引用，表述具体内容。

<code></code>表示代码，可长可短。如多行，code标签需被包含在<pre></pre>标签内。

<strong></strong>表示强调，更突出重要性，紧急性。

<em></em>表示强调，更突出语气。

标签内可有属性和属性值

浏览器会将代码解析成DOM树,如下

graph LR
document---&lthtml&gt
&lthtml&gt---&lthead&gt
&lthtml&gt---&ltbody&gt
&lthead&gt---&ltmeta&gt
&lthead&gt---&lttitle&gt
&lttitle&gt---&quotPage&nbspTitle&quot
&ltbody&gt---&lth1&gt
&lth1&gt---&quotHeading&quot
&ltbody&gt---&ltp&gt
&ltp&gt---&quotPage&nbspContent&quot

2.HTML语法

  • 标签和属性不区分大小写，推荐小写
  • 空标签可以不闭合，比如input、meta
  • 属性值推荐用双引号包裹
  • 某些属性值可以省略，比如required、readonly

3.语义化是什么

  • HTML中的元素、属性及属性值都具有某些含义
  • 开发者应该遵循语义来编写HTML（lang属性表示内容所使用的语言）

四、课后小结

今天是第一次上课，老师讲解了一些非常基础的知识，即使没有系统地学习过HTML，但以前接触HTML也用到过，感觉还是蛮有趣的，在这里可以更加系统化的学习，目前为止干劲满满，希望可以坚持下去，能够把所有知识梳理一遍，真正学到技术。

avatar
文章
阅读
粉丝