前端基础总结

一：前端实现的原理：
    小实例：
　　01：第一步：创建一个socket服务端：

        import socket

        server=socket.socket()

        ip_port=("127.0.0.1",8009)

        server.bind(ip_port)

        server.listen(4)

        while 1:

            conn, addr = server.accept()

            from_client_msg=conn.recv(1024)

            conn.send(b"http/1.1 200 ok\r\n\r\n")

            conn.send(b"<h1>hello world,my friends!</h1>")

            conn.close()

    02：第二步。在电脑浏览器中输入  127.0.0.1：8009  即可显示： hello world,my friends!




总结：通信过程：

    浏览器发送请求---〉http协议--〉服务端接受请求--〉服务端返回响应--〉服务端把html文件内容发给浏览器--〉浏览器渲染页面

    03：浏览器兼容性：

        浏览器内核：

        浏览器    --    内核

        IE           --    trident

        chrome  ---   blink

        火狐       ---   gecko

        Safari     ---   webkit

    PS：「浏览器内核」也就是浏览器所采用的「渲染引擎」，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。

        渲染引擎是兼容性问题出现的根本原因。




二：html说明：
    html语言是一种超文本标记语言，是一种创建网页的标记语言。它不是一种编程语言
    01:html文档结构：
            基本文档格式实例：




　　　　<!doctype html>

            <html lang="en">

            <head>

                这个是头部

                  <!-- #申明编码是utf-8 根据浏览器的要求不同，有些是 <meta charset="gbk"> ，

                  现在大多数的浏览器是utf-8模式 -->

                <meta charset="UTF-8">

                <meta http-equiv="X-UA-Compatible" content="ie=edge">

                <title>这个是标题</title>

            </head>

            <body>

            </body>

            </html>








001：<!doctyep html> 申明其为html文档

        002：<html lang="en"> 申明语言是英语，如果需要时中文，则需要将 "en" 改为 “zh-CN”

        003：<html> </html>  开头和结尾标记，这个是一个双标签。在他们之间的事<body> </body> 和<head></head>,<title> </title>等等

        004：<titile></title> 定义了在浏览器顶端显示的内容

        005：<body></body>  之间的文本是显示在可见的 网页主题内容。




三：注释和特别说明




html注释  ctrl+/  键在pycharm 里面可以直接注释 html语句

    <!doctype> 申明必须是html文档中的第一行，，位于<html>标签之前




四：body内的常用标签（单标签，双标签）
    01：基本标签




　　　　<b>加粗</>

        <i>斜体</>

        <u>下划线</>

        <s>删除</s>  #在文字中间显示一行删除线

        <p>段落标签</p>  #独占一个段落，一行

        #h标签随着数字增大，在浏览器中显示的文字越来越小，一共有1到6个等级

        <h1></h1>

        <h2></h2>

        <h3></h3>

        <h4></h4>

        <h5></h5>

        <h6></h6>

        <br> 换行  #单标签

        <hr>  #就是单独的在一行显示一个水平线

        <img src="图片地址" alt="图片未加载时的显示" title="鼠标放在上面的显示内容" height="高度" width="宽度">

            height和width只写一个会自动等比例缩放




    02：div标签和span标签




　　　　 001:<div>写的内容</div> ,div标签主要用来定义块级元素，没有实际意义，主要通过css样式为其赋予不同的表现

        002:<span> 标签用来定义内联元素，无实际意义，主要通过css样式为为其赋予不同的表现




    03：a标签（a标签是双标签）




　　　　  01:a标签：超链接标签

            <a href="www.baidu.com">链接 </a> #点击”链接“ 则自动跳转到 百度的网址

        02:a标签：跳转到指定页面或则位置（锚点，像博客中点击一个目录，直接就跳转到相关目录下）

        例子：

            <a href="#p1">哈哈</a>  #点击”哈哈“ 则自动跳转到  ”锚点跳转“

            <p id="p1">锚点跳转</p>




五：列表
    01：无序列表




　　　　<!--<ul type="disc">-->

        #<!--<ul type="circle">-->

        #<!--<ul type="square">-->

        #<ul type="none">

            <li>第一项</li>

            <li>第二项</li>

            <li>第三项</li>

        </ul>

        type：disc（实心圆），circle（空心圆），square（实心方块）




    02：有序列表




　　　　<ol type="A" >

            <li>无序列表ol</li>

            <li>无序列表ol</li>

            <li>无序列表ol</li>

            <li>无序列表ol</li>

        </ol>

        i,I  罗马数字增加

        type:A（A，B，C....）,a(a,b,c,...),I,i ，1，默认是从1开始，往后面开始排序（1，2，3）




六：标题




　　<dl>标题

        <dt>标题dt一</dt>

        <dd>内容dd</dd>

        <dt>标题dt二</dt>

        <dd>内容dd二</dd>

    </dl>




七：表格




　　表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干个单元格组成，单元格可以包含文字，列表，图案

    单表等等

    <!--cellspacing  内边距  边框和内容之间的距离

    cellpadding  外边距  内外边框之间的距离

    -->

    <table border="" cellpading="" cellspacing="">

        <thead align="right">   <!--   左/右对齐 -->

        <tr>

            <th>序号</th>  <!--  #一行 <th></th> 单元格(一个标签表示一个单元格)  -->

            <th>姓名</th>

            <th>爱好</th>

        </tr>

        </dt>

        </thead>

        <!-- 内容部分 -->

        <tbody>

        <!--内容第一个空格-->

        <tr>  <!-- 第二行第一个单元格  -->

            <td> 111</td>

            <td> 111</td>

        <!--  <td rowspan=""> 一个单元格竖跨多少行，<td colspan=""> 一个单元格横跨多少列 -->

            <td> 111</td>

        </tr>

        <!-- 第二行第一个单元格  -->

            <td> 222</td>

            <td> 222</td>

            <td> 222</td>

        </tr>

        </tbody>

    </table>








