1.大致了解html5

1.1标题,链接,图片,换行,段落,注释,分割线

<!DOCTYPE html>
<!--这个是注释doctype就是声明为html5文档,不区分大小写-->
<!--在浏览器右键查看元代码就可以看代码-->

<!--头部信息-->
<head>
   <meta charset="UTF-8">
   <!--声明编码格式,有些网页不声明该格式就会乱码-->
   <title>这个网页主要是什么</title>
</head>

<!--body里面都是浏览器中可见的内容-->
<body>

<h1>我的第一个标题(h几就是几级标题)一般来说有和到h6</h1>
<p>我的第一个段落</p>

<a href="https://www.runoob.com/html/html-basic.html" > 这就是链接的方式,点击进入教程     </a>

<!--换行<br><br/>具有相同作用,但前者是老的
html规范,新的规范(W3C//DTD HTML 4.0)要求一切都应象XML那样有结束符,
如果没有也要硬加一个反斜杠。象br这种不需成对使用的html符号,就成了这个样子:<br/>
           一般来说就是加一个斜杠更加严谨-->
<br/>
<!--分割线,教程里面时hr我加了斜杠并没有出错-->
<hr/>

<!--这里显示不了图片,可能是本地图片路径不对-->
<img src="D:\1daily\存取相关图片\无人机视频"  width="255" height="255">




</body>

</html>

2.属性

一般来说使用双引号包含,但是如果语句中包含双引号,那就必须使用双引号来阔住它

2.1举例特殊情况

name='John "ShotGun" Nelson'

2.2有哪些属性

属性 描述
class 类名
id 定义元素的唯一id
style 规定元素的行内样式
title 描述了元素的额外信息
   

 

3.文本字体

3.1现在的font早就已经淘汰了

<!DOCTYPE html>
<html  lang="en">
<head>
   <meta charset="UTF-8">
   <title>第二个网页</title>
</head>

<body>
<h1> 标题1         </h1>
<font size="3" color="blue">  3号字体 蓝色,已经在还html5中过时,虽然可以用,但是会报
   错,obsolete,现在都用css来定义文本的字体,尺寸,颜色    </font>
<font size="4">  4号字体    </font>
<font size="5">  5号字体     </font>
<font size="6">  6号字体    </font>


</body>


</html>

3.2加粗,斜体,电脑,上标,下标

标签 描述
<b> 定义粗体文本
<em> 定义着重文字
<i> 定义斜体字
<small> 定义小号字
<strong> 定义加重语气
<sub> 定义下标字
<sup> 定义上标字
<ins> 定义插入字
<del> 定义删除字
<cite> 引用
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>一些常见的字体</title>
</head>
<body>


<a id="tips">有用的提示部分</a>
<b>粗体文字</b><br/>
<em>着重文字</em><br/>
<i>斜体文字</i><br/>
<small>小号文字</small><br/>
<strong>加重语气</strong><br/>
<sub>下标</sub><br/>
<sup>上标</sup><br/>
<ins>定义插入字</ins><br/>
<del>定义删除字</del><br/>
<cite>引用一句话</cite>
<a href="1.我的第一个网页.html"  target="_self">1</a>
<a href="2.我的第二个网页.html"  target="_top">2</a>
<a href="1.我的第一个网页.html"  target="_blank">3</a>
<a href="1.我的第一个网页.html"  target="_parent">4</a>



<br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><<br/><br/><br/>
<a href="#tips">访问有用的提示部分</a>

</body>
</html>

 

4.空格

所有连续的空格都算作一个空格

 

5.超链接

 放超链接   

HTML使用标签 <a>来设置超文本链接。

超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。

在标签<a> 中使用了h《》ref属性来描述链接的地址。

5.1target定义了超链接的文档将在哪里打开

<a href="www.baidu.com" target="_blank" rel="noopener noreferrer">点击进入链接</a>

这里的_blank代表页面会在新窗口打开

_blank

打开一个新的网页

_self

代替自己本身的网页

这个目标的值对所有没有指定目标的 <a> 标签是默认目标,它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的,除非和文档标题 <base> 标签中的 target 属性一起使用。

_parent

这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中,那么它与目标 _self 等效。

_top

这个目标使得文档载入包含这个超链接的窗口,用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

 

当网页没有框架时,target=”self”和target=”parent”以及target=”_top”三种方式的显示方式几乎相同。

5.2利用超链接跳转到指定的自己网页的部位(锚链接)

<a id="#biaoji"></a>


<a href="iaoji">点击就会跳转到标记处</a>
<!--有的人用的是name,已经淘汰了-->
页面之间跳转也可以用这个

5.3图片链接

图片链接有无边框是可以在border中设置的(编译器中提示obsolete 可能又过时了)

<p>第一个图片链接
   <a href="https://www.baidu.com/?tn=44004473_21_oem_dg" target="_blank">
       <img src=""  border="0" alt="如果图片失效,提醒这里有一张图片,同时也是图片名字" height="10" width="10"
       title="悬停文字">
   </a>
</p>
  • 悬停文字title

5.4功能性链接,发邮箱和qq

  • 点击联系我邮箱

<a href="mailto:2641320250@qq.com">点击联系我qq邮箱</a>
  • 点击联系我qq

    1. 搜索qq推广

    2. 登录账号

    3. 点击推广工具

    <!--需要在图片中添加上qq号,也需要在&site前面加上qq号-->
    <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2641320250&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2:2641320250:52" alt="点击添加我看小电影" title="点击添加我看小电影"/></a>

    功能性链接截图

###

6.头部

可以添加在头部的元素<title>, <style>, <meta>, <link>, <script>, <noscript><base>

6.1title

  • 定义了不同文档的标题

6.2base

  • 标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接

  • 思考了一下,比如说一篇文章里面有很多关键字,就可以放上自己的链接,这样别人复制的时候,就可以跳转到你的网站上

<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>

6.3link

  • link>标签定义了文档与外部资源之间的关系。

    link>标签通常用于链接到样式表:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

6.4style

  • <style> 标签定义了HTML文档的样式文件引用地址.

    <style> 元素中你也可以直接添加样式来渲染 HTML 文档:

    <head>
    <style type="text/css">
    body {background-color:yellow}
    p {color:blue}
    </style>
    </head>

6.5meta

  • meta标签描述了一些基本的元数据。

    <meta> 标签提供了元数据.元数据也不显示在页面上,但会被浏览器解析。

    META 元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务。

    • 定义网站搜索关键字

    <meta name=”keywords” content=”HTML, CSS, XML, XHTML, JavaScript”>
    • 为网页定义描述内容:

    <meta name="description" content="免费 Web & 编程 教程">
    • 定义网页作者:

    <meta name="author" content="Runoob">
    • 每30秒钟刷新当前页面:

    <meta http-equiv="refresh" content="30">

6.6script

  • 用来加载脚本文件,比如javascript

7.idea的html快捷键

快速填入就是需要的东西+table

比如段落就是p+table

版权声明:本文为raoxin原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/raoxin/p/16097549.html