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 的学习方法和一些经验给热爱前端,但是不知道从哪儿开始,依旧有些迷茫的新手朋友们.当然,适合每个人的学习方式不同,以下所讲的仅供参考. 一.关于 ...
随机推荐
- Mongoose 参考手册（转载）
Mongoose 是什么? 一般我们不直接用MongoDB的函数来操作MongoDB数据库 Mongose就是一套操作MongoDB数据库的接口. Schema 一种以文件形式存储的数据库模型骨架,无 ...
- 2-2 groovy基础知识-理论介绍
- dubbo参数调优
dubbo中配置优先级规律:方法级配置优先级高于接口级,consumer的优先级高于provider. 详细: consumer的method配置 > provider的method配置 c ...
- SpringCloud03 Ribbon知识点、 Feign知识点、利用RestTemplate+Ribbon调用远程服务提供的资源、利用feign调用远程服务提供的资源、熔断
1 远程服务资源的调用 1.1 古老的套路 在微服务出现之前,所有的远程服务资源必须通过RestTemplate或者HttpClient进行:但是这两者仅仅实现了远程服务资源的调用,并未提供负载均衡实 ...
- =面试题:java面试基本方向 背1 有用 项目二技术学完再看
一.Java基础 1. 集合框架A)集合中泛型优点? 将运行期的ClaasCastException 转到编译期异常. 泛型还提供通配符 1)HashMap---允许一个键为null,允许多个值为n ...
- 15.select into
select into SELECT INTO 语句从一个表中选取数据,然后把数据插入另一个表中. SELECT INTO 语句常用于创建表的备份复件或者用于对记录进行存档. CREATE TABLE ...
- jqgrid常用操作
.jqgrid控件列在需要的地方加上edittable=true <asp:JQGrid runat=" DataUrl="/ccr/CcrCompanyPromoterMa ...
- Hyper-V和vmware在虚拟机中安装xen总结
1. Hyper-V 在hyper-v中安装了ubuntu13.04,运行很好,使用起来的效果感觉比vmware要舒服.安装变异xen的内核也没有问题,可以正常的安装,update-grub之后也可以 ...
- Linux下的strerror是否线程安全？
下列是glibc-2.14中的源代码: 点击(此处)折叠或打开 char * strerror (errnum) int errnum; { char *ret = __strerror_r (err ...
- 综合学生信息管理系统(JSP+JDBC)
原创 通过JSP+JDBC制作一个简单的操作数据库中表信息的系统. 总体界面如下,一共有5个功能块. 功能一:列出全部学生 功能二:按条件查询学生 功能三:新添加学生 功能四:按条件删除学生 功能五: ...