前端打卡第一天

稳重的沙雕网友

已于 2022-06-07 21:00:26 修改

阅读量197

点赞数 1

文章标签： html 前端

于 2022-06-07 20:55:48 首次发布

本文链接：https://blog.csdn.net/qq_45156779/article/details/125163255

版权

1.什么是HTML5？

H5是HTML的第5个版本

H5是一门技术总称

2.HTML5能做什么？

1.网页开发（用的最多的，只要是浏览器能看到的，都需要用到前端）

2.小程序，公众号（微信，支付宝，头条等好多都用前端语言进行开发）

3.Hybrid App(混合应用开发，手机应用例如，支付宝，淘宝等)

4.Native App(原生应用开发，例如React Native 等框架的开发）

5.桌面应用开发（电脑软件）

6.游戏开发（例如，微信小游戏，其实好多游戏都可以用前端语言进行编写）

7.后端开发（前端学到的nodejs可以实现后端的开发）

3.项目开发流程？

产品经理 ---确定需求，产出PRD（Product Requirement Document 产品需求文档）、原型图

UI设计 --- 根据产品设计效果，产出效果图、标注图（markman或sketch）

前端开发---根据效果图、需求转换成相关代码后端开发---数据处理，产出接口文档

测试---性能测试、安全性测试等

4.网页的组成部分？

HTML结构

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

CSS 表现

JS 行为

5.开发工具（编辑器）？

文件的命名规范：

1.文件命名规则：用英文，不建议使用中文

2.名称全部用小写英文字母、数字、下划线_或者-的组合，其中不得包含汉字、空格和特殊字符；必须以英文字母开头。

3、命名的时候最好使用语义化比较强的英文

6.HTML理论基础？

HTML、HTML5

1、HTML 指的是超文本标记语言 (Hyper Text Markup Language) www万维网的描述性语言。

2、HTML5指的是HTML的第五次重大修改（第5个版本）(HTML5 是 W3C 与 WHATWG 合作的结果)，H5网络标准统一，可以跨平台，多设备使用，语义化比较强

HTML的语法

1、常规标记、双标记 <标记属性=“属性值” 属性=“属性值”>文字内容</标记>

2、空标记、单标记 <标记属性=“属性值” 属性=“属性值” />

7.HTML相关标签？

基础
<!DOCTYPE>	定义文档类型。
<html>	定义一个 HTML 文档
<title>	为文档定义一个标题
<body>	定义文档的主体
<h1> to <h6>	定义 HTML 标题
<p>	定义一个段落
<br>	定义简单的折行。（单）
<hr>	定义水平线。（单）
<!--...-->	定义一个注释
格式
<acronym>	HTML5不再支持。定义只取首字母的缩写。
<abbr>	定义一个缩写。
<address>	定义文档作者或拥有者的联系信息。
<b>	定义粗体文本。
<bdi>New	允许您设置一段文本，使其脱离其父元素的文本方向设置。
<bdo>	定义文本的方向。
<big>	HTML5不再支持。定义大号文本。
<blockquote>	定义块引用。
<center>	HTML5不再支持。 HTML 4.01 已废弃。定义居中文本。
<cite>	定义引用(citation)。
<code>	定义计算机代码文本。
<del>	定义被删除文本。
<dfn>	定义定义项目。
<em>	定义强调文本。
<font>	HTML5不再支持。 HTML 4.01 已废弃。定义文本的字体、尺寸和颜色
<i>	定义斜体文本。
<ins>	定义被插入文本。
<kbd>	定义键盘文本。
<mark>New	定义带有记号的文本。
<meter>New	定义度量衡。仅用于已知最大和最小值的度量。
<pre>	定义预格式文本
<progress>New	定义运行中的任务进度（进程）。
<q>	定义短的引用。
<rp>New	定义不支持 ruby 元素的浏览器所显示的内容。
<rt>New	定义字符（中文注音或字符）的解释或发音。
<ruby>New	定义 ruby 注释（中文注音或字符）。
<s>	定义加删除线的文本。
<samp>	定义计算机代码样本。
<small>	定义小号文本。
<strike>	HTML5不再支持。 HTML 4.01 已废弃。定义加删除线的文本。
<strong>	定义语气更为强烈的强调文本。
<sub>	定义下标文本。
<sup>	定义上标文本。
<time>New	定义一个日期/时间
<tt>	HTML5不再支持。定义打字机文本。
<u>	定义下划线文本。
<var>	定义文本的变量部分。
<wbr>New	规定在文本中的何处适合添加换行符。
表单
<form>	定义一个 HTML 表单，用于用户输入。
<input>	定义一个输入控件
<textarea>	定义多行的文本输入控件。
<button>	定义按钮。
<select>	定义选择列表（下拉列表）。
<optgroup>	定义选择列表中相关选项的组合。
<option>	定义选择列表中的选项。
<label>	定义 input 元素的标注。
<fieldset>	定义围绕表单中元素的边框。
<legend>	定义 fieldset 元素的标题。
<datalist>New	规定了 input 元素可能的选项列表。
<keygen>New	规定用于表单的密钥对生成器字段。
<output>New	定义一个计算的结果
框架
<frame>	HTML5不再支持。定义框架集的窗口或框架。
<frameset>	HTML5不再支持。定义框架集。
<noframes>	HTML5不再支持。定义针对不支持框架的用户的替代内容。
<iframe>	定义内联框架。
图像
<img>	定义图像。
<map>	定义图像映射。
<area>	定义图像地图内部的区域。
<canvas>New	通过脚本（通常是 JavaScript）来绘制图形（比如图表和其他图像）。
<figcaption>New	定义一个 caption for a <figure> element
<figure>New	figure 标签用于对元素进行组合。
Audio/Video
<audio>New	定义声音，比如音乐或其他音频流。
<source>New	定义media元素 (<video> 和 <audio>)的媒体资源。media
<track>New	为媒体(<video> 和 <audio>)元素定义外部文本轨道。
<video>New	定义一个音频或者视频
链接
<a>	定义一个链接
<link>	定义文档与外部资源的关系。
<main>	定义文档的主体部分。
<nav>New	定义导航链接
列表
<ul>	定义一个无序列表
<ol>	定义一个有序列表
<li>	定义一个列表项
<dir>	HTML5不再支持。 HTML 4.01 已废弃。定义目录列表。
<dl>	定义一个定义列表
<dt>	定义一个定义定义列表中的项目。
<dd>	定义定义列表中项目的描述。
<menu>	定义菜单列表。
<command>New	定义用户可能调用的命令（比如单选按钮、复选框或按钮）。
表格
<table>	定义一个表格
<caption>	定义表格标题。
<th>	定义表格中的表头单元格。
<tr>	定义表格中的行。
<td>	定义表格中的单元。
<thead>	定义表格中的表头内容。
<tbody>	定义表格中的主体内容。
<tfoot>	定义表格中的表注内容（脚注）。
<col>	定义表格中一个或多个列的属性值。
<colgroup>	定义表格中供格式化的列组。
样式/节
<style>	定义文档的样式信息。
<div>	定义文档中的节。
<span>	定义文档中的节。
<header>New	定义一个文档头部部分
<footer>New	定义一个文档底部
<section>New	定义了文档的某个区域
<article>New	定义一个文章内容
<aside>New	定义其所处内容之外的内容。
<details>New	定义了用户可见的或者隐藏的需求的补充细节。
<dialog>New	定义一个对话框或者窗口
<summary>New	定义一个可见的标题。当用户点击标题时会显示出详细信息。
元信息
<head>	定义关于文档的信息
<meta>	定义关于 HTML 文档的元信息。
<base>	定义页面中所有链接的默认地址或默认目标。
<basefont>	HTML5不再支持。 HTML 4.01 已废弃。定义页面中文本的默认字体、颜色或尺寸。
程序
<script>	定义客户端脚本。
<noscript>	定义针对不支持客户端脚本的用户的替代内容。
<applet>	HTML5不再支持。 HTML 4.01 已废弃。定义嵌入的 applet。
<embed>New	定义了一个容器，用来嵌入外部应用或者互动程序（插件）。
<object>	定义嵌入的对象。
<param>	定义对象的参数。

1.<ol>标签，有序列表

属性	值	描述
compact	compact	HTML5 中不支持，不赞成使用。请使用样式取代它。规定列表呈现的效果比正常情况更小巧。
reversedNew	reversed	指定列表倒序(9,8,7...)
start	number	一个整数值属性，指定了列表编号的起始值。这个属性在 HTML4中弃用，但是在 HTML5 中被重新引入。
type	`a` 表示小写英文字母编号 `A` 表示大写英文字母编号 `i` 表示小写罗马数字编号 `I` 表示大写罗马数字编号 `1` 表示数字编号（默认）	规定

实例：

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
 
<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

2.<ul>标签，无序列表

属性	值	描述
compact	compact	HTML5 不支持。HTML 4.01 已废弃。规定列表呈现的效果比正常情况更小巧。
type	disc square circle none	HTML5 不支持。HTML 4.01 已废弃。规定列表的项目符号的类型。 type为none时，不显示项目符号。

属性

值

描述

compact

HTML5 不支持。HTML 4.01 已废弃。规定列表呈现的效果比正常情况更小巧。

type

disc
square
circle

none

HTML5 不支持。HTML 4.01 已废弃。规定列表的项目符号的类型。

type为none时，不显示项目符号。

实例：

<ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul>

3.<dl>标签，自定义列表

dt和dd是同级关系，dd是对dt内容的扩展

实例：

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

4.特殊符号

常用：

字符	实体名称	描述
		空格
©	©	版权
®	®	已注册

数学符号：

字符	实体编号	实体名称	描述
∀	∀	∀	for all
∂	∂	∂	part
∃	∃	∃	exists
∅	∅	∅	empty
∇	∇	∇	nabla
∈	∈	∈	isin
∉	∉	∉	notin
∋	∋	&ni;	ni
∏	∏	∏	prod
∑	∑	∑	sum
−	−	−	minus
∗	∗	&lowast;	lowast
√	√	√	square root
∝	∝	&prop;	proportional to
∞	∞	∞	infinity
∠	∠	&ang;	angle
∧	∧	&and;	and
∨	∨	&or;	or
∩	∩	∩	cap
∪	∪	∪	cup
∫	∫	∫	integral
∴	∴	&there4;	therefore
∼	∼	&sim;	similar to
≅	≅	&cong;	congruent to
≈	≈	≈	almost equal
≠	≠	≠	not equal
≡	≡	&equiv;	equivalent
≤	≤	≤	less or equal
≥	≥	≥	greater or equal
⊂	⊂	⊂	subset of
⊃	⊃	⊃	superset of
⊄	⊄	&nsub;	not subset of
⊆	⊆	&sube;	subset or equal
⊇	⊇	&supe;	superset or equal
⊕	⊕	&oplus;	circled plus
⊗	⊗	&otimes;	circled times
⊥	⊥	&perp;	perpendicular
⋅	⋅	⋅	dot operator

希腊字母符号：

字符	实体编号	实体名称	描述
Α	Α	Α	Alpha
Β	Β	Β	Beta
Γ	Γ	Γ	Gamma
Δ	Δ	Δ	Delta
Ε	Ε	Ε	Epsilon
Ζ	Ζ	Ζ	Zeta
Η	Η	Η	Eta
Θ	Θ	Θ	Theta
Ι	Ι	Ι	Iota
Κ	Κ	Κ	Kappa
Λ	Λ	Λ	Lambda
Μ	Μ	Μ	Mu
Ν	Ν	Ν	Nu
Ξ	Ξ	Ξ	Xi
Ο	Ο	Ο	Omicron
Π	Π	Π	Pi
Ρ	Ρ	Ρ	Rho
	undefined		Sigmaf
Σ	Σ	Σ	Sigma
Τ	Τ	Τ	Tau
Υ	Υ	Υ	Upsilon
Φ	Φ	Φ	Phi
Χ	Χ	Χ	Chi
Ψ	Ψ	Ψ	Psi
Ω	Ω	Ω	Omega

α	α	α	alpha
β	β	β	beta
γ	γ	γ	gamma
δ	δ	δ	delta
ε	ε	ε	epsilon
ζ	ζ	ζ	zeta
η	η	η	eta
θ	θ	θ	theta
ι	ι	ι	iota
κ	κ	κ	kappa
λ	λ	λ	lambda
μ	μ	μ	mu
ν	ν	ν	nu
ξ	ξ	ξ	xi
ο	ο	ο	omicron
π	π	π	pi
ρ	ρ	ρ	rho
ς	ς	&sigmaf;	sigmaf
σ	σ	σ	sigma
τ	τ	τ	tau
υ	υ	υ	upsilon
φ	φ	φ	phi
χ	χ	χ	chi
ψ	ψ	ψ	psi
ω	ω	ω	omega

ϑ	ϑ	&thetasym;	theta symbol
ϒ	ϒ	&upsih;	upsilon symbol
ϖ	ϖ	ϖ	pi symbol

其它符号：

字符	实体编号	实体名称	描述
Œ	Œ	&OElig;	capital ligature OE
œ	œ	&oelig;	small ligature oe
Š	Š	&Scaron;	capital S with caron
š	š	&scaron;	small S with caron
Ÿ	Ÿ	&Yuml;	capital Y with diaeres
ƒ	ƒ	&fnof;	f with hook
ˆ	ˆ	&circ;	modifier letter circumflex accent
˜	˜	&tilde;	small tilde
		&ensp;	en space
		&emsp;	em space
			thin space
‌	‌	&zwnj;	zero width non-joiner
‍	‍	&zwj;	zero width joiner
‎	‎	&lrm;	left-to-right mark
‏	‏	&rlm;	right-to-left mark
–	–	–	en dash
—	—	—	em dash
'	‘	‘	left single quotation mark
'	’	’	right single quotation mark
‚	‚	&sbquo;	single low-9 quotation mark
"	“	“	left double quotation mark
"	”	”	right double quotation mark
„	„	&bdquo;	double low-9 quotation mark
†	†	&dagger;	dagger
‡	‡	&Dagger;	double dagger
•	•	•	bullet
…	…	…	horizontal ellipsis
‰	‰	&permil;	per mille
′	′	′	minutes
″	″	″	seconds
‹	‹	&lsaquo;	single left angle quotation
›	›	&rsaquo;	single right angle quotation
‾	‾	&oline;	overline
€	€	€	euro
™	™ or	™	trademark
←	←	←	left arrow
↑	↑	↑	up arrow
→	→	→	right arrow
↓	↓	↓	down arrow
↔	↔	↔	left right arrow
↵	↵	&crarr;	carriage return arrow
⌈	⌈	&lceil;	left ceiling
⌉	⌉	&rceil;	right ceiling
⌊	⌊	&lfloor;	left floor
⌋	⌋	&rfloor;	right floor
◊	◊	&loz;	lozenge
♠	♠	&spades;	spade
♣	♣	&clubs;	club
♥	♥	&hearts;	heart
♦	♦	&diams;	diamond

5.<img>标签，插入图片

属性	值	描述
align	top bottom middle left right	HTML5 不支持。HTML 4.01 已废弃。规定如何根据周围的文本来排列图像。
loading	eager：立即加载 lazy：延迟加载	指定浏览器是应立即加载图像还是延迟加载图像。
alt	text	规定图像的替代文本。
border	pixels	HTML5 不支持。HTML 4.01 已废弃。规定图像周围的边框。
crossoriginNew	anonymous use-credentials	设置图像的跨域属性
height	pixels	规定图像的高度。
hspace	pixels	HTML5 不支持。HTML 4.01 已废弃。规定图像左侧和右侧的空白。
ismap	ismap	将图像规定为服务器端图像映射。
longdesc	URL	HTML5 不支持。HTML 4.01 已废弃。指向包含长的图像描述文档的 URL。
src	URL	规定显示图像的 URL。
usemap	#mapname	将图像定义为客户器端图像映射。
vspace	pixels	HTML5 不支持。HTML 4.01 已废弃。规定图像顶部和底部的空白。
width	pixels	规定图像的宽度。

实例：

<img src="smiley-2.gif" alt="Smiley face" width="42" height="42">

绝对路径（不推荐使用）

相对路径：1.当前文件和目标文件在同一个目录下。直接写图片的名字，src="图片的名字.后缀"

2.当前文件和目标文件文件夹在同一目录下，写 src="文件夹的名字/图片的名字.后缀"

稳重的沙雕网友

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端打卡第一天

H5是HTML的第5个版本 H5是一门技术总称 1.网页开发（用的最多的，只要是浏览器能看到的，都需要用到前端） 2.小程序，公众号（微信，支付宝，头条等好多都用前端语言进行开发） 3.Hybrid App(混合应用开发，手机应用例如，支付宝，淘宝等) 4.Native App(原生应用开发，例如React Native 等框架的开发） 5.桌面应用开发（电脑软件） 6.游戏开发（例如，微信小游戏，其实
复制链接

扫一扫