前端的基础入门

1、什么是前端

不管是PC端还是客户端，主要是Web技术栈解决多端用户交互的问题。

2、前端技术栈：

HTML--页面 JavaScript--行为 CSS--样式
浏览器通过http协议，去服务器端，返回进行渲染
关注点：无障碍功能美观安全性能

3、开发环境：

通过浏览器和编辑器，只需要一个编辑器进行编辑，存为html,再在浏览器打开即可运行，入门较低。

4、什么是HTML

HTML 指超文本标签语言。不夸张的说，HTML 是通向Web技术世界的钥匙。 HyperText--超文本(包含图片、标题、链接) ;Markup language 标记语言。例如<h>内容</h>运行后得到 “内容”这两个字。其中<h>是标签，标签内可以进行嵌套内容，比如<img src="photo.jpg" />,标签内不再嵌套其他内容的时候，可以以/结尾,规范的话是应该写为 /img。

5、HTML实例解读

<!doctype html>
<html>
 <head>
  <meta charest="UTF-8">
  <title> This is your title!</title>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>

相信大家对这段话不陌生，这是html入门的第一个实例。今天我们需要对这段代码进行深刻的理解和认识。

doctype 决定了渲染模式，如果不标明，可能样式不符
<html>是根标签
<head>是文本的信息，不需要进行展示
<body>是主要的展示内容

通过一个树形结构（叫DOM树）读取我们编写的内容，最终展示出来。展示一下运行结果：

屏幕截图 2023-07-27 210658.jpg

6、语法特点

空标签不会放其他内容，不写结束标签
属性值使用双引号，如果内容必填，加上required

7、列表

有序列表。有顺序<ol><li>内容</li> </ol>,有序列表始于 <ol> 标签。每个列表项始于 <li>标签。展示出来的每一行会在前面加上数字。
无序列表。<ul><li>内容</li> </ul>,此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
自定义列表

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

dd dt是多对多的关系

8、链接

<a href="URL">内容</a> href是创建向另一个文档的链接的属性。

Target属性可以定义被连接的文档在何处显示target="_blank是在新窗口打开
name属性，创建页面的书签时对锚进行命名。

9、图像

<img>定义图像标签，src是指source，图片来源的一个属性。例如<img src="URL" />这里省略img，原因前面第4节也提到了，可以再次巩固~ alt属性：img属于多媒体，部分情况下，用户默认不加载浏览器，用其他图片进行传达。加载失败的时候显示的文字。

表单控件

1、输入input

<form action="/action_page.php" id="form1">
  <label for="fname">姓氏：</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="submit" value="提交">
</form>

<label for="lname">名字：</label>
<input type="text" id="lname" name="lname" form="form1">

输出结果是：

屏幕截图 2023-07-27 212932.jpg

表单的基本格式 <form>表单内容</form>
下拉选择可以使用：<select> <option>第一个选择</select> </option>

2、引用

1）直接引用他人：<blockquote cite="http"> <p>天才是....</p> </bolckquote>

2）引用部分内容 <cite>书名</cite>

3）引用代码 <code>const<code>

总结

强调的是语义化，在更新的过程中，增加和删除标签是为了清晰的表达页面的结构。

语义化：元素、属性、属性值具有一些含义（比如img代表图像）。

开发者应该遵循语义进行开发。使用HTML需要有规划，开发者需要修改，浏览器是展示页面，搜索引擎在抓取关键词，建立索引和排序，需要进行规范。

写HTML的目的：是传达内容，而非展示样式。描述内容的时候选择标签

前端和HTML | 青训营