必须了解掌握的html知识点(全)
一、HTML是什么?
HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言,而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
二、学习
1.href 和 src 的区别
- href 的意思是去往资源所在的地址,简单理解就是跳转页面
- src 的意思是指向资源所在的地址,简单理解就是引用该地址资源
2.html对于大小写不敏感
<p>标签和<P>标签的效果是一样的
3.在html元素上设置属性
1.HTML 元素可以设置属性
2.属性可以在元素中添加附加信息
3.属性一般描述于开始标签
4.属性总是以名称/值对的形式出现,比如:name=“value”。
4.html标题
标题(Heading)是通过 <h1> - <h6> 标签进行定义的。
<h1> 定义最大的标题。 <h6> 定义最小的标题。
5.段落分割符
<p>
6.HTML 文本格式化标签
<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd>
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
<abbr> (缩写)
<address> (联系信息)
<bdo> (文字方向)
<blockquote> (从另一个源引用的部分)
<cite> (工作的名称)
<del> (删除的文本)
<ins> (插入的文本)
<sub> (下标文本)
<sup> (上标文本)
7.html链接
点击链接可以从一张页面跳转到另一张页面。
<a href="https://www.runoob.com/">访问菜鸟教程</a>
HTML 链接 - target 属性
<a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a>
HTML 链接 - rel 属性
尽管浏览器不会以任何方式使用该属性,不过搜索引擎可以利用该属性获得更多有关链接的信息。(搜索引擎优化SEO)
HTML <a> download 属性
<a href="/images/logo.png" download="/images/logo.png">
8.HTML 头部
HTML <head> 元素
<head> 元素包含了所有的头部标签元素。在 元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。
HTML <title> 元素
<title> 标签定义了不同文档的标题。
<title> 在 HTML/XHTML 文档中是必须的。
<title> 元素:1.定义了浏览器工具栏的标题;2.当网页添加到收藏夹时,显示在收藏夹中的标题;3.显示在搜索引擎结果页面的标题
HTML <base> 元素
<base> 标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接
HTML <link> 元素
<link> 标签定义了文档与外部资源之间的关系。
<link> 标签通常用于链接到样式表
HTML <style> 元素
<style> 标签定义了HTML文档的样式文件引用地址.
在<style> 元素中你也可以直接添加样式来渲染 HTML 文档
HTML <meta> 元素
META 元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。
元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务。
9.CSS
内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
外部引用 - 使用外部 CSS 文件
内链样式
<p style="color:blue;margin-left:20px;">这是一个段落。</p>
内部样式表
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
内部样式表
<link rel="stylesheet" type="text/css" href="mystyle.css">
或
@import "mystyle.css"
10.图像
alt属性和title属性的区别是前者是在图片无法加载的时候才会显示的其值,而title是在图片正常加载鼠标划上去显示的值,虽然alt也有后者的功能,但是只是在低版本的ie浏览器才支持,高版本及标准浏览器不支持这个功能了
<img src="pulpit.jpg" title="pulpit title" alt="Pulpit rock" width="304" height="228">
11.表格
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
12.background
// 当url中的链接地址是网路地址不需要引号,
// 当链接地址是本地地址需要引号
// 在url后面添加no-repeat center;则图片只显示一张,且居中显示
// background-size: 100%;背景图片的大小充满整个div
background: url("./assets/img/yingyangshi.jpg");
链接: https://github.com/NotBerlin/ES6Project/tree/dev_services.
13.HTML 列表
本人长期使用vue,使用习惯了v-for…in拒绝写这个的经验
接下来的一些只有标题,属于常见知识点不难,浪费时间,看到了自己回想一下
14.HTML 布局
这节回想一下自己的布局习惯,我喜欢用display:flex
15.HTML 表单和输入
16.HTML 框架
通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。
<iframe src="URL" width="200" height="200" frameborder="0"></iframe>
使用iframe来显示目标链接页面
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>
17.HTML 脚本
JavaScript 使 HTML 页面具有更强的动态和交互性。
18.HTML 统一资源定位器(Uniform Resource Locators)
一个网页地址实例: http://www.runoob.com/html/html-tutorial.html 语法规则:
scheme://host.domain:port/path/filename
说明:
scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机(http 的默认主机是 www)
domain - 定义因特网域名,比如 runoob.com
:port - 定义主机上的端口号(http 的默认端口号是 80)
path - 定义服务器上的路径(如果省略,则文档必须位于网站的根目录中)。
filename - 定义文档/资源的名称
链接: runoob.com/html/html-quicklist.html.