zoukankan      html  css  js  c++  java

  • 前端之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

")
    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
    　　　　　　

  • 相关阅读:
    出现Unexpected token, expected ","报错原因
    select属性的作用
    程序员无广告版百度
    VUE核心组件
    ajax的作用
    SSH整合
    Unity安装教程
    bean的生命周期
    BeanFactory
    打印机
  • 原文地址：https://www.cnblogs.com/zhouyongv5/p/10938892.html
Copyright © 2011-2022 走看看