属性:

    border: 表格边框.

    cellpadding: 内边距 （内边框和内容的距离）

    cellspacing: 外边距.（内外边框的距离）

    width: 像素 百分比.（最好通过css来设置长宽）

    rowspan: 单元格竖跨多少行

    colspan: 单元格横跨多少列（即合并单元格）






												


											
day--42 前端基础小结的更多相关文章
	

    
								
  1. 前端基础面试题(JS部分)
		
    1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined.Null.Boolean.Number.String 值类型:数值.布尔值.null.und ...
    
		
    2. 
						
  2. 前端基础-CSS属性操作
		
    前端基础-CSS属性操作 css text 文本颜色:color 颜色属性被用来设置文字的颜色. 颜色是通过CSS最经常的指定: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB( ...
    
		
    3. 
						
  3. day14 前端基础 HTML
		
    从今天开始,学习前端基础. 前端,就是HTML CSS JS 等 对于我们这种初学者,并不知道这些专业术语都是什么,给大家举一个形象的例子: HTML  就是一个人,赤裸裸的人 CSS    就是衣服 ...
    
		
    4. 
						
  4. BAT 前端开发面经 —— 吐血总结      前端相关片段整理——持续更新       前端基础精简总结    Web Storage      You don't know js
		
    BAT 前端开发面经 —— 吐血总结   目录 1. Tencent 2. 阿里 3. 百度 更好阅读,请移步这里 聊之前 最近暑期实习招聘已经开始,个人目前参加了阿里的内推及腾讯和百度的实习生招聘, ...
    
		
    5. 
						
  5. 前端第二篇---前端基础之CSS
		
    前端第二篇---前端基础之CSS 目录 一.css介绍 二.css语法 三.css的几种引入方式 四.css选择器 五.css属性相关 六.盒子模型 拓展 一.css介绍 CSS(Cascading  ...
    
		
    6. 
						
  6. 前端第四篇---前端基础之jQuery
		
    前端第四篇---前端基础之jQuery 一.jQuery介绍 二.jQuery对象 三.jQuery基础语法 四.事件 五.动画效果 六.补充each 一.jQuery简介 1.jQuery介绍 jQ ...
    
		
    7. 
						
  7. 前端基础面试题（js部分）
		
      前端基础面试题(JS部分)   1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined.Null.Boolean.Number.String值类 ...
    
		
    8. 
						
  8. web前端基础知识及快速入门指南
		
    web前端基础知识及快速入门指南 做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...
    
		
    9. 
						
  9. html css 前端基础 学习方法及经验分享
		
    前言: 入园第一天,想分享一点儿前端基础html css 的学习方法和一些经验给热爱前端,但是不知道从哪儿开始,依旧有些迷茫的新手朋友们.当然,适合每个人的学习方式不同,以下所讲的仅供参考. 一.关于 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. C#中的IEnumerator、foreach、yield
			
    [C#中的IEnumerator.foreach.yield] 1.IEnumerator,是一个接口,它的方法如下: 2.foreach语句,在编译后会变成IEnumerator的调用: 3.yie ...
    
			
    2. 
						
  2. java中链表的数据（对象）位置交换
			
    用LinkedList类的set方法把引用 对象换了就行 ,如 import java.util.LinkedList; public class Tffdsafsdafsad { public st ...
    
			
    3. 
						
  3. Java AOP 注解配置与xml配置
			
    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...
    
			
    4. 
						
  4. 默默的发现在网上找到的hook  NtQueryDirectoryFile......
			
    默默的发现在网上找到的hook  NtQueryDirectoryFile...... hook  NtQueryDirectoryFile是为了实现文件隐藏,然后就发现在网上发现的代码版本似乎同一个 ...
    
			
    5. 
						
  5. 实践作业3：白盒测试----findbugs介绍及使用DAY7
			
    本小组选择的是一个开源的Java静态代码分析工具----Findbugs. 与其他静态分析工具(如Checkstyle和PMD)不同,FindBugs 不注重样式或者格式,它专注于寻找真正的缺陷或者潜 ...
    
			
    6. 
						
  6. 通过javascript的日期对象来得到当前的日期
			
    var currentDate = new Date(); var weekday = ["星期日", "星期一", "星期二", &quo ...
    
			
    7. 
						
  7. Django-Web框架之Hello Django!
			
    1.首先我们配置guest目录下面的settings.py问,将我们的sign应用添加到项目中.如下图所示: 2.我们通过地址栏:http://127.0.0.1:8001/index/访问Djang ...
    
			
    8. 
						
  8. java.lang.NoSuchMethodError: org.objectweb.asm.ClassVisitor.visit(IILjava/lang/String;Ljava/lang/String;[Ljava/lang/String;Ljava/lang/String;)V
			
    异常完整信息 严重: Servlet.service() for servlet RegServlet threw exception java.lang.NoSuchMethodError: org ...
    
			
    9. 
						
  9. React+gulp+browserify模块化开发
			
    阅读本文需要有React的基础知识,可以在React 入门实例教程和React中文官网进行基础学习. 没有React基础也可以学习本文,本文主要不是学习React,而是gulp+browserify进 ...
    
			
    10. 
						
  10. Redis 占用Windows系统盘空间23G
			
    Redis常出现问题总结: 1.当出现修改--maxheap and --heapdir 在启动这两个版本时都会创建一个 RedisQFork.dat文件,我不确定 RedisQFork 文件是否变小 ...
    
			
    11.