day45 html 初识，常见命令

时间：2022-01-13 16:01:33

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使用标签来描述网页。

day45 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>

今日练习内容 重要

day45 html 初识，常见命令的更多相关文章

  1. 2 &period; Linux常见命令

    Linux常见命令格式: 命令名称 选项 参数 ls -alh 文件/目录 --all #ls 显示当前目录内容 #ls -l 显示文件详细信息 #ls -hl h已常见单位显示文件大小 k M G# ...

  2. &lbrack;Linux基础&rsqb;Linux基础知识入门及常见命令&period;

    前言:最近刚安装了Linux系统, 所以学了一些最基本的操作, 在这里把自己总结的笔记记录在这里. 1,V8:192.168.40.10V1:192.168.40.11Linux ip:192.168 ...

  3. 嵌入式Linux开发教程：Linux常见命令（上篇）

    摘要:这是对周立功编著的<嵌入式Linux开发教程>的第7期连载.本期刊载内容有关LinuxLinux常见命令中的导航命令.目录命令和文件命令.下一期将连载网络操作命令.安装卸载文件系统等 ...

  4. 关于XShell的常见使用和设置以及Linux中的常见命令&period;

    本文部分转自:http://sundful.iteye.com/blog/704079 和 http://www.vckai.com/p/5 有时候在XShell中操作的一些命令傻傻的分不清这个命令到 ...

  5. 重启IIS常见命令

    重启IIS常见命令 http://jingyan.baidu.com/article/4ae03de30d6cfa3efe9e6b4a.html

  6. 一个linux常见命令的列表

    这是一个linux常见命令的列表. 那些有• 标记的条目,你可以直接拷贝到终端上而不需要任何修改,因此你最好开一个终端边读边剪切&拷贝. 所有的命令已在Fedora和Ubuntu下做了测试 命 ...

  7. shell中bash的常见命令

    shell 在计算机科学中,Shell俗称壳,用来区别Kernel(核) Shell分类:1:图形界面shell:通过提供友好的可视化界面,调用相应应用程序,如windows系列操作系统,Linux系 ...

  8. Linux常见命令（二）

    随着Linux应用的扩展许多同学开始接触Linux,根据学习Windwos的经验往往有一些茫然的感觉:不知从何处开始学起.虽然Linux桌面应用发展很快,但是命令在Linux中依然有很强的生命力.Li ...

  9. Linux常见命令（三）

    今天我们来介绍第三个命令:pwd. Linux中用 pwd 命令来查看”当前工作目录“的完整路径. 简单得说,每当你在终端进行操作时,你都会有一个当前工作目录. 在不太确定当前位置时,就会使用pwd来 ...

  10. Linux常见命令（四）——mkdir

    今天我们来介绍第四个命令:mkdir.mkdir (Make Directory 创建目录): 若指定目录不存在则创建目录.在创建目录时,要求创建目录的用户具有写权限,并应保证新建的目录没有重名. 用 ...

随机推荐

  1. 【转】Delphi的消息对话框

    Delphi的消息对话框 输入输出inputBox()函数MessageBox()ShowMessage 对话框是Windows操作系统中程序与用户沟通的一种常见的交互方式,对话框可以向用户提供当前程 ...

  2. Unity Flow distort of screen

    Shader "ScreenWater" {Properties { _MainTex ("Base (RGB)", 2D) = "white&quo ...

  3. Linux系统shell编程自学&lowbar;第一章基础

    第一章 基础shell的优势在于处理操作系统底层的业务,Python,php的优势在于开发运维工具,web界面的管理工具以及web业务开发.处理一键安装.优化.报警脚本shell又叫命令解释器,它能识 ...

  4. Linux设置DNS地址及清理DNS缓存方法

    1.设置DNS地址 编辑vim /etc/resolv.conf 文件. 增加DNS地址:nameserver ip. 2.清理DNS缓存 清理dns缓存: 通过重启nscd服务来达到清理dns缓存的 ...

  5. k8s-jenkins 自动化1

    一个流水线例子: 设置参数化构建: 流水线指令: def label = "docker-${UUID.randomUUID().toString()}" podTemplate( ...

  6. 关于vivado implement后clock interaction报告的理解（更新中）

    对于较大工程很难避免遇到CDC问题,vivado自带的分析工具可以报告跨时钟状态. 详情参看手册UG906-Design Analysis and Closure Techniques. (1)关于p ...

  7. 设计模式-单例模式（Singleton Pattren）（饿汉模式和懒汉模式）

    单例模式(Singleton Pattren):确保一个类在整个应用中只有一个实例,并提供一个全局访问点. 实现要点: 1. 私有化构造方法 2. 类的实例在类初始化的时候创建 3. 提供一个类方法, ...

  8. 2018&period;08&period;30 NOIP模拟 kfib（矩阵快速幂&plus;exgcd）

    [输入] 一行两个整数 n P [输出] 从小到大输出可能的 k,若不存在,输出 None [样例输入 1] 5 5 [样例输出] 2 [样例解释] f[0] = 2 f[1] = 2 f[2] = ...

  9. 使用SecureCRT连接linux

    1.登录之后进入linux系统,输入ifconfig(interfaces config)查看网卡信息 2.设置VMWare的虚拟机连接方式为仅主机模式 3.查看VMWare为仅主机模式虚拟网卡IP地 ...

  10. 【mysql】一次有意思的数据库查询分析。

    本文是在做一家汽车配件的电商网站时,大体情景是一个List.php页面,该页面分页列出部分配件并统计总数量用于分页. 当然该页面中也可以指定一下查询条件,如适配的车辆品牌.车系.排量.年份等,一件商品 ...

相关文章