前端-HTLM

前端简介：

　　什么是前端？

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

前端的学习历程和内容：

要学习的内容：

　三大重点：　

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(b'HTTP/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协议的一个大的补丁，它支持长连接

只写服务端，遵循HTTP协议，在网页url处绑定ip+端口，就可以实现客户端的请求

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>

　符号标签

内容	对应代码
空格
>	>
<	<
&	&
¥	¥
版权	©
注册	®

　　常用标签：

　　　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>

演示页面效果：

表格标签:

　　表格的基本结构:固定成套出现的几对标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="jQuery-3.4.1.js"></script>

</head>

<body>

<table border="20" cellpadding="10" cellspacing="10">

    <thead>

    <tr>

        <th>username</th>

        <th>password</th>

        <th>hobby</th>

    </tr>

    </thead>

    <tbody>

    <tr>

        <td colspan="2">jack </td>

            <td>123</td>

        <td rowspan="2">running</td>

    </tr>

        <tr>

            <td>rose</td>

            <td>123</td>

            <td>睡觉</td>

        </tr>

    <tr>

        <td>Django</td>

        <td>123</td>

        <td>万能王</td>

    </tr>

    </tbody>

</table>

</body>

</html>

　<table>
    <thead></thead>
    <tbody></tbody>
   </table>
   tr表示一行
   th和td都是文本
    建议在thead内用th
    tbody内用td

   colspan表示的水平方向
   rowspan表示的竖直方向

属性设置:

border: 表格边框.

cellpadding: 内边距

cellspacing: 外边距.

width: 像素 百分比.（最好通过css来设置长宽）

rowspan: 单元格竖跨多少行

colspan: 单元格横跨多少列（即合并单元格）

form表单:用于交数据（*）**

　　表单用于向服务器传输数据,从而实现用户与Web服务器的交互,

表单能够包含inout系列标签,比如文本字段,复制框、单选框、提交框等

表单还可以包含：textarea、select、fieldset、label标签

表单属性：

属性	描述
accept-charset	规定在被提交表单中使用的字符集（默认：页面字符集）。
action	规定向何处提交表单的地址（URL）（提交页面）。
autocomplete	规定浏览器应该自动完成表单（默认：开启）。
enctype	规定被提交数据的编码（默认：url-encoded）。
method	规定在提交表单时所用的 HTTP 方法（默认：GET）。
name	规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate	规定浏览器不验证表单。
target	规定 action 属性中地址的目标（默认：_self）。

action控制数据提交的目的地

　　1、不写的情况下，默认提交到当前页面所在的路径

　　2、写全路径（http://www.baidu.com）

　　3、路径后缀（/index/）

表单元素：HTLM表单是htlm元素较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能结合，所以它是制作动态网站很重要的内容

input 标签

　　<input> 元素会根据不同的 type 属性，变化为多种形态。

　　text：普通单行输入文本 --- <input type=text" />

　　password：密码输入框不展示明文 --- <input type="password" />

　　date：日期 --- <input type="date" />

　　submit：触发提交动作 ---<input type="submit" value="提交" />

　　button：普通的按钮没有实际意义但是可以通过js绑定事件实现自定义动作 --<input type="button" value="普通按钮" />

　　reset：重置表单内容 --- <input type="reset" value="重置" />

　　radio：单选框可以通过checked控制默认选择 -- <input type="reset" value="重置" />

　　checkbox：复选框同上可以设置默认值 ---<input type="checkbox" checked="checked" />

　　file：获取用户上传的文件 --- <input type="file" />

select标签：

　　默认是单选，可以通过multiple变成多选，如果想默认选择，用selected (selected="selected")

<form action="" method="post">

  <select name="city" id="city">

    <option value="1">北京</option>

    <option selected="selected" value="2">上海</option>

    <option value="3">广州</option>

    <option value="4">深圳</option>

  </select>

</form>

属性说明：

multiple：布尔属性，设置后为多选，否则默认单选

disabled：禁用

selected：默认选中该项

value：定义提交时的选项值

textarea标签：

<textarea name="memo" id="memo" cols="30" rows="10">

  默认内容

</textarea>

　　属性说明：name:名称 rows:行数 cols: 列数 disabled: 禁用

获取用户输入的大段文本

from表单默认是get请求你需要通过method参数，换成post提交

属性说明：

name：表单提交时的“键”，注意和id的区别

value：表单提交时对应项的值

type="button", "reset", "submit"时，为按钮上显示的文本年内容

type="text","password","hidden"时，为输入框的初始值

type="checkbox", "radio", "file"，为输入相关联的值

checked：radio和checkbox默认被选中的项

readonly：text和password设置只读

disabled：所有input均适用

label标签

　　定义：<label> 标签为 input 元素定义标注（标记）。

　　说明：

label 元素不会向用户呈现任何特殊效果。
<label> 标签的 for 属性值应当与相关元素的 id 属性值相同。

<form action="">

  <label for="username">用户名</label>

  <input type="text" id="username" name="username">

</form>

from表单中，想要触发提交动作

1:input标签type指定成submit

2:直接写button 标签

前端-HTLM的更多相关文章

前端之BOM与DOM-JQuery
一.前端基础之BOM和DOM: 1: JavaScript分为 ECMAScript,DOM,BOM BOM:指的是浏览器对象模型,它使JavaScript有能力与浏览器进行“对话” DOM:是指文档 ...
构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案（四）
通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...
常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案（三）
前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的插件生态可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...
前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
总结：Mac前端开发环境的搭建（配置）
新年新气象,在2016年的第一天,我入手了人生中第一台自己的电脑(大一时好友赠送的电脑在一次无意中烧坏了主板,此后便不断借用别人的或者网站的).macbook air,身上已无分文...接下来半年的房 ...
Fis3的前端工程化之路[三大特性篇之声明依赖]
Fis3版本:v3.4.22 Fis3的三大特性资源定位:获取任何开发中所使用资源的线上路径内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中依赖声明:在一个文本文 ...
Fis3的前端工程化之路[三大特性篇之内容嵌入]
Fis3版本:v3.4.22 Fis3的三大特性资源定位:获取任何开发中所使用资源的线上路径内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中依赖声明:在一个文本文 ...
Fis3的前端模块化之路[基础篇]
Fis3版本:v3.4.22 fis3是一个构建工具解决前端开发中自动化工具.性能优化.模块化框架.开发规范.代码部署.开发流程等问题. 安装 npm install -g fis3 运行 fis3 ...
细说前端自动化打包工具--webpack
背景记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...

随机推荐

开源Git代码托管平台
开源Git代码托管平台主要参考有以下4个: 1.GitHub 很多开源项目都来自GitHub,但是GitHub只能新建公开的Git仓库,私有仓库要收费.GitHub地址:https://github ...
java题求代码，4、现在有如下的一个数组： int oldArr[]={1,3,4,5,0,0,6,6,0,5,4,7,6,7,0,5} 要求将以上数组中值为0的项去掉，将不为0的值存入一个新的数组，生成的新数组为： int newArr[]={1,3,4,5,6,6,5,4,7,6,7,5}
public class TEST { public static void main(String[] args) { int [] oldArr= {1,3,4,5,0,0,6,6,0,5,4,7 ...
JavaBean和json数据之间的转换（二）含有date类型的JavaBean
1.前言上次讲了简单的JavaBean和json格式之间的转换,代码很简单,但是实际过程中,往往用到的JavaBean都是比较复杂的,其他的字段还好,如果JavaBean中包含了date类型的字段, ...
寒假day19
今天编写了人才动态模块,同时刷了一些算法题.
opencv3。4安装出错
https://www.samontab.com/web/2017/06/installing-opencv-3-2-0-with-contrib-modules-in-ubuntu-16-04-lt ...
javaScript_BOM浏览器对象模型
BOM:浏览器对象模型 Browser Object Model 用来访问和操作浏览器窗口,使JavaScript有能力与浏览器对话通过使用BOM ,可以移动窗口,更改状态栏.执行其他不与页面内容发 ...
linux 下shell 编写脚本
linux 下shell 编写脚本: 1.程序结构练习:编写一个脚本,给定一个正整数,计算出这个数所有位的数字之和. 例如:程序给定输入123,那么应该返回1+2+3=6. 2.程序结构练习:编写一个 ...
Cobub无码埋点关键技术的实现
随着大数据时代的到来,数据采集也已经变的越来越重要.前端埋点作为一个比较成熟的数据接入手段被广泛应用着.目前埋点分为两种方式,有码与无码埋点.有码埋点比较容易理解,即调用SDK的API,在代码中插入埋 ...
Ubuntu apt install 下载软件很慢的解决办法
1.打开/etc/apt/sources.list 将内容替换为以下内容(注意把sources.list文件备份一下) deb http://mirrors.aliyun.com/ubuntu/ xe ...
iview checkbox demo（文档改写）
<template> <div class="content"> <div style="border-bottom: 1px solid ...

前端-HTLM

前端简介：

1、Web服务的本质:

2、HTTP协议

HTTP的四大特性：

Djdigo内容及一些概念知识：

数据格式：

请求数据格式

响应数据格式

响应状态码

请求方式

最基本的HTLM文档:

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

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

打开htlm页面的两种方式：

HTLM标签格式

标签的语法：

head内常用标签：

标签的分类：

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

基本标签：

符号标签

常用标签：

div span p

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

div标签和span标签

<img>标签：

<a>标签：超链接标签

特殊符号：

常用的标签：

列表标签：

HTLM示例：

表格标签:

属性设置:

form表单:用于交数据（***）

表单属性：

表单元素：HTLM表单是htlm元素较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能结合，所以它是制作动态网站很重要的内容

select标签：

textarea标签：

属性说明：name:名称 rows:行数 cols: 列数 disabled: 禁用

属性说明：

label标签

前端-HTLM的更多相关文章

随机推荐

热门专题

　　请求数据格式

　　响应数据格式

　　响应状态码

　　请求方式

HTLM标签格式　　

　　基本标签：

　符号标签

　　常用标签：

　　　div span p

　<img>标签：

　　<a>标签：超链接标签

form表单:用于交数据（*）**

　　属性说明：name:名称 rows:行数 cols: 列数 disabled: 禁用