首页 > 其他 > 详细

前端知识之HTLM内容

时间:2019-09-12 09:35:42      阅读:97      评论:0      收藏:0      [点我收藏+]

前端简介:

  什么是前端?

  任何与用户直接打交道的操作界面都可以被称为前端,如:网页界面,手机界面....

前端的学习历程和内容:

技术分享图片

 要学习的内容:

技术分享图片

 三大重点: 

技术分享图片

 1、Web服务的本质:

   浏览器中敲入网址回车发送了几件事?
   1.浏览器超服务端发送请求
   2.服务端接收请求
   3.服务端返回相应的响应
   4.浏览器接收响应  根据特定的规则渲染页面展示给用户看

服务端:连接htlm在页面展示

import socket
server= socket.socket()
server.bind((127.0.0.1,8080))
server.listen(5)
while True:
        conn,addr= server.accept()
        data = conn.recv(1024)
        print(data)
        conn.send(bHTTP/1.1 200 ok\r\n\r\n)
        conn.send("hell world!".encode(utf-8))
        with open(a.txt,rb) as f:
            res=f.read()
        conn.send(res)
        conn.close()

技术分享图片

 

 

web需遵循的协议

2、HTTP协议

   超文本传输协议,规定了浏览器与服务端之间消息传输的数据格式

HTTP的四大特性:

  1.基于请求响应

  2.基于TCP/IP之上的作用于应用层的协议

  3.无状态(服务端无法保存用户的状态,一个人来一千次 我都记不住 还当你如初见)

  4.无连接(请求来一次我响应一次 之后立马断开连接 两者之间就不再有任何关系了)

websocket 相当于是HTTP协议的一个大的补丁,它支持长连接

Djdigo内容及一些概念知识:

数据格式:

  请求数据格式

  1.请求首行(标识HTTP协议版本,当前请求方式)

  2.请求头(一大堆k,v键值对)

请求体(携带的是一些敏感信息比如 密码,身份证号...)

  响应数据格式

  1.响应首行(标识HTTP协议版本,响应状态码)

  2.响应头(一大堆k,v键值对)

响应体(返回给浏览器页面的数据 通常响应体都是html页面)

  响应状态码

用一串简单的数字来表示一些复杂的状态或者提示信息

1XX:服务端已经成功接收了你的数据正在处理 你可以继续提交额外的数据

2XX:服务端成功响应 你想要的数据(请求成功200)

3XX:重定向(当你在访问一个需要登录之后才能访问的页面 你会发现窗口会自动调到登录页面  301 302)

4XX:请求错误(请求资源不存在404,请求不合法不符合内部规定会权限不够403)

5XX:服务器内部错误(500)

  请求方式

1.get请求

  朝服务端要资源(比如浏览器窗口输入www.baidu.com)

2.post请求

  朝服务端提交数据(比如用户登录 提交用户名和密码)

URL:统一资源定位符(就是指网址)

 HTLM部分:

  htlm:超文本标记语言,要想让你的页面能够正常被浏览器显示出来,所写的页面就必须遵循htlm标记语法

浏览器只识别:htlm css js

pycharm修改标签字体颜色:

技术分享图片

 

 web本质:浏览器/服务器 

文件(后缀名是.htlm结尾的文件,也就意味着,只要看到.htlm,那么它就是一个前端页面文件)

文件的后缀名仅仅是给人看的,计算机无所谓,因为都是二进制

 

HTLM注释:

  <!--单行注释--> 

  <!--

  多行注释

  多行注释

  -->

HTLM是什么?

  是超文本标记语言,是一种用于创建网页的标记语言

  扩展名:.htlm或.htm

HTLM不是什么?

  HTLM是一种标记语言,它不是一种编程语言

最基本的HTLM文档:

<!DOCTYPE htlm>
    <htlm lang="zh-CN">
        <head>
            <meta charset="UTF-8">
            <title>css样式优先级</title>
        </head>   
</body>
</htlm>
</!doctype>

 解释:

  1:<!DOCTYPE htlm>  声明为HTLM5文档

  2:<htlm></htlm> 是文档的开始标记和结束的标记。是HTLM页面的跟元素,在它们之间是文档的头部(head)和主体(body)。

  3:<head>、</head> head内的标签,不是用来展示给用户看的,而是定义一些配置,主要是给浏览器看的。

  4:<title></title>定义了网页标题,在浏览器标题栏显示。

  5:<body></body> body内的标签 就是浏览器展示给用户看的内容

在pycharm里输入title直接按住TAB键 <title></title>

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

则你需要设置为 <meta charset="gbk">

打开htlm页面的两种方式:

 1.找到文件路径 选择浏览器打开
   2.pycharm快捷方式直接打开
  

HTLM标签格式  

.HTLM标签是由尖括号包围的关键字,如<htlm><div>

.HTLM标签通常是成对的出现的,比如:<div><div>,第一个标签开始,第 二个标签是结束符,结束符会由斜线。

标签的语法:

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

.<标签名 属性1=“属性值1”  属性2=“属性值2”..../>

head内常用标签:

  title:用来显示网页标题

  style:用来控制样式的,内部支持写css代码

  script:内支持写js代码,也支持导入外界的js文件

  link:专门用来引入外部的css文件

技术分享图片

标签的分类:

 1.双标签(<h1></h1> <a></a>)
  2.单标签(自闭和标签 <img/>)

