前端之HTML

时间：2019-12-03 22:49:42 收藏：0 阅读：103

一、初识HTML

1、概念

前端就是我们看到的页面
前端的3板斧-----HTML（一个赤裸的人）、Css（给人穿的衣服）、JS/JavaScript（赋予人行动能力）
HTML是一套能够被浏览器所识别的规则
学习html 实际就是学习能够被浏览器所识别的一套规则

<!--<xxx></xxx>> 一对标签-->
<!--标签中可以定义属性 lang 代表下方要求按照英文进行解释-->
<html lang="en">
<!--head相当于人的头部-->
<head>
    <!--    在head中大部分是不能够在页面看到的-->
    
    <!--    字符集 -->
    <meta charset="UTF-8"><!--    自闭和标签【可以理解为是单身狗】-->
    
    <!--    浏览器tab上的标题-->
    <title>Title</title> <!--    主动闭合标签【可以理解为有对象】-->
</head>

<!--body相当于人的身体-->
<body>

</body>
</html>

tab标签名：

技术分享图片

<!DOCTYPE html>

<!--<xxx></xxx>> 一对标签-->
>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <!--    浏览器tab上的标题-->
    <title>摩羯座</title> 
</head>
>
<body>

</body>
</html>

跳转：

<a href="http://www.xxxxxxx.com" target="_blank">跳转到某某</a>

技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<a href="http://www.baidu.com" target="_blank">跳转到百度</a>

</body>
</html>

二、标签

1、标签类别

（1）主动闭合标签【好比是有对象】

由两部分对称的标签组成

<title>摩羯座</title> <!--主动闭合标签-->

（2）自闭和标签【好比是单身狗，没有对象】

标签不对称，只有一个

<meta charset="UTF-8"> <!--自闭和标签-->

三、标签属性

标签中存在属性
有标签自带属性和自定义属性两种属性
一个标签中可以同时拥有多个属性

在标签后空格，pycharm即显示标签的自带属性：

技术分享图片

1、标签属性类别

（1）自带属性

（2）自定义属性

2、自带属性具体应用

1）meta标签自带属性：

（1）打开页面1秒后刷新

<meta http-equiv="refresh" content="1"> <!--打开页面1秒后刷新-->

看到小图标一直在闪，说明语句实现了：

技术分享图片

（2）关键字检索

<meta name="keywords" content="自动化测试">

该语句应用场景：在百度搜索“自动化测试”，会通过keywords关键字进行爬虫查找，获取到信息，搜索顺序可能根据广告费排序。

四、head具体应用

1、浏览器tab页title的图标

原文：https://www.cnblogs.com/brf-test/p/11979968.html