前端之HTML

前端

 　　任何能够直接和用户打交道的交互界面 即为前端

1）软件开发架构
　　c/s结构
　　b/s架构：本质上也是c/s架构

2）浏览器输入网址发生了几件事？
　　1.输入网址
　　2.朝服务端发送请求
　　3.服务器接收请求并查询浏览器想要的数据返回给浏览器
　　4.浏览器拿到数据展示页面

3）HTTP协议
　　超文本传输协议
　　客户端服务端在数据交互的时候都必须遵循该协议

4）电子设备识别、传输信息的特点：二进制↓

　　1.基于网络传输，只有遵循http协议编写才便于通用解析

　　2.文件后缀名到底给谁看呢？仅仅是给人看的

web服务的本质

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介绍

　　　　超文本标记语言 Hypertext Markup Language,  用于创建网页

　　　  HTML不是一种编程语言！！！它使用标签来描述网页。

　　　  本质：是浏览器可识别的规则，按照规则编写网页，浏览器根据规则渲染网页；

　　　　　　对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）

　　　  网页文件的扩展名：.html或.htm 

 

　　　 html文件打开方式：

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

方式2：pycharm内自动打开

　　　　

　　1）文档结构

<!DOCTYPE html>   <!--声明为HTML5文档,必须是 HTML 文档的第一行-->
<html lang="en">
<head>    <!--head存放的内容用户是看不到的，主要是给浏览器和搜索引擎使用-->
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>    <!--用户能够看见的内容都在body里面-->

</body>
</html>

2）标签的语法：

　　<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>

  • <html>、</html>是文档的开始标记和结束的标记。HTML页面的根元素，中间为文档的头部（head）和主体（body）　　　　　
  • <head>、</head>定义了HTML文档的开头部分。包含了文档的元（meta）数据。
  • <title>、</title>定义了网页标题，在浏览器标题栏显示。
  • <body>、</body>之间的文本是可见的网页主体内容。
  • 注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。
  •      有些浏览器会设置 GBK 为默认编码，则需要设置为 <meta charset="gbk">。
  • <!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令

 3）几个很重要的属性：

  • id：定义标签的唯一ID，HTML文档树中唯一
  • class：为html元素定义一个或多个类名（classname）(CSS样式类名)
  • style：规定元素的行内样式（CSS样式）

 

HTML常用标签

<head></head>内常用标签

<title></title>     页面标题

<style></style>     编写css代码

<script></script>    内部可以直接写js代码，也可以通过src属性引入外部js代码文件

<link/>            通过href引入外部css文件

<meta/>            定义网页原信息

<body></body>内常用标签

　　1）基本标签

<p>段落标签</p>

<h1>标题1</h1>  <!--最大号-->
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>  <!--最小号-->


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


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

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

　　2）特殊字符

&nbsp;         空格
&amp;          &
&lt;           <
&gt;           >
&yen;          ￥
&copy;         ©  版权
&reg;          ®  注册

　　特殊字符编码：https://www.jb51.net/onlineread/htmlchar.htm

3）常用标签 * * * * * *

<div></div>            <!--用来定义一个块级元素，另起一行-->
<span></span>          <!--用来定义一个行内元素-->
<p></p>                <!--p标签：不能包含块级标签，也不能包含p标签-->
<a href=""></a>        <!--超链接标签-->
<img src="" alt="">    <!--图片标签-->

　　4）列表标签　

　　ul 无序列表  type属性：

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

　　　　

　　ol 有序列表 type属性：

    • 1 数字列表，默认值
    • A 大写字母
    • a 小写字母
    • Ⅰ大写罗马
    • ⅰ小写罗马
<ul type="">   <!--无序列表-->
    <li>a</li>
</ul>

<ol type="">   <!--有序列表-->
    <li>111</li>
</ol>


<dl>   <!--标题列表-->
    <dt>标题</dt>
    <dd>内容</dd>
</dl>

　　5）表格标签

