html 初识

一、web请求流程模拟

  python编写的简易服务器应用程序

import socketserver=socket.socket()
ip_port =('127.0.0.1',8080)
server.bind(ip_port)
server.listen()while 1:conn, addr = server.accept()from_browser_msg=conn.recv(1024)print(from_browser_msg)conn.send(b'HTTP/1.1 200 ok\r\n\r\n') #http协议conn.send(b'<h1>web123</h1>')

  web访问

web访问过程 

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

 

二、html 简介

  1、超文本标记语言(Hypertext Markup Language, HTML) 是一种用于创建网页的标记语言.

  2、网页文件的后缀 : .html 或者 .htm

  3、html 文本格式

<!DOCTYPE html>声明为HTML5文档。
<html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素,在它们之间是文档的头部(head)和主体(body)。
<head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元(meta)数据,配置信息等,是给浏览器看的,你看到的是在body标签里面写的。
<title>、</title>定义了网页标题,在浏览器标题栏显示。(修改一下title中的内容,然后看一下浏览器,你就会发现title是什么了)
<body>、</body>之间的文本是可见的网页主体内容。
html 结构说明

三、HTML标签格式,严格封闭

标签的语法:

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

 

 四、标签常用属性

   (1)id :定义唯一标识,id不能重复;

   (2)class :为html定义一个或多个类名

   (3)style :规定元素的行内样式(CSS样式)      

       如 <h1 style="color:red;">我是红色</h1>

五、HTML注释
<!--注释内容-->  #找到一行内容ctrl+/就能注释,注释的内容不会在网页上显示出来

 

六、初始快捷键

  快速创建 HTML结构 : !+tab键

  快速创建标签: 标签名 +tab 键

 

七、初始head 

  1、meta标签

    meta标签的组成:meta标签共有两个属性,它们分别是http-equiv属性和name 属性,不同的
属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。 
  (1)http-equiv属性:相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮
助正确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变
量值。
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com"> 
<!--2秒后跳转到对应的网址,注意引号-->
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com"> #如果把URL和后面的内容去掉,就是2秒钟刷新一次,这些内容了解一下就行
<!--指定文档的编码类型--> 
<meta http-equiv="content-Type" charset=UTF8">
<!--告诉IE以最高级模式渲染文档-->
<meta http-equiv="x-ua-compatible" content="IE=edge"> #edge是微软的一个全新的浏览器,其实就是告诉IE浏览器,你按照最高标准来渲染我的页面,了解一下就可以啦
meta的http-equiv属性详细解说

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

<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> #关键字,也就是别人是可以通过这些关键字搜索到我的这个文章的,搜索引擎就是能够这个content内容来帮别人搜索到你的这个文档的
#SEO就是做这个的,就是怎么让你们公司的网站在别人搜索的时候能够靠前显示,不算那个花钱的,百度是充值的,你冲个20w,别人可能一天就给你点击完了,特别的贵<meta name="description" content="xxxxxpythonxxx学习">  #是对这个文档的描述,在百度一些内容的页面上,f12打开看看
meta的name属性详解

 

八、body内常用标签(HTML中的重点)

  1、基本标签

#字体操作
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>#段落
<p>段落标签</p> #独占一个段落#标题
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
#换行
<br>

 

 


  

  

转载于:https://www.cnblogs.com/angle6-liu/p/10108291.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/248833.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

WEB文件上传之JQuery ajaxfileupload插件使用(二)

1.JQuery ajaxfileupload插件使用准备 下载地址&#xff1a; http://www.phpletter.com/DOWNLOAD/ 2.原理分析 ajaxfileupload也是利用iframe实现无刷新异步提交&#xff0c;与我的上一篇文章&#xff08;WEB文件上传之apache common upload使用&#xff08;一&#xff09;&…

Navicat安装激活

有条件的同学麻烦不要使用下面的激活步骤&#xff0c;仅供个人学习使用 。。。。。。 。。。。。。 。。。。。。 。。。。。。 一、去官网下载最新Navicat软件https://www.navicat.com.cn/download/navicat-premium 二、去下载激活脚本https://github.com/DoubleLabyrinth/nav…

WEB文件上传之apache common upload使用(一)

文件上传一个经常用到的功能&#xff0c;它有许多中实现的方案。 页面表单 RFC1897规范 http协议上传 页面控件(flash/html5/activeX/applet) RFC1897规范 http协议上传 页面控件(flash/html5/activeX/applet) 自定义数据规范 http协议上传 页面控件(flash/html5/act…

前端CSS学习笔记

