前端——前端入门

前端：
前端是做什么的?
前端的内容：HTML(展示内容）, CSS（外观）,javaScript（动画）
学习的重点：HTML(标签）, CSS（选择器，属性）,javaScript（基础语法，BOM&DOM）

WEB开发本质：
浏览器输入网址回车发生了什么？

  • 浏览器给服务端发送了消息
  • 服务端拿到消息
  • 服务端返回信息
  • 浏览器展示页面

C/S架构——>B/S架构：
C/S架构:客户端和服务端，connect和sever。比如想听音乐就要下载一个音乐播放器，
B/S架构: Broswer和sever。那么想听音乐，直接在浏览器的网页上听就可以了。客户端和服务端的消息格式是约定好的
那么浏览器和服务器之间的协议就是HTML.
HTTP协议：浏览器和服务器之间约定好的消息格式.

我们一般写的sockt的sever端通信格式是这样的

import socket
sk=socket.socket()
sk.bind(('127.0.0.1',8080))
sk.listen()

while 1:
    conn,addr=sk.accept()
    conn.recv(1024)
    conn.send(b'hello')
    conn.close()

但是，我们现在需要和浏览器之间的通信，这就需要加上HTTP协议

import socket
sk=socket.socket()
sk.bind(('127.0.0.1',8080))
sk.listen()

while 1:
    conn,addr=sk.accept()
    conn.recv(1024)
    conn.send(b'HTTP/1.1 200 OK\n\r\n\r')#也可以和下面要发的内容合并起来写成conn.send(b'HTTP/1.1 200 OK\n\r\n\rhello')
    conn.send(b'hello')
    conn.close()

此时在浏览器搜索页面输入127.0.0.1:8080 即可输出hello,即实现了sever端和浏览器之间的通信

进阶

import socket
sk=socket.socket()
sk.bind(('127.0.0.1',8080))
sk.listen()

while 1:
    conn,addr=sk.accept()
    conn.recv(1024)
    conn.send(b'HTTP/1.1 200 OK\n\r\n\r')#也可以和下面要发的内容合并起来写成conn.send(b'HTTP/1.1 200 OK\n\r\n\rhello')
    conn.send(b'<h1>hello</h1>')#前后加上<h1>后文字加粗加大
    conn.close()

 进阶：

可以将要发送的内容写在txt文件上，然后通过代码读出txt文件，然后输出在网页上

txt文件上的内容是

<h1>hello s99!</h1>

<img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1555937712&di=dbd1cb7c4e061c6261a746f1f946b370&src=http://img.haote.com/upload/news/image/20180316/20180316170729_86383.jpg">

<a href="http://www.sogo.com">sougou</a>

代码

import socket
sk=socket.socket()
sk.bind(('127.0.0.1',8080))
sk.listen()

while 1:
    conn,addr=sk.accept()
    conn.recv(1024)
    conn.send(b'HTTP/1.1 200 OK\r\n\r\n')#注意这里一定是\r\n\r\n，顺序不能错
    with open('1.txt','rb')as f:
        msg=f.read()
    conn.send(msg)#前后加上<h1>后文字加粗加大
    conn.close()

这样就能在浏览器中实现：文字、图片和连接的输出了

web的本质：

服务端
浏览器
html文件

那么在正式一些；这个txt实质上就是平时看到的html

那么代码也可以改成这样

import socket
sk=socket.socket()
sk.bind(('127.0.0.1',8080))
sk.listen()

while 1:
    conn,addr=sk.accept()
    conn.recv(1024)
    conn.send(b'HTTP/1.1 200 OK\r\n\r\n')#注意这里一定是\r\n\r\n，顺序不能错
    with open('1.html','rb')as f:
        msg=f.read()
    conn.send(msg)#前后加上<h1>后文字加粗加大
    conn.close()

目前web是通过写html来实现网页的内容，未来django就是通过网页来实现html。

 HTML标签

HTML是一个标准，规定了大家怎么写网页
HTML————标签
<标签名>：标记语言（HTML, XML）
标记语言和编程语言的区别：标记语言没有逻辑，通俗易懂

常见的标签名：
分类：双标签、单标签
双标签
<h1></h1>
<a></a>
单标签，又称为自闭标签
<img>

虽然上面的txt或者html文件能够被浏览器读出来，但是不合乎规范，那么具体的规范格式如下：

HTML文件的结构：
<!DOCTYPE html>#首先声明这是一个html5文件，但是
<html>
<head>
#这里面的内容是写给浏览器说的，不会出现在页面上
</head>
<body>
#这里面的才是真正要出现在网页上显示的内容
</body>
</html>

那么重新写上面的html例子

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <h1>hello s99!</h1>
        <img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1555937712&di=dbd1cb7c4e061c6261a746f1f946b370&src=http://img.haote.com/upload/news/image/20180316/20180316170729_86383.jpg">
        <a href="http://www.sogo.com">sougou</a>
    </body>
</html>

当然也可以不要缩进，但是如果不要缩进，没有层次感，显得凌乱，所以最好加上缩进

HTML的注释格式

<!--注释的内容-->

快捷键：直接ctrl+/即可

head内常用标签

标签意义
<title></title> 定义网页标题
<style></style> 定义内部样式表
<script></script> 定义JS代码或引入外部JS文件
<link/> 引入外部样式表文件
<meta/> 定义网页原信息，比如定义网页的编码格式等

标签详细内容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <!--h表示几级标题，根据pacharm的提示最多可以有6级标题-->
        <h1>标题</h1>
        <!--插入图片-->
        <img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1555937712&di=dbd1cb7c4e061c6261a746f1f946b370&src=http://img.haote.com/upload/news/image/20180316/20180316170729_86383.jpg">
        <!--如果和代码是同一个文件夹，那么直接写文件名字加上扩展名即可-->
        <img src="timg.jpg">
        <!--因为本地没有timgs.jpg,这个问价，那么可以在alt中写上提示符，当文件不存在的时候，直接显示出提示的字符-->
        <img src="timgs.jpg" alt="53">
        <!--title的作用是当鼠标在图片上的时候，给出提示的内容-->
        <img src="timg.jpg" title="老婆">
        <!--a标签跳转到其他连接-->
        <a href="https://www.baidu.com/">百度一下</a>
        <!--但是执行这个操作以后是关闭了当前网页，那么如何执行新开一个网页打开呢，设置target参数，target参数默认是_self，也就是说打开当前页面，那么如果设置为_blank就表示打开一个新的网页-->
        <a href="https://www.baidu.com/" target="_blank">百度一下</a>
    </body>
</html>

标签的属性

一个标签的重要属性：
id 就像人的身份证号一样在一个html页面中唯一
class:CSS渲染
style:可以对当前的颜色的属性进行定义

范例

<!--id、class style都是自己定义的属性，写在前面，然后用空格隔开即可-->
        <img id="li" class="xx" style="oo" src="timg.jpg">

当然这些自定义属性也可以不用同时出现

body内常用标签

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

<p>段落标签</p>


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

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

特殊字符

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

div标签和span标签

div标签和span标签没有前面所介绍的其他标签那样那么多的属性，这反而是它的优点，因为可以使用CSS进行直接装饰，而不用首先先要去掉其他标签的默认属性

块级标签：就是一行长度默认占用浏览器的整个长度，能设置长度和宽度
常用：<h> <div> <p>
内联标签：根据内容决定长度，不能设置长度和宽度
常用：<a> <img> <h> <u> <s> <i> <b> <span>

 列表

无序的列表

<!--无序的列表-->
<ul>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ul>

无序列表的属性

type属性：

  • disc（实心圆点，默认值）
  • circle（空心圆圈）
  • square（实心方块）
  • none（无样式）

有序的列表

<!--有序的列表-->
<ol>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ol>

type属性：

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

标题列表

<dl>
    <dt>标题1</dt>
    <dd>内容1</dd>
    <dt>标题2</dt>
    <dd>内容1</dd>
    <dd>内容2</dd>
</dl>

表格

<body>
<table BORDER="1">
    <thead>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>爱好</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th>tom</th>
        <th>18</th>
        <th>开车</th>
    </tr>
    <tr>
        <th>Jom</th>
        <th>18</th>
        <th>开车</th>
    </tr>
    </tbody>
</table>
</body>

技巧

在html中输入

h1*4>a.c1[id=a{$}]{a标签$}

然后Tab键就可以生成

<h1><a href="" class="c1" id="a{1}">a标签1</a></h1>
<h1><a href="" class="c1" id="a{2}">a标签2</a></h1>
<h1><a href="" class="c1" id="a{3}">a标签3</a></h1>
<h1><a href="" class="c1" id="a{4}">a标签4</a></h1>

非常方便

标签的嵌套规则

行内标签不能嵌套块级标签
p标签不能嵌套块级标签，尤其是p标签不能嵌套div标签

 

posted @ 2019-04-20 15:03  舒畅123  阅读(151)  评论(0)  编辑  收藏  举报