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 的学习方法和一些经验给热爱前端,但是不知道从哪儿开始,依旧有些迷茫的新手朋友们.当然,适合每个人的学习方式不同,以下所讲的仅供参考. 一.关于 ...
随机推荐
- C# 读取文件中的sql语句 创建数据库以及表结构
大概思路是: 读取文件 根据文件中行内容为GO 作为分割 一条条放到list中 然后在程序中逐条执行sql语句; 值得一提的是 创建数据库的语句是不允许放到程序事务中执行的 所以目前我是分了两个文本 ...
- Gym101350 J Lazy Physics Cat
参考博客:https://blog.csdn.net/lengqiu2015/article/details/76855681#reply 题意 给出一个长度为n的01串 我们定义F(x,y)是区间[ ...
- Gym101350 FMonkeying Around
题意 有n只猴子排成一排,一共有m个笑话.开始时,这些猴子都坐在椅子上.下面m行给出的每个笑话包含三个整数x,l,k.代表猴子x讲了笑话l,所以距离x小于等于k的猴子如果他们从没听过这个笑话,他们会掉 ...
- NOIP2012摆花
题目描述 小明的花店新开张,为了吸引顾客,他想在花店的门口摆上一排花,共 m 盆.通过调查顾客的喜好,小明列出了顾客最喜欢的 n 种花,从 1 到 n 标号.为了在门口展出更多种花,规定第 i 种花不 ...
- SpringBoot：阿里数据源配置、JPA显示sql语句、格式化JPA查询的sql语句
1 数据源和JPA配置 1.1 显示sql配置和格式化sql配置 者两个配置都是属于hibernate的配置,但是springdatajpa给我们简化了:所有hibernate的配置都在jpa下面的p ...
- InvocationtargetException 类型转换异常
日期类型转换不了json格式数据 json转换数据的时候可以设置某个字段不需要转换 jsonconfig=new JsonConfig() //{} 内传入不需要转换的字段 jsonconfig.se ...
- Map-making Robots: A Review of the Occupancy Grid Map Algorithm
栅格地图算法:http://www.ikaros-project.org/articles/2008/gridmaps/
- Hadoop深入学习：MapTask详解
转自:http://flyingdutchman.iteye.com/blog/1878775#bc2337280 Hadoop深入学习:MapTask详解 博客分类: Hadoop MapTask执 ...
- 编写高质量代码改善C#程序的157个建议——建议40：使用event关键字为委托施加保护
建议40:使用event关键字为委托施加保护 在建议中我们实现了一个具有通知功能的文件传输类,如下: class FileUploader { public delegate void FileUpl ...
- 挂载ISO 和 KILL 掉占用进程
mount -t iso9660 -o loop,user VMware-tools-linux-8.6.0-425873.iso /mnt/cdrom fuser -m -v -i -k /mnt ...