day45 html 初识，常见命令

 

Web服务本质

浏览器发请求 --> HTTP协议 --> 服务端接收请求 --> 服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面

浏览器输入网址后展示页面的一个过程

　　jd.com -->https://www.jd.com/　　

　　域名解析 --> 翻译成IP 端口是默认的80
　　到达服务端
　　服务端返回字符串

HTML --> 裸体的人
CSS --> 穿上好看的衣服
JS --> 让人动起来

HTML是什么？

  • 超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言。
  • 本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）
  • 网页文件的扩展名：.html或.htm

HTML不是什么？

HTML是一种标记语言（markup language），它不是一种编程语言。

HTML使用标签来描述网页。

HTML文档结构

最基本的HTML文档：

复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>css样式优先级</title>
</head>
<body>

</body>
</html>
  1. <!DOCTYPE html>声明为HTML5文档。
  2. <html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）。
  3. <head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据。
  4. <title>、</title>定义了网页标题，在浏览器标题栏显示。
  5. <body>、</body>之间的文本是可见的网页主体内容

注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。

HTML标签格式

  • HTML标签是由尖括号包围的关键字，如<html>, <div>等
  • HTML标签通常是成对出现的，比如：<div>和</div>，第一个标签是开始，第二个标签是结束。结束标签会有斜线。
  • 也有一部分标签是单独呈现的，比如：<br/>、<hr/>、<img src="1.jpg" />等。
  • 标签里面可以有若干属性，也可以不带属性。

标签的语法：

  • <标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
  • <标签名 属性1=“属性值1” 属性2=“属性值2”…… />

几个很重要的属性：

  • id：定义标签的唯一ID，HTML文档树中唯一
  • class：为html元素定义一个或多个类名（classname）(CSS样式类名)
  • style：规定元素的行内样式（CSS样式）

HTML注释

与其他的语言注释方式一样
<!--注释内容-->

<!DOCTYPE> 标签

<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。

<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

HTML常用标签

head内常用标签

Meta标签

Meta标签介绍：

  • <meta>元素可提供有关页面的原信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。
  • <meta>标签位于文档的头部在 head 和 title之间，不包含任何内容。
  • <meta>提供的信息是用户不可见的。

meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。 

1.http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值

<!--2秒后跳转到对应的网址，注意引号-->
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
<!--指定文档的编码类型-->
<meta http-equiv="content-Type" charset=UTF8">
<!--告诉IE以最高级模式渲染文档-->
<meta http-equiv="x-ua-compatible" content="IE=edge">

2.name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

<meta name="Keywords" content="Python开发,linux教程,网站开发,金融分析,爬虫实战,机器学习,编程教程,在线课程,在线教育,路飞,路飞学城,路飞学院">
    这个是在搜索引擎上搜索关键字时它包含的关键字，从字面上就可以理解

<meta name="Description" content="路飞学城立志帮助有志向的年轻人通过努力学习获得体面的工作和生活！
路飞学员通过学习Python ,金融分析,人工智能等互联网最前沿技术,开启职业生涯新可能。">

  这个是展示在外边搜索引擎上搜索出来的内容上的描述信息
META标签是HTML语言HEAD区的一个辅助性标签，它位于HTML文档头部的<HEAD>标记和<TITLE>标记之间，它提供用户不可见的信息。meta标签通常用来为搜索引擎robots定义页面主题，或者是定义用户浏览器上的cookie；它可以用于鉴别作者，设定页面格式，标注内容提要和关键字；还可以设置页面使其可以根据你定义的时间间隔刷新自己,以及设置RASC内容等级，等等。

　　name是描述网页的，对应于Content（网页内容），以便于搜索引擎机器人查找、分类（目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类）。
　　name的value值（name=""）指定所提供信息的类型。有些值是已经定义好的。例如description(说明)、keyword(关键字)、refresh(刷新)等。还可以指定其他任意值，如：creationdate(创建日期) 、
document ID(文档编号)和level(等级)等。
　　name的content指定实际内容。如：如果指定level(等级)为value(值)，则Content可能是beginner(初级)、intermediate(中级)、advanced(高级)。 

　　1、Keywords (关键字)
　　　说明：为搜索引擎提供的关键字列表
　　　用法：<Meta name="Keywords" Content="关键词1,关键词2，关键词3,关键词4,……">
　　　注意：各关键词间用英文逗号“,”隔开。META的通常用处是指定搜索引擎用来提高搜索质量的关键词。当数个META元素提供文档语言从属信息时，搜索引擎会使用lang特性来过滤并通过用户的语言优先参照来显示搜索结果。例如：
　　　　　　<Meta name="Kyewords" Lang="EN" Content="vacation,greece,sunshine">
　　　　　　<Meta name="Kyewords" Lang="FR" Content="vacances,grè:ce,soleil">

　　2、Description (简介)
　　　说明：Description用来告诉搜索引擎你的网站主要内容。
　　　用法：<Meta name="Description" Content="你网页的简述">
　　　注意：

　　3、Robots (机器人向导)
　　　说明：Robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。Content的参数有all、none、index、noindex、follow、nofollow。默认是all。
　　　用法：<Meta name="Robots" Content="All|None|Index|Noindex|Follow|Nofollow">
　　　注意：许多搜索引擎都通过放出robot/spider搜索来登录网站，这些robot/spider就要用到meta元素的一些特性来决定怎样登录。

　　　 all：文件将被检索，且页面上的链接可以被查询；
　　　 none：文件将不被检索，且页面上的链接不可以被查询；(和 "noindex, no follow" 起相同作用)
　　　 index：文件将被检索；（让robot/spider登录）
　　　 follow：页面上的链接可以被查询；
　　　 noindex：文件将不被检索，但页面上的链接可以被查询；(不让robot/spider登录)
　　　nofollow：文件将不被检索，页面上的链接可以被查询。(不让robot/spider顺着此页的连接往下探找)