(1).快儿级标签(独占浏览器一行)

    div   p    h

  1.块儿级标签可以修改长度

  2.块儿级标签内部可以嵌套任意的块级标签

  总结:

    只要是块儿级标签,都是可以嵌套行 内的标签

    p标签只能嵌套行内,其他块儿级可以嵌套任意的块儿级标签

(2).行内标签(自身文本多大就占多大)

    sapn b s i u

div和span 通常都是用来构建网页布局的

 body内常用的标签

  基本标签:

  h 标签:标题标签

  p标签:段落标签

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

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

  符号标签

 

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

 

  常用标签:

   div  span  p 

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

div标签和span标签

  div标签用来定义一个块级元素,并无实际意义,主要通过CSS样式为其赋予不同的表现。

  span 标签用来定义内联(行内)元素,并无实际意义......

 <img>标签:

   src存放的是图片的路径(该路径可以是本地的也可以是网上的)

    1.也可以是url(会自动请求该url获取相应数据)

    2.也可以直接存放图片的二进制数据,会自动转换成图片

    alt 当图片加载不出来的时候,显示的提示信息  

    title 当鼠标悬浮在图片上 提示信息

    height、width  当你指定一个参数的时候,另一个会等比例缩放

  <a>标签:

    href 后面存放 url 的时候  点击跳转到该 url

    (如果该连接没有被点过,那么默认是蓝色,只要点过一次之后都是紫色)

    target   默认是_self  当前页面跳转

    _blank 新建页面跳转

    锚点功能(回到顶部)

      href  还可以写另一个a标签的id值,点击就会跳转到id对应的a标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jQuery-3.4.1.js"></script>
</head>
<body>
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<h7></h7>
<h8></h8>
<h9></h9>
<h10></h10>
<h11></h11>
孟母三迁
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>
<p>人生得意需尽欢,莫使金樽空对月</p>
<p>人生得意需尽欢,莫使金樽空对月</p>
<p>人生得意需尽欢,莫使金樽空对月</p>
等你下课 超人不会飞
<p>人生得意需尽欢,莫使金樽空对月</p>
<br>
<p>人生得意需尽欢,莫使金樽空对月</p>
<hr>
<p>人生得意需尽欢,莫使金樽空对月</p>
</body>
</html>

 特殊符号:

技术分享图片

 

 每一个标签都应该有三个比较重要的属性

   1.id值 该值就类似于人的身份证号 在用一个html文档id应该保证唯一不重复
   2.class值  该值就类似于面向对象里面的继承  可以写多个
   3.style(不是必备)  支持在标签内直接写css代码 属于行内样式 优先级最高
   补充 任何标签都支持自定义属性 !

常用的标签:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jQuery-3.4.1.js"></script>
</head>
<body>
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2215934588,2652507557&fm=26&gp=0.jpg" alt="校花">

<stript>
   <p><a href="http://xiaohuar.com"> 点击有你好看哦!</a></p>
</stript>

<div>div
    <div>div1</div>
    <div>div2
        <p>p
            <a href="https://www.luffycity.com">a</a>
        </p>
    </div>
</div>
<span>span</span>
<a href="" id="d1">顶部</a> <!-->
<div style="height: 100px;background-color: black"></div>
<a href="" id="d2" class="c1">中间</a>
<div style="height: 200px;background-color: green"></div>
<a href="#d2">会到中间</a>
<div style="height: 150px;background-color: yellow"></div>
<a href="#d1" username="jason" password="123">点我回到顶部</a>
</body>
</html>

网页效果:

技术分享图片

 

列表标签:

1.无序列表 

<ul type="disc">
  <li>第一项</li>
  <li>第二项</li>
</ul>

type属性:

  • disc(实心圆点,默认值)
  • circle(空心圆圈)
  • square(实心方块)
  • none(无样式)

2.有序列表

 

<ol type="1" start="2">
  <li>第一项</li>
  <li>第二项</li>
</ol>

type属性:

  • 1 数字列表,默认值
  • A 大写字母
  • a 小写字母
  • Ⅰ大写罗马
  • ⅰ小写罗马

3.标题列表

技术分享图片
技术分享图片
<dl>
  <dt>标题1</dt>
  <dd>内容1</dd>
  <dt>标题2</dt>
  <dd>内容1</dd>
  <dd>内容2</dd>
</dl>

HTLM示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jQuery-3.4.1.js"></script>
</head>
<body>
<p>无序列表</p>
<!--<ul>type="circle"</ul>-->
<ul>type="square"
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
    <li>ddd</li>
    <li>eee</li>
    </ul>
<p>有序列表</p>
<ol> type="I" start="2"
    <li>aa</li>
    <li>bb</li>
    <li>cc</li>
</ol>
<p>标题列表</p>
<dl>
    <dt>标题1</dt>
    <dd>内容1</dd>
    <dt>标题2</dt>
    <dd>内容1</dd>
    <dd>内容2</dd>
</dl>
</body>
</html>

 

演示页面效果:

技术分享图片

 

 

 

 

 

 

 

 

 

 

 

 

 

  

  

 

 

 

 

 

  

 

 

 

 

  

 

 

 

 

  

 

 

 

 

 

  

  

 

 

 

 

 

 

 

 

 

 

  

  

    

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  

  

 

前端知识之HTLM内容

原文:https://www.cnblogs.com/Gaimo/p/11509633.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!