必须了解掌握的html知识点(全)

13 篇文章 0 订阅

一、HTML是什么?

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言,而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

二、学习

1.href 和 src 的区别

  1. href 的意思是去往资源所在的地址,简单理解就是跳转页面
  2. 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.

总结

good morning
  • 5
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值