HTML基础标签

前端的三剑客
web的服务本质
HTTP协议
HTML语法概括
head内的常见标签
boby内基本标签
常见符号
body内布局标签
baby内常用标签
列表标签
表格标签
表单标签input

前端的三剑客

前端：任何与用户直接打交道的操作页面 都可以称之为前端
类似前台接待


三剑客 前端页面展示的组成部分

HTML    网页的骨架
CSS.    网页的样式
javascript   网页的动态

web的服务本质

如果想在网页上与服务器交流，那就必须基于HTML语言


import socket

sk = socket.socket()

sk.bind(("127.0.0.1", 8080))
sk.listen(5)


while True:
    conn, addr = sk.accept()
    data = conn.recv(8096)
    conn.send(b"HTTP/1.1 200 OK\r\n\r\n")
    # 连接成功时 服务端应该立即回应客户端的响应
    conn.send(b"<h1>Hello world!</h1>")
    conn.close()
   
浏览器发送请求响应 请求服务端地址和端口 >>> 服务端接收请求
>>>服务端返回响应 >>> 服务端把HTML文件发给浏览器  浏览器渲染展示

HTTP协议

HTTP协议最主要的是：规定了浏览器与服务端之间的数据交互格式

http协议四大特性
  1.基于请求响应
       客户端发送请求  服务端回应响应
  2.基于TCP IP作用于应用层之上的协议
       该协议属于应用层
  3.无状态
       服务端不会保存客户端的状态
       每个人看到的都是一样的
  4.无\短连接
       客户端与服务端不会长久保持连接
    

数据格式
   1.请求格式
     请求首行(请求方式 协议版本)
     请求头（一大堆K:V键值对）
     换行
     请求体(存放敏感信息 并不是所有的请求方式都有请求体)
      
   2.响应格式
     响应首行(状态码 协议版本)
     响应头  (一大堆K:V键值对)
     换行
     响应体  (存放给浏览器展示的数据)
     conn.send(b"HTTP/1.1 200 OK\r\n\r\n")
     #这里就是响应首行
      
   3.响应状态码
     用一些数字来表达一些文本意义 类似于暗号 
     1xx:服务端已经接收到了你的请求正在处理，客户端可以继续发送或等待
     2xx:200 ok 请求成功 服务端发送了对应的响应
     3xx:302(临时)304(永久) 重定向(想访问网页A但是自动跳到了网页B)
     4xx:403访问权限不够  404请求资源不存在
     5xx:服务端内部错误
      
     在项目中我们也可以自定义更多响应状态码 通常以10000起步

HTML语法概括

1.HTML注释语法
  <!--注释    内容-->

2.HTML文档结构
<html>  固定格式 html包裹
    <head>主要放跟浏览器交互的配置</head>
    <boby>主要放给与哦难怪乎查看的内容</boby>  
</html>

3.HTML标签分类
  单标签(自闭合标签)
  <img/>
  # 一部分标签是单独呈现的，比如：<br/>、<hr/>、<img src="1.jpg" />等。 
  
  双标签
  <h1> </h1>
  # HTML标签通常是成对出现的，比如：<div>和</div>，第一个标签是开始，第二个标签是结束。结束标签会有斜线。
  
  <标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>

HTML代码一名存放于对应的文件中 文件已.html结尾  需要用浏览器打开

head内的常见标签

1.<title>定义网页小标题</title>

2.meta定义网页源信息 重要设置
 <meta name='keywords' content="查询关键字，可以填写多个">
 <meta name="description" content="网页简介">

3.<style> h1 { color:green } </style>
  内部支持编写css代码

4.link引入外部css文件
  <link rel = "stylesheet" href="mycss.css">

5.script支持内部编写js代码 也可以引入外部js文件
  <script> prompt('好好学习','天天向上')  </script>

boby内基本标签

1.标题系列
 h1-h6  <h1>一级标题</h1>

2.段落标签
 <p> 段落内容 </p>
 <!--该标签自带换行-->

3.其他标签
 <u>下划线</u>
<i>斜体</i>
<s>删除线</s>
<b>加粗</b>
<!--此类标签文本不换行-->

4.换行与分割线
<br> 单标签 换行
<hr> 单标签 分割线


标签分类：
1.行内标签 <u> <i> <s> <b> 不换行。文本有多大就占用多大
2.块级标签 <h1> - <h6>  <p> 都是独占一行

常见符号

1.&nbsp; 空格
2.&gt; 大于号
3.&lt; 小于号
4.&amp；  &符号 
5.&yen;   人民币符号
6.&copy;  版本号
7.&reg;   版权号

body内布局标签

div 块级标签

span 行内标签