　　4、Author (作者)
　　　说明：标注网页的作者或制作组
　　　用法：<Meta name="Author" Content="张三，abc@sina.com">
　　　注意：Content可以是：你或你的制作组的名字,或Email

　　5、Copyright (版权)
　　　说明：标注版权
　　　用法：<Meta name="Copyright" Content="本页版权归Zerospace所有。All Rights Reserved">
　　　注意：

　　6、Generator (编辑器)
　　　说明：编辑器的说明
　　　用法：<Meta name="Generator" Content="PCDATA|FrontPage|">
　　　注意：Content="你所用编辑器"

　　7、revisit-after (重访)
　　　说明：
　　　用法：<META name="revisit-after" CONTENT="7 days" >
　　　注意：
meta的详细用法

非meta标签

<!--标题-->
<title>oldboy</title>
<!--icon图标-->
<link rel="icon" href="favicon.ico">
<!--样式文件-->
<link rel="stylesheet" href="mystyle.css">
<!--JS文件-->
<script src="myscript.js"></script>

body内常用标签

基本标签（块级标签和内联标签）

內联标签

<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>
img
span

块级标签

<dev> </dev>

<p>段落标签</p>

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

<!--换行-->
<br>

<!--水平线--><hr>

特殊字符(这个可以百度，上边有很多)

内容对应代码
空格 &nbsp;
> &gt;
< &lt;
& &amp;
¥ &yen;
版权 &copy;
注册 &reg;

div标签和span标签

div标签用来定义一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。  特点就是无特点
span标签用来定义内联行(行内元素)，并无实际的意义。主要通过CSS样式为其赋予不同的表现。

块级元素与行内元素的区别：
所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的。

注意：

关于标签嵌套：通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。

p标签不能包含块级标签。

img标签

<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">

翻译：src  是source的缩写，这里是源文件的意思。“source”本身是“源”的意思。

a 标签  anchor 的缩写（锚）

超链接标签

所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。

<a href="http://www.oldboyedu.com" target="_blank" >点我</a>

1.href 是 Hypertext Reference的缩写。超文本引用。规定链接的目标
2.href="#"是一种临时链接的写法，这样写就是说这个链接目前不可用，点击了也不会有作用，还是会跳转到本页，当#被有效链接替换才会起作用
什么是URL？
URL是统一资源定位器(Uniform Resource Locator)的缩写，也被称为网页地址，是因特网上标准的资源的地址。
URL举例
http://www.sohu.com/stu/intro.html
http://222.172.123.33/stu/intro.html

URL地址由4部分组成
第1部分：为协议：http://、ftp://等 
第2部分：为站点地址：可以是域名或IP地址
第3部分：为页面在站点中的目录：stu
第4部分：为页面名称，例如 index.html
各部分之间用“/”符号隔开。

内连接

<a href="#i1">第一章</a><br>
<a href="#i2">第二章</a><br><br>
<a href="#i3">第三章</a><br><br>
<!--div{第$章}*3 这样可以一次将三个div搞出来 -->
<div id="i1" style="color: antiquewhite;">第1章</div>
<div id="i2" style="color: brown">第2章</div>
<div id="i3" style="color: burlywood">第3章</div>

    可以通过 text-deciration=none  来去掉a标签的下滑线

重要

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!--设置网页编码格式-->
    <meta charset="UTF-8">
    <!--设置网页标题-->
    <!--设置两秒之后转到百度-->
    <!--<meta http-equiv="refresh" content="2;URL=https://www.baidu.com">-->
    <!--设置ie浏览器使用最高的级别渲染-->
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <!--搜索引擎搜索的关键字-->
    <meta name="keywords" content="python,HTML5,笔记,学习,练习">
    <!--搜索引擎搜索出来后的描述信息-->
    <meta name="Description" content="致力于学号Python全栈 出去就说我有三年开发经验 ">
    <title >练习网</title>
    <!--网页的标题前的图标  rel 一般是写成 icon href后写图标的地址，可以是本地也可以是网络的-->
    <link rel="icon" sizes="10" href="徽标1.jpg">

</head>
<body>
<!--开头 可以设置开头的字体颜色  然后可以在要写的字前设置字体的样式 斜体，删除-->
<h1 style="color: blue"><i><s>欢迎来到京东</s></i></h1>
<h2> hehehe </h2>
<h3 style="color: aqua"> 哈哈哈 </h3>
<h4>呦呦呦</h4>
<h5>唉唉唉</h5>
<!--标题最多设置6个-->
<h6>呃呃呃</h6>
<a href="#i1">第一章</a><br>
<a href="#i2">第二章</a><br><br>
<a href="#i3">第三章</a><br><br>
<!--div{第$章}*3 这样可以一次将三个div搞出来 -->
<div id="i1" style="color: antiquewhite;">第1章</div>
<div id="i2" style="color: brown">第2章</div>
<div id="i3" style="color: burlywood">第3章</div>
<!--再设置就不是标题格式的了<h7>ddd</h7>-->
<div>
    天苍苍，野茫茫<br>
    风吹草地现牛羊.<br>
</div>
<div>天苍</div>
<div>野茫茫</div>
<!--注释内容-->
哈哈
<span>这个</span>

<a target="_parent" href="https://www.jd.com/">京东点这里</a>
<img src="qq.jpg" alt="美女" height="1000" width="">
&reg;版权所有，翻版不究
</body>
</html>
今日练习内容 重要
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/wangkun122/p/8074643.html