刚开始接触前端内容,把自己的所得所思随手记录一下吧~
期待能在之后的拼搏岁月里望见曾砥砺前行的自己:
搭建环境
浏览器 Chrome FireFox Safari IE Opera
代码编辑器 VSCode、WebStorm、Hbuilder、...
vscode 安装的插件
live server/open in browser(在浏览器中打开)
HTML5
HTML 超文本标记语言 HyperText Markup Language
- 制作网页的基础语言
- 不是编程语言,不需要编译,浏览器直接执行
- html语言形成一个文件,包含各种标记(标签)
版本
1993 IETF HTML1.0(官方不这么承认但理解成这样)
->1995 HTML2.0->1996 HTML3.2 ->1997 HTML 4.0
->1999 HTML4.01->2000 XHTML 1.0、1.1 ... (w3c)
->2004 HTML5草案->2008 HTML5正式版 (WHATWG)IETF(Internet Engineering Task Force)Internet 工程任务组 * XHTML与HTML区别(XHTML会比HTML更复杂) * HTML5在HTML4.01基础上进行了扩展 * IETF 国际互联网工程任务组 W3C World wide web Consortium 万维网联盟 WHATWG 网页超文本应用技术工作组
基本语法
### html的基本骨架
先创建文件,命名为XXX.html
*命名时一定要有后面的.html(我第一次就是没注意,倒腾了好长时间)
** 可自动生成html基本骨架的方式:
“!”+“Enter”/ “!”+“Tab”
<!DOCTYPE html>
<html lang="en"> //标签的属性
``
<head>
<meta charset="UTF-8">//<meta> 元素可提供有关页面的元信息,<meta> 标签位于文档的头部,不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
- DTD 文本类型声明
<!DOCTYPE html> h5的文档类型声明 从html根标签开始
<html><head> 字符集 网页标题 </head> <body> 网页真正显示的内容 </body>
</html>
<!DOCTYPE html>
<html lang="en"><head> <meta charset="UTF-8"> <title>****</title> </head> <body> </body>
</html>
### 标签
双标签 如<body></body>
单标签 如<img src="...."/>
建议标签都**小写**
<标签名 属性名1="属性值" 属性名1="属性值" 属性名1="属性值">
</标签名>
掌握标签 1 标签的含义(语义) 2 标签有哪些属性 属性的值有哪些 3 标签的分类
常用标签
主体结构标签
html
head
body
head标签内
title
meta
...
格式排版标签
h1~h6 标题
p 段落
hr/分割线 单标记
br/换行 单标记
pre 按原文显示 双标记
div 无语义 主要用于布局->作分割线,导航,可配合css
span 无语义 主要用于布局->小范围,用在div下
文本标签
em 强调 通常斜体 i(了解)
strong 强调(语气更重) b(了解)
del 删除线 (在原有的数字上划一个横线)
sub 下标 (肚子在下边所以为下标)
sup 上标 (头在上边所以为上标)
ins 下划线
其他的了解
small big font u code ....
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。