'''
标签之间可以互相嵌套的。并且理论上可以无线套娃
快级标签内部可以嵌套块儿级标签 和行内标签

p标签虽然是块儿级标签 但是他的内部也不能嵌套块儿级标签

行内标签内部职能嵌套行内标签
'''

baby内常用标签

'''
标签括号内填写的 什么=什么 可成之为标签的 属性
1.默认属性
   标签自带的 表现的时候有自动提示
2.自定义属性
   用户自定义  编写不会有提示甚至会飘颜色
'''


a标签 链接标签
<a href="https://www.baidu.com/">百度地址</a>

href='url' 填写网址 点击跳转功能 
href='#id' 可以跳转到指定id标签的地方  例如回到顶部 就是直接跳转到顶部标签的id处
<a href="https://www.baidu.com/" target="_blank">百度地址</a>

target 可以不设置 默认原网页跳转
       _blank 设置为 新开启网页跳转


img标签 图片标签
<img src="https://www.baidu.com/img/flexible/logo/pc/index_gray.png" title="欢迎您" width="500" alt="图片加载失败">
单标签类型 src = 填写图片的地址 title = 鼠标悬停在图片上自动展示的文字
width = 控制图片宽度 height = 控制图片高度 单位为px  alt=图片加载时候的提示

列表标签

无序列表
<ul> 数码产品
    <li>手机</li>
    <li>电脑</li>
    <li>电器</li>
    <li>刮胡刀</li>
</ul>
# 页面上所有的规则排序 横向或者竖向的数据都是用的无序列表

有序列表
<ol type="A">
    <li>牛逼</li>
    <li>哈哈哈</li>
</ol>

type 排序方法  


标题排序
<dl>
    <dt>大标题</dt>
    <dd>小标题</dd>
    <dd>小标题2</dd>
    <dd>小标题3</dd>

</dl>
结果

大标题
	小标题
	小标题2
	小标题3

表格标签

1.先写基本骨架
<table title="学生信息表">
    <thead>
  # thead 表头信息
        <tr>
            <th>编号</th>
           #th主要用于表头字段中 用来加粗显示
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>

    <tbody>
    # 表数据
        <tr>
            <td>10001</td>
        #td主要用于表达数据中 
            <td>张无忌</td>
            <td>19</td>
        </tr>
    </tbody>
</table>

表单标签input

可以获取到用户数据并发送给服务器

form标签
<form action=""  method=""  ></form>
action 控制数据的提交地址
method 控制数据的提交方法

基于form表单发送数据
  用于获取用户数据的标签至少应该含有name属性
     name属性相当于字典的键 
  用户输入的数据都会被保存到标签的value属性中
     value属性相当于字典的值



input标签   
    type = 输入数据类型  name = 字段名

    <p>用户名:<input type="text" name="username:"></p>
       text = 普通文本
      
    <p>密码 :<input type="password" name="password:"></p>
        password = 密文展示 ***展示   
      
    <p>生日 :<input type="date"></p>
        date = 日期选项 
      
    <p>邮箱 :<input type="email"></p>
        email = 邮箱格式
      
    <p>性别 :<input type="radio" name="性别" value='male'>男
            <input type="radio"name="性别" value='famale'>女 </p>
        radio 单选属性。注意 名字需要相同 
        
     <p>爱好 :&nbsp;&nbsp;&nbsp; <input type="checkbox">篮球
        <input type="checkbox">水球
        <input type="checkbox">大球
        <input type="checkbox ">小球    </p>
        checkbox 多选 同时可以选择多个
               
    <p>上传文件：<input type="file"></p>
        file 文件格式 multiple 可同时上传多个文件
      
    <p>上传文件：<input type="file" multiple></p>
				
    <input type="submit">
    submit 可触发提交数据的按钮
    <input type="reset">
    reset 重置已输入的数据按钮
    <input type="button" value="来点我">
    button 自定义按钮 可自定义功能
    
    <p>选择所在地：<select name="" <option>北京市中心</option>
     select标签 下拉框 单选则
     option 设置下拉框里面的选项
     <option>上海</option> <option>广州</option>
      </select>  </p>
	  
	  
	  如果不需要用户填写数据，只需要选择，那么我们需要自己填写value属性
例如单选时：
  <input type="radio" name="gender" value="male">男
  <input type="radio" name="gender" value="female">女
ps：如果标签没有name属性  form表单会直接忽略 不会发送

标签的属性输入和属性值相等 可以简写
<input type ='file' multiple = 'multiple'>
可以简写为
<input type ='file' multiple>

针对选择类标签 可以设置默认选项
<input type="radio" name="gender" value="female" checked >女
<input type="checkbox" name="hobby" value="swim" checked >游泳

checked 用来设置默认选项
    

     <textarea name="" id="" cols="20" rows="3"></textarea>
     textarea 大段文字说明框