固定就以下面的格式书写
<table>
　　<thead></thead>
　　<tbody></tbody>
</table>

 tr      一个tr表示一行

 rowspan  垂直方向合并
 colspan  水平方向合并
 border   调整列表的边框
 cellspacing 调单元格与外边框之间的距离
 cellpadding 调文本与单元格之间的距离

<table border="1" cellspacing="20" cellpadding="10">  <!--表单标签-->
    <thead>
        <tr>  <!--一行-->
            <th>name</th>
            <th>age</th>
            <th>hobby</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="2">json</td>    <!--横向方向占两格-->
            <!--<td>18</td>-->
            <td rowspan="2">read</td>    <!--竖直方向占两格-->
        </tr>
        <tr>
            <td>nick</td>
            <td>18 </td>
            <!--<td>run</td>-->
        </tr>
    </tbody>
    <tefooter></tefooter>
</table>

　　6）form表单：前后端数据交互 * * * * * *

获取用户输入(手动输入/选择/默认值)，并将获取到的用户信息发送给后端

form表单中只有input的type类型为submit才会触发提交信息的动作
如果不想通过input标签来触发提交动作 那么可以直接写一个<button>button按钮</button>

input
  通过控制type的类型从而实现不同的获取用户输入的标签样式
  text  普通文本
  password 密文
  date  日历
  radio  单选框
  checkbox 多选框
  file  获取文件
  
  submit  触发提交数据的行为
  button  普通的按钮
  reset   重置form表单内容
  
select
  选择框  默认是单选的 可以通过multiple参数将单选变为多选
  一个option就是一个选项
 
textarea
  获取用户大段文本值

 

form表单中几个重要的属性
 
  action:用来控制数据到底提交给谁  写url来指定提交给谁
  
  form表单默认是get请求  可以通过method属性修改提交方法
  
  form表单中需要给每一个获取用户输入的标签加上name属性用来标识当前数据的类型
　　你可以将name属性当做字典的key 用户输入的当做字典的value 并且你可以手动设置value值
  
  form表单发送文件 需要修改enctype属性的值
   默认是urlencoded不支持传输文件
   需要将其修改为multipart/form-data

 

GET请求与POST请求
 　　get请求:获取想要的数据
 　　post请求:提交数据

 

 

1、标签分类1

　　双标签：h1~h6、p、a

　　自闭和标签：img、br、hr

2、标签分类2

　　块儿级标签：div、 h1~h6、 p、 br、 hr

1.独占一行
2.块儿级标签：能够嵌套块儿级标签和行内标签
3.p标签虽然是块儿级标签，但是它不能嵌套任何的块儿级标签
4.块儿级标签能够设置长宽

　　行内标签：span、 img、a、i、 s 、b、 u

　　　　1.自身内容有多的就占多大
　　　　2.行内标签不能设置长宽

3、常用标签

　　所有的html标签都应该有一个id属性，用来唯一标识当前标签 为后续的DOM操作提供基础
　　也就意味着同一份html中标签的id不能重复，不写id属性也是可以的

　　a 标签：

可以通过href跳转到指定的网址
锚点功能:回到顶部

　　<a href="" id="a1">top</a>
　　<a href="#a1">bottom</a>

ps：target属性用来控制是否在当前页面跳转
  默认是_self当前页
  也可以指定成_blank新建页面跳转

　　img标签

 src图片路径:即可以是网络上的图片地址也可以是本地的图片地址
 alt当图片加载失败之后自动展示的提示信息
 title鼠标悬停在图片上时显示的文本
 图片调节长宽的时候只需要调节一个 另外一个参数自动等比例缩放

4、URL

　　统一资源定位符 Uniform Resource Locator，也称 网页地址，是因特网上标准的资源的地址

URL举例：
http://www.sohu.com/stu/intro.html
http://222.172.123.33/stu/intro.html

URL地址由4部分组成，各部分之间用“/”符号隔开。
　　第1部分：协议：http://、ftp://等
　　第2部分：站点地址：可以是域名或IP地址
　　第3部分：页面在站点中的目录：stu
　　第4部分：页面名称，例如 index.html
　　　　　　

 

posted @ 2019-05-28 19:29  zhoyong  阅读(226)  评论(0)  编辑  收藏  举报