day--42 前端基础小结
前端基础总结 一：前端实现的原理：
小实例：
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 前端基础小结的更多相关文章
- 前端基础面试题(JS部分)
1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined.Null.Boolean.Number.String 值类型:数值.布尔值.null.und ...
- 前端基础-CSS属性操作
前端基础-CSS属性操作 css text 文本颜色:color 颜色属性被用来设置文字的颜色. 颜色是通过CSS最经常的指定: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB( ...
- day14 前端基础 HTML
从今天开始,学习前端基础. 前端,就是HTML CSS JS 等 对于我们这种初学者,并不知道这些专业术语都是什么,给大家举一个形象的例子: HTML 就是一个人,赤裸裸的人 CSS 就是衣服 ...
- BAT 前端开发面经 —— 吐血总结 前端相关片段整理——持续更新 前端基础精简总结 Web Storage You don't know js
BAT 前端开发面经 —— 吐血总结 目录 1. Tencent 2. 阿里 3. 百度 更好阅读,请移步这里 聊之前 最近暑期实习招聘已经开始,个人目前参加了阿里的内推及腾讯和百度的实习生招聘, ...
- 前端第二篇---前端基础之CSS
前端第二篇---前端基础之CSS 目录 一.css介绍 二.css语法 三.css的几种引入方式 四.css选择器 五.css属性相关 六.盒子模型 拓展 一.css介绍 CSS(Cascading ...
- 前端第四篇---前端基础之jQuery
前端第四篇---前端基础之jQuery 一.jQuery介绍 二.jQuery对象 三.jQuery基础语法 四.事件 五.动画效果 六.补充each 一.jQuery简介 1.jQuery介绍 jQ ...
- 前端基础面试题（js部分）
前端基础面试题(JS部分) 1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined.Null.Boolean.Number.String值类 ...
- web前端基础知识及快速入门指南
web前端基础知识及快速入门指南 做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...
- html css 前端基础 学习方法及经验分享
前言: 入园第一天,想分享一点儿前端基础html css 的学习方法和一些经验给热爱前端,但是不知道从哪儿开始,依旧有些迷茫的新手朋友们.当然,适合每个人的学习方式不同,以下所讲的仅供参考. 一.关于 ...
随机推荐
- Linux 常用基本命令1
linux终端 linux有6个终端 alt+f1 -f6 切换各个终端 这样有个好处,可以用多个终端同时做事情,一个终端死掉,也可以换另外的终端 cd / 根目录 ls 蓝色的目录 白色是文件 c ...
- 7. Reverse Integer 反转整数
［抄题］: 将一个整数中的数字进行颠倒,当颠倒后的整数溢出时,返回 0 (标记为 32 位整数). 样例 给定 x = 123,返回 321 给定 x = -123,返回 -321 [暴力解法]: ...
- 嵌入式Qt开发环境的搭建详解
一.嵌入式Qt开发环境的搭建前奏 1.下载arm-linux-gcc-4.4.3-20100728.tar.gz 2.下载qt-everywhere-opensource-src-4.8.5.tar. ...
- LaTeX入门教程(一)
LaTeX(LATEX,音译“拉泰赫”)是一种基于ΤΕΧ的排版系统,由美国计算机学家莱斯利·兰伯特(Leslie Lamport)在20世纪80年代初期开发,利用这种格式,即使使用者没有排版和程序设计 ...
- loj2512 [BJOI2018]链上二次求和
传送门 分析 咕咕咕 代码 #include<iostream> #include<cstdio> #include<cstring> #include<st ...
- java IO 对象流 反序列化和序列化
例: 重点:需要序列化的对象必须实现Serializable接口 //需要序列化的对象 public class User implements Serializable { private Stri ...
- web开发四个作用域
web开发一共有四个作用域,范围从高到低分为appliaction作用域(全局作用域),session作用域,request作用域和page作用域.${base}是el表达式语法,它会自动先从page ...
- 检查Windows上安装的.net版本
cmd reg query "HKLM\Software\Microsoft\NET Framework Setup\NDP" /s /v version | findstr /i ...
- php复制目录
function copyDir($dirSrc,$dirTo) { if(is_file($dirTo)) { echo '目标不是目录不能创建!'; return; } if(!file_exis ...
- Java高质量代码之 — 泛型与反射
在Java5后推出了泛型,使我们在编译期间操作集合或类时更加的安全,更方便代码的阅读,而让身为编译性语言的Java提供动态性的反射技术,更是在框架开发中大行其道,从而让Java活起来,下面看一下在使用 ...