一 CSS介绍 层叠样式表(英文全称&#xff1a;Cascading Style Sheets)是一种用来表现HTML&#xff08;超文本标记语言&#xff09;或XML&#xff08;标准通用标记语言的一个子集&#xff09;等文件样式的计算机语言。CSS不仅可以静态地修饰网页&#xff0c;还可以配合各种脚本语…

Java爬取并下载酷狗音乐

本文方法及代码仅供学习&#xff0c;仅供学习。 案例&#xff1a; 下载酷狗TOP500歌曲&#xff0c;代码用到的代码库包含&#xff1a;Jsoup、HttpClient、fastJson等。 正文&#xff1a; 1、分析是否可以获取到TOP500歌单 打开酷狗首页&#xff0c;查看TOP500&#xff0c;发现存…

Webpack/Vue-cli两种方式加载markdown文件并实现代码高亮

准备的资源&#xff1a; highlight.js &#xff1a; 实现代码高亮&#xff0c;通过npm install highlight.js -D安装 vue-markdown-loader&#xff1a;解析md文件的必备loader&#xff0c;通过npm install vue-markdown-loader -D安装 下面我们分两个场景来说明一下md文件的…

新浪微博第三方登陆重定向错误23123

新浪微博第三方登陆重定向错误23123 2019年06月02日 13:49:43 温室花朵 阅读数&#xff1a;2更多 个人分类&#xff1a; 第三方微博登陆21323编辑当我们使用微博第三方登陆的时候&#xff0c;发现登陆出错了&#xff0c;错误码为&#xff1a;21323&#xff0c;解决方案如下&…

Utility Manager 的一些百度不了的操作

一进来是不是这样的&#xff01; 那突然出了点问题&#xff0c;咋办呢&#xff01; 就像这样子的&#xff0c; 恢复默认布局就OK啦&#xff01;哈哈哈&#xff0c;太聪明啦&#xff0c;但是百度了好长时间还是找不到啊&#xff0c;怎么办呐&#xff0c;烦死啦&#xff01; 其实…

记录一次内网渗透试验

0x00 前言 目标&#xff1a;给了一个目标机ip&#xff0c;要求得到该服务器权限&#xff0c;并通过该ip渗透至内网控制内网的两台服务器 攻击机&#xff1a;kali (192.168.31.51) 目标机&#xff1a;windows 2003 (192.168.31.196) 0x01 信息收集 nmap端口探测 御剑后台扫描 …

2018-2019 1 20165203 实验五 通用协议设计

2018-2019 1 20165203 实验五 通用协议设计 OpenSSL学习 定义&#xff1a;OpenSSL是为网络通信提供安全及数据完整性的一种安全协议&#xff0c;囊括了主要的密码算法、常用的密钥和证书封装管理功能以及SSL协议&#xff0c;并提供了丰富的应用程序供测试或其它目的使用。基本功…

弄懂webpack,只要看这一片就够了(文末有福利)

什么是webpack ​ webpack是什么&#xff0c;官网中是这么说的。 ​ 本质上&#xff0c;webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时&#xff0c;它会递归地构建一个依赖关系图(dependency graph)&#xff0c;其中包…

beta冲刺总结那周余嘉熊掌将得队

作业格式 课程名称&#xff1a;软件工程1916|W&#xff08;福州大学&#xff09;作业要求&#xff1a;项目Beta冲刺团队名称&#xff1a; 那周余嘉熊掌将得队作业目标&#xff1a;beta冲刺总结队员学号队员姓名博客地址备注221600131Jaminhttps://www.cnblogs.com/JaminWu/队长…

在Winform中菜单动态添加“最近使用文件”

最近在做文件处理系统中&#xff0c;要把最近打开文件显示出来&#xff0c;方便用户使用。网上资料有说&#xff0c;去遍历“C:\Documents and Settings\Administrator\Recent”下的最近文档本。文主要介绍在Winform界面菜单中实现【最近使用的文件】动态菜单的处理&#xff0c…

Vue组件通信原理剖析(一)事件总线的基石 $on和$emit

首先我们先从一个面试题入手。 面试官问&#xff1a; “Vue中组件通信的常用方式有哪些&#xff1f;” 我答&#xff1a; 1. props 2. 自定义事件 3. eventbus 4. vuex 5. 还有常见的边界情况$parent、$children、$root、$refs、provide/inject 6. 此外还有一些非props特性$att…

display:flex弹性布局

一、背景 前段时间帮公司运维小姑娘调整她自己写的页面样式时发现她用了display: flex&#xff0c;我这个后端老古董还不太懂flex&#xff0c;自愧不如啊&#xff0c;所以写篇博客记录学习下。 现在写的前端页面还停留在依赖 display 属性 position属性 float属性的布局方式&…

Vue组件通信原理剖析(二)全局状态管理Vuex

首先我们先从一个面试题入手。 面试官问&#xff1a; “Vue中组件通信的常用方式有哪些&#xff1f;” 我答&#xff1a; 1. props 2. 自定义事件 3. eventbus 4. vuex 5. 还有常见的边界情况$parent、$children、$root、$refs、provide/inject 6. 此外还有一些非props特性$att…

初识单点登录及JWT实现

单点登录 多系统&#xff0c;单一位置登录&#xff0c;实现多系统同时登录的一种技术 &#xff08;三方登录&#xff1a;某系统使用其他系统的用户&#xff0c;实现本系统登录的方式。如微信登录、支付宝登录&#xff09; 单点登录一般是用于互相授信的系统&#xff0c;实现单一…

Vue组件通信原理剖析(三)provide/inject原理分析

首先我们先从一个面试题入手。 面试官问&#xff1a; “Vue中组件通信的常用方式有哪些&#xff1f;” 我答&#xff1a; 1. props 2. 自定义事件 3. eventbus 4. vuex 5. 还有常见的边界情况$parent、$children、$root、$refs、provide/inject 6. 此外还有一些非props特性$att…

iMX6开发板-uboot-网络设置和测试

本文章基于迅为IMX6开发板 将iMX6开发板通过网线连接到路由器&#xff0c;同时连接好调试串口&#xff0c;上电立即按 enter&#xff0c;即可进入 uboot。然后输入命令 pri&#xff0c;查看开发板当前的配置&#xff0c;如下图所示可以看到 ip 地址、子网掩码 等信息。 本文档测…

Django ajax 检测用户名是否已被注册

添加一个 register.html 页面 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title> </head> <body> <form><p>用户名<input id"username" type&…