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 的学习方法和一些经验给热爱前端,但是不知道从哪儿开始,依旧有些迷茫的新手朋友们.当然,适合每个人的学习方式不同,以下所讲的仅供参考. 一.关于 ...
随机推荐
- jQuery简单介绍及基本用法(选择器&DOM操作)
简介 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是“write Le ...
- Gym 101128 B Black Vienna
题意 有A-Z 26张牌,现在从中抽出3张牌,并把剩下的23张牌分给选手1和2,现在有n次询问,每次询问一个选手是否有某两张牌,和选手的回答.回答说自己有这两张牌中的几张,问拿出的三张牌有多少种方案能 ...
- nohup 无发后台运行
用nohup命令让Linux下程序永远在后台执行 [ 2006-5-13 22:31:54 | By: 牧云 ] Unix/Linux下一般想让某个程序在后台运行,很多都是使用 & 在 ...
- Angular问题04 模块导入错误???、BrowserModule模块重复加载???、material模块引入后报错
1 模块导入错误 1.1 问题描述 项目启动时报错:元数据错误,错误截图如下: 1.2 问题原因 利用VsCode开发angular项目时利用自动导入出现错误 坑01:VsCode 的自动导入功能比较 ...
- 819. Most Common Word 统计高频词（暂未被禁止）
［抄题］: Given a paragraph and a list of banned words, return the most frequent word that is not in the ...
- 455. Assign Cookies 满足欲望 分配饼干
［抄题］: Assume you are an awesome parent and want to give your children some cookies. But, you should ...
- Linux内核的特征
Linux内核的特征 Linux是个人计算机和工作站上的Unix类操作系统.但是,它绝不是简化的Unix.相反,Linux是强有力和具有创新意义的Unix类操作系统.它不仅继承了Unix的特征,而且在 ...
- Django框架 之 MTV模型、 基本命令、简单配置
浏览目录 MTV模型 Django框架前奏 Django基础必备三件套 Djaogo基本命令 MTV模型 Django的MTV分别代表: Model(模型):负责业务对象与数据库的对象(ORM) Te ...
- Python基础-4
目录 迭代器&生成器 装饰器 Json & pickle 数据序列化 软件目录结构规范 1.列表生成式,迭代器&生成器 看列表[0, 1, 2, 3, 4, 5, 6, 7, ...
- python，itertools模块
itertools模块的使用: # coding=utf-8 """ itertools模块 """ import itertools im ...