写在前面——前端要学什么

HTML 内容（标签）
CSS 外观（选择器，属性）
JavaScript 动作（基础语法，BOM&DOM）

一、什么是前端

任何直接能够跟用户打交道的交互界面都可以称之为前端。

我们之前有聊到软件开发架构：C/S架构和B/S架构。今天主要唠唠B/S架构中B-Browser（浏览器）。

1.1浏览器输入网址发生的事

输入网址（URL）
URL是统一资源定位器(Uniform Resource Locator)的缩写，也被称为网页地址，是因特网上标准的资源的地址。
朝网页服务器发送请求
服务器接收请求并查询浏览器想要的数据返回给浏览器
浏览器拿到数据展示页面

1.2Python简易服务器端

from socket import *


HOST = '127.0.0.1'
PORT = 8080
BUFSIZE = 1024
ADDR = (HOST,PORT)

server = socket(AF_INET,SOCK_STREAM)  # 括号内如果不填，就默认是这两个参数
server.bind(ADDR)
server.listen(5)

while True:
    conn,addr = server.accept()
    while True:
        try:
            data = conn.recv(BUFSIZE)
            conn.send(b'HTTP/1.1 200 OK\r\n\r\n')  # HTTP协议 相互交流格式必须统一
            # conn.send(b'Hello World!')  # 浏览器连接时发送消息Hello World
            with open('F:\PythonMaze\web front-end\Day48\my_first_html_file.html','rb')as f:
                for line in f:
                    conn.send(line)
            conn.close()
        except BaseException as e:
            print(e)
            break

1.3HTTP协议：超文本传输协议

客户端服务端在数据交互的时候都必须遵循这套协议，文件的后缀是给人看的，因为文件的传输都是二进制。

二、HTML

超文本标记语言，不是编程语言

2.1 文档结构

<html>
    <head>
        <!--用户看不到，主要给浏览器和搜索引擎看，单行注释-->
    </head>
    <body>
        <!--用户能够看见
			的内容都在这,多行注释-->
    </body>

2.2 html打开方式

方式一：找到文件选择浏览器打开

方式二：pycharm自动打开

2.3 标签

2.3.1 head内标签

<title>页面标题</title>
<style>层叠样式</style>
<script>JavaScript代码</script>
<link 引入css文件 文件名里的%是空格>
<meta 定义网页原信息>
	keyword：关键词 提高被搜索的优先度
	description：描述网页

2.3.2 body内标签

（1）基本标签

<h1>
    标题标签，从1到6，字体越来越小
</h1>
<p>
    段落标签
</p>
<s>弃用符号</s>
<u>下划线</u>
<i>斜体</i>
<b>加粗</b>
<br> 换行
<hr> 分割线

（2）特殊符号

&lt;	小于号
&gt;	大于号
&yen;	人民币符号
&copy;	版权
&reg;	商标
&nbsp;	空格
&amp;	&符号

（3）常用标签

<div>
    页面布局
</div>

<span>页面布局</span>

<a href="http://www.google.com" target="_self">message</a> <!--_self是本标签跳转，_blank新开一个标签-->
<a href ="" id = 'a1'>Top</a>
<a href ="#a1">Bottom</a> <!-- 锚点功能，跳转到锚点处-->
所有的HTML标签都应该有一个id属性，用来区分，为后续的DOM操作提供基础，同一份HTML的id不能重复，不写id属性也是可以的

<img src ='图片地址' alt='图片加载失败显示的信息' title='鼠标悬停显示的信息' widtn ='宽度更改长度按比例一起改动' >

（4）列表标签

<ul type='disc(default)/circle/square/none'>
    <li>i am disorder</li>
</ul>

<ol type='序号样式'>
    <li>i am order</li>
</ol>

<dl>
    <dt>title 1</dt>
    <dd>content 1</dd>
    <dt>title 2</dt>
    <dd>content 2</dd>
</dl>

（5）表格标签

<table>
    <thead> <!--表格头-->
    	<tr> <!--一行-->
            <th>name</th>
            <th>age</th>
            <th>body</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>moon</td>
            <td>18</td>
            <td>basketball</td> <!---->
        </tr>
        <tr>
            <td>hysen</td>
            <td>25</td>
            <td>code</td>
        </tr>
	</tbody>
</table>
border调整列表的边框
cellspacing 调单元格与外边框之间的距离
cellpadding	调单元格
rowspan = 占行数 垂直方向合并
colspan = 占列数 水平方向合并

2.3.3 标签分类

第一种：

双标签：有头有尾

自闭合标签

第二种：

块级标签

独占一行
能够嵌套块级标签和行内标签，但p标签除外
能设置长宽

行内标签：

自身内容有多大占多大
不能设置长宽

2.4 form表单：前后端数据交互

功能：获取用户输入（手动输入/选择/默认值），并将获取到的用户信息发送到后端

<form action=''>
    <p>username : <input type='text'></p>
    <p>password : <input type='password'></p>
    <p>birthday : <input type='date'></p>
    <p>gender : 
    	<input type='radio' name='gender'> ：male
    	<input type='radio' name='gender' checked = 'checked'> ：female <!-- 名字和属性相同可只写一个-->
    </p>
    <p>
        hobbies:
        <input type='checkbox' checked>唱
        <input type='checkbox' checked>跳
        <input type='checkbox' checked>rap
        <input type='checkbox' checked>篮球
    </p>
    <p>
        province单选:<!--province默认单选:-->
        <select name="province" id="">
        	<option value='beijing'>北京</option>
        	<option value="shanghai">上海</option>
            <option value="shenzhen">深圳</option>
        </select>
    </p>
    <p>province多选:
        <select name="" id="" multiple>
            <option value="">北京</option>
            <option value="">上海</option>
            <option value="">深圳</option>
        </select>
    </p>
    <p>province下拉菜单中分组:
        <select name="" id="">
            <optgroup label="北京">
                <option value="">朝阳区</option>
                <option value="">海淀区</option>
                <option value="">昌平区</option>
            </optgroup>
            <optgroup label="上海">
                <option value="">浦东新区</option>
                <option value="">静安区</option>
                <option value="">徐汇区</option>
            </optgroup>
            <optgroup label="深圳">
                <option value="">南山区</option>
                <option value="">宝安区</option>
                <option value="">福田区</option>
            </optgroup>
        </select>
    <p>info:
        <textarea name="info" id="" cols="30" rows="10"></textarea>
    </p>
    <p>file:
        <input type="file" name="file">
    </p>
    <input type="submit" value="注册">
    <input type="button" value="普通按钮">
    <input type="reset" value="重置">
    <button>button按钮</button>
</form>

form表单

  功能:获取用户输入(手动输入/选择/默认值)，并将获取到的用户信息发送给后端。
  form表单中只有input的type类型为submit才会触发提交信息的动作。
  如果不想通过input标签来触发提交动作那么可以直接写一个button按钮。

input

通过控制type的类型从而实现不同的获取用户输入的标签样式

text 普通文本
password 密文
date 日历
radio 单选框
checkbox 多选框
file 获取文件
submit 触发提交数据的行为
button 普通的按钮
reset 重置form表单内容

select

选择框默认是单选的可以通过multiple参数将单选变为多选
一个option就是一个选项

textarea

获取用户大段文本值

前端管中窥豹之HTML篇