干货1:可用Can I use网站查询html标签在各个浏览器中的兼容性问题。
干货2:W3C万维网联盟官方网站:w3.org,有兴趣可以点开查看一些相关信息。
干货3:web(网页)的组成部分:1.HTML结构(相当于汽车骨架),2.CSS表现(相当于汽车装饰),3.JS行为(相当于汽车引擎)
干货4:HTML基本语法
1.<常规标记>也叫双标记
<标记></标记>
<标记 属性="属性值" ……(可写很多个)></标记>
标记也可以叫标签或元素
eg:<head></head>
2.<空标记>也叫单标记
<标记/>
<标记 属性="属性值" />
eg:<br/>
用以上基础知识写出的简单代码如下:
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
<center>人间盛望,<br/>故里江添。</center>
</body>
</html>
形成的网页结果如下:
干货5:前端开发工具——Sublime Text, webstorm, HBuilderX, VSCode
干货6:VSCode有用的插件:
(1)Auto Rename Tag(可在更改双标记时两个标记一起更改)
(2)view-in-browser(可进行网页预览)
(3)Live Server(可实时进行网页刷新,无需手动刷新,懒人必备)
(4)htmltagwrap(选中文本后按Alt + W即可出现包裹文本的一对<p></p>只需更改<>中内容即可,写起来很便利,懒人必备)
干货7:<!DOCTYPE html>——特殊且固定的文档声明标签
干货8:文档声明与字符编码
<html lang="...">//这里的lang是language(语言)的缩写,...代表选择的语言
例如:
"en"代表英语(English)
"zh-CN"代表中文(Chinese)
"ja-jp"代表日文(Japanese)
<meta charset="...">//指网页的编码方式
例如:
ASCII-美国信息交换标准代码
IOS-8859-1-拉丁字母表的字符编码
GB2312-汉字编码字符集
UTF-8-Unicode 万国码字符集(最常用)
干货9:HTML常用标签
1.文本标题(h1-h6)
<h1>一级标题</h1>
<h2>二级标题</h2>
……(以此类推)
<h6>六级标题</h6>
注:文本标题标签自带加粗,有自己的文本大小,并且独占一行,有默认间距
2.段落文本(p)
<p>段落文本内容</p>
作用:标识一个段落(段落与段落之间有段间距)
3.换行(br)
<br/>
注:换行是一个空标记(强制换行)
4.水平线
<hr/>空标记
注:可以具有很多属性,例如
<hr color="green">(表示水平线颜色为绿色)
<hr width="300">(表示水平线占屏幕宽度为300)
若不特别说明align默认水平线是居中的。
<hr align="left">(表示水平线靠左)
若水平线是初始灰色是有一半阴影的。
<hr noshade(="noshade"可写可不写)>(表示水平线没有阴影)
5.加粗(推荐strong)
<b>加粗内容</b>只是显示加粗
<strong>强调的内容</strong>突出的文本
6.倾斜(推荐em)
<i>倾斜文本</i>
<em>强调文本</em>
7.删除线(推荐del)
<s>文本</s>删除线
<del>文本</del>删除线
8.下划线
<u>文本</u>下划线
9.上下标
<sub>文本</sub>下标
<sup>文本</sup>上标
用以上基础知识写出的简单代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1><strong>HTML5</strong></h1>
<p>本词条由<strong>“科普中国”科学百科词条编写与应用工作项目</strong>审核。</p>
<p>
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是<strong>构建以及呈现互联网内容的一种语言方式</strong>.被认为是互联网的核心技术之一。HTML产生于1990年,1997年HTML4成为互联网标准,并广泛应用于互联网应用的开发。
</p>
<p>
HTML5是Web中核心语言HTML的规范,<strong><em>用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的</em></strong>,在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前<del>HTML4.01</del>的基础上进行了一定的改进,虽然技术人员在开发过程中可能不会将这些新技术投入应用,但是对于该种技术的新特性,网站开发技术人员是必须要有所了解的。<sup>[1-2]</sup>
</p>
<h2><strong>HTML5的新特性</strong></h2>
<hr/>
<p> HTML5将Web带入一个成熟的应用平台,在这个平台上,<strong>视频、音频、图像、动画以及与设备的交互</strong>都进行了规范。</p>
<h3><strong>智能表单</strong></h3>
<p>
表单是实现用户与页面后台交互主要组成部分,HTML5在表单的设计上功能更加强大。input类型和属性的多样性大大地增强了HTML可表达的表单形式,再加上新增加的一些表单标签,使得原本需要JavaScript来实现的控件,可以直接使用HTML5的表单来实现;一些如内容提示、焦点处理、数据验证等功能,也可以通过HTML5的智能表单属性标签来完成。<sup>[6]</sup>
</p>
<h3><strong>多媒体</strong></h3>
<p>
HTML5最大特色之一就是支持音频视频,在通过增加了audio、video两个标签来实现对多媒体中的音频、视频使用的支持,只要在Web网页中嵌入这两个标签,而无需第三方插件(如Flash)就可以实现音视频的播放功能。HTML5对音频、视频文件的支持使得浏览器摆脱了对插件的依赖,加快了页面的加载速度,扩展了互联网多媒体技术的发展空间。
</p>
</body>
</html>
形成的网页结果如下:
以上内容是筱筱根据b站相关视频进行的知识总结。
学习前端的第一天,加油٩(๑òωó๑)۶