前端与HTML｜ 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的第1天
什么是前端
-
解决GUI人机交互问题
-
跨终端
- PC/移动浏览器
- 客户端/小程序
- VR/AR等
-
Web技术栈
前端技术栈
- HTML（内容框架）
- CSS（样式）
- Javascript（行为）
后三者与服务器端通过HTTP协议连接起来
HTML讲解与部分用法
HTML是超文本标记标签 在一个完整的HTML文件中有以下
doctype是标记了当前使用的HTML文件是什么版本，告诉浏览器用了什么版本的HTML
<html></html>所有的文档都需要写入其中
<head></head>放入不需要呈现给用户的内容
<body></body>放入需要呈现给用户的内容
HTML用法
-
标题：
<h1></h1>到<h6></h6> -
列表
有序列表：
<ol>
<li>···</li>
<li>···</li>
<li>···</li>
</ol>
复制代码
无序列表
<ul>
<li>···</li>
<li>···</li>
<li>···</li>
</ul>
复制代码
其他列表
<dl>
<dt>···</dt>
<dl>···</dl>
<dl>···</dl>
</dl>
复制代码
-
链接
<a href="链接" target="属性值">链接描述</a>
属性值中的_blank可以让网页在新的页面中打开
-
图片视频音频
<img src="地址" alt="图片错误显示时的文字" width="宽">
<audio src="地址" controls></audio>
<vidio src="地址" controls></vidio>
-
输入
<input placeholder="用户没有输入的时候显示的文字" type="输入框的类型" min="最小值" max="最大值">
-
选择框
多选
<label><input type="checkbox"/>选项一</label>
<label><input type="checkbox"/>选项二</label>
复制代码
单选
<label><input type="radio" name="sports"/>选项一</label>
<label><input type="radio" name-"sports"/>选项二</label>
根据name的属性值来判断是否为同一类别的
复制代码
下拉选项
<select>
<option>选项一</option>
<option>选项二</option>
<option>选项三</option>
</select>
复制代码
文本引用
<blockquote cite="引用地方">
<p>引用文本</p>
</blockquote>
复制代码
短引用：<cite>文本</cite>
引号引用：<q>文本</q>
代码：<code>代码</code>
更多行的代码需要用到<pre>···</pre>括起来
