zoukankan      html  css  js  c++  java

  • HTML 01

    目录

    什么是前端

    • 任何与用户直接的打交道的操作界面, 都可以称之为前端

    • HTML ---> 内容, 网页的骨架

    • CSS ---> 外观, 页面的样式

    • JavaScript ---> 动作

    软件开发架构

    • c/s
    • b/s, b/s的本质也是c/s

    web服务的本质

    • 请求和响应
    • 浏览器输入网址再回车, 发送了哪些事情
      • 朝着指定的服务器地址发送请求
      • 服务端接收请求并处理
      • 服务端返回处理的结果
      • 浏览器接收并渲染出好看的页面展示给用户看

    请求的两种方式

    • get请求
      • 朝服务器要资源
    • post请求
      • 朝服务器提交数据

    HTTP协议

    • 超文本传输协议 Hyper Text Transfer Protocol
    • 规定了服务器与浏览器数据传输的数据格式

    四大特性

    • 基于TCP/IP协议作用于应用层之上的协议
    • 基于请求响应, 一次请求对应一次响应
    • 无状态, 不保存客户端的状态
    • 无连接, 客户端和服务端不用建立连接
      • 长连接, websocket, 长连接

    数据格式

    • 请求格式
      • 请求首行 (请求方式 协议版本)
      • 请求头 ( 一大腿k:v键值对)
      • 请求体 ( 敏感信息, 如密码等
    • 响应格式
      • 响应首行 (响应方式 协议版本)
      • 响应头 (一大推k:v键值对)
      • 响应体 ( 给用户看的数据)

    响应状态码

    • 用数字代号来表示服务端的响应状态
      • 1XX: 服务端已成功接收请求, 正在处理, 可以继续提交其他数据
      • 2XX: 服务端成功响应了相应的数据(200)
      • 3XX: 重定向
      • 4XX: (404请求资源不存在) (403请求不符合某些条件, 无法正常访问)
      • 5XX: 服务器内部错误 (500)

    代码

    • 先写好服务端
    • 浏览器(客户端)输入127.0.0.1:8888访问客户端
    # text1.txt: This is a test of HTTP

# 服务端
import socket

server = socket.socket()
server.bind(('127.0.0.1', 8888))
server.listen(5)

while True:
    conn, addr = server.accept()
    data = conn.recv(1024)
    # 响应首行
    conn.send(b'HTTP/1.1 200 OK

')

    with open(r'text1.txt', 'rb') as f:
        conn.send(f.read())
    conn.close()

    HTML

    • 超文本标记语言 Hyper Text Markup Language
    • < > 标签狂魔...

    注释

    • 注释是代码之母

    • 在搭建页面时, 通常会利用注释来划分区域

    <!--导航条开始-->

<!--导航条结束-->
<!--侧边栏开始-->

<!--侧边栏结束-->
    • 单行注释
    <!--单行注释-->
    • 多行注释
    <!--
多行注释1
多行注释2
多行注释3
-->

    HTML文档结构

    • head 不是给人看的, 是给浏览器看的
    • body 内的代码才是给人看的
    <html>
	<head></head>  
	<body></body>
</html>

    标签的分类

    • 双标签, 既有头有尾
      • <h1>This is the first html page I made!</h1>
    • 自闭合标签, 既有头无尾
      • <img src="test.jpg"/>

    head内常用标签

    • title 定义网页标题 <title>Welcome to MrBigB's Website</title>
    • style 内部支持写css代码
    <style>
        h1 {
            color: darkred;
        }
    </style>
    • link 引入外部css样式文件 <link rel="stylesheet" type="text/css" href="test.css"/>
    /* test.css */

h2 {
    color: darkgreen;
}
    • script 内部可以直接写js代码, 也可以引入外部js文档
      • <script>alert="Hello world!"</script>
      • <script src="test.js"></script>
    • meta 定义网页源信息
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Welcome to MrBigB's Website</title>
    <style>
        h1 {
            color: darkred;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="test.css"/>
    <script src="test.js"></script>
</head>
<body>
<h1>This is the first html page I made!</h1>
<h2>HTML is fucking awesome!</h2>
<img src="https://images.cnblogs.com/cnblogs_com/bigb/1551224/o_%E9%A6%96%E9%A1%B5%E5%B1%95%E7%A4%BA.jpg"/>
</body>
</html>

    body内常用标签

    • h1-h6 标题标签
    • p 段落标签, 一个p就是一行内容
    • s 删除线
    • b 加粗
    • u 下划线
    • i 斜体
    • br 换行
    • hr 一条分割线

    body内特殊符号

    • &nbsp; 空格
    • &amp; &
    • &yen; ¥
    • &gt; >
    • &lt; <
    • &copy; ©
    • &reg; ®
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Welcome to MrBigB's website!</title>
</head>
<body>
<h1>h1标签效果测试</h1>
<h2>h2标签效果测试</h2>
<h3>h3标签效果测试</h3>

<s>s标签效果测试</s>
<b>b标签效果测试</b>
<u>u标签效果测试</u>
<i>i标签效果测试</i>

<p>p标签效果测试</p>
<br>
我是无标签文本1上面测试的br标签效果
<hr>
我是无标签文本2上面测试的是hr标签的效果
<p>p标签效果测试</p>

<p>a &gt; b</p>
<p>a &lt; b</p>
<p>&amp;</p>
<p>&yen;</p>
<p>&copy;</p>
<p>&reg;</p>

</body>
</html>

    块级标签和行内标签

    • 行内标签, 内部文本有多大就占多大: s, i, u, b, span

      • 行内标签不能嵌套行内标签和块级标签

    • 块级标签独占一行: h1-h6, p, br, hr, div

      • 块级标签内可以嵌套其他块级标签和行内标签
      • 注意: p标签虽然也是块级标签, 但只能嵌套行内标签, 不能嵌套块级标签

    标签的两个属性

    • id 标签的编号, 每一个标签都应该都一个id, 且同一个文档中, 标签的id是唯一的
    • class 类属性, 有点类似于面向对象的继承
      • class = "c1, c2, c3" 则当前标签就会拥有c1, c2, c3的所有样式

    body内重要的几个标签

    • div

      • 是一个块级别标签
      • 相当于一块区域, 可以往区域内填写任何内容

    • span

      • 是一个行内标签

    • a 连接标签

      • 跳转功能, href参数控制跳转的地址 , target参数控制是在当前页面跳转还是新打开页面(_self, _blank)
      • 锚点功能
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Welcome to MrBigB's Website</title>
</head>
<body>
<a href="" id="a1">start</a>
<a href="http://www.baidu.com" target=_self>click me to search</a>
<div style="background-color: darkred;height: 200px"></div>
<div style="background-color: darkgreen;height: 200px"></div>
<div style="background-color: darkblue;height: 200px"></div>
<a href="" id="a2">middle</a>
<div style="background-color: darkblue;height: 200px"></div>
<div style="background-color: darkgreen;height: 200px"></div>
<div style="background-color: darkred;height: 200px"></div>
<a href="#a1">back to the start</a>
<br>
<a href="#a2">bac to the middle</a>
</body>
</html>

    • img 图片标签

      • src 图片地址
      • alt 当图片加载不出来的时候展示的提示信息
      • title 鼠标悬浮在图片上后的提示信息
      • width和height 设置图片展示大小, 只需设置一个即可, 默认等比缩放
      <img src="test.jpg" alt="this is a picture of a dog" title="the dog is playing" height="200"/>

    列表标签

    • ul无序列表

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

    • ol有序列表

      • 1 数字列表
      • A 大写字母
      • a 小写字母
      • I 大写罗马
      • i 小写罗马

    • dl标题列表

      • dt 小标题
      • dd 小章节

    表格标签

    • 展示数据的时候一般都用到表格标签
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
<table border="1">
    <thead> <!--表头-->
    <tr> <!--一个tr代表一行-->
        <th>name</th>
        <th>gender</th>
        <th>age</th>
    </tr>
    </thead>
    <tbody> <!--表数据-->
    <tr>
        <td>bigb</td>
        <!--<td rowspan="2">bigb</td>--> 
        <td>male</td>
        <td>18</td>
    </tr>
    <tr>
        <td>blake</td>
        <!--<td colspan="2">blake</td>-->
        <td>female</td>
        <td>22</td>
    </tr>
    </tbody>
</table>
</body>
</html>
  • 相关阅读:
    PCB设计流程
    第一次PCB画板实战MiniDVPart1/3
    程序人生
    MCU死掉了
    一花一世界，一码一人生，谓之程序人生
    神船·神舟
    程序猿的选择
    android得到strings.xml文件中的内容
    Android特效 五种Toast详解
    Java字符串转换为日期和时间比较大小
  • 原文地址：https://www.cnblogs.com/bigb/p/11846031.html
Copyright © 2011-2022 走看看