文章目录

  • 第一章 基本标签及使用
    • 前端简介
    • web服务端
      • 简易服务端
    • HTTP协议
    • HTML简介
    • web服务的本质
    • HTML语法结构
    • HTML注释
    • 标签的分类01
    • head内常用标签
    • body内基本标签
    • 标签的分类02
    • body内常用标签
    • HTML标签重要参数
    • 常用标签合集
    • 特殊符号
    • 列表标签
    • 表格标签
    • 表单标签
    • 表单重点知识
    • CSS层叠样式表
    • CSS学习流程
    • CSS选择器
    • 分组与嵌套
    • 伪类选择器
    • 伪元素选择器
    • 选择器优先级
    • 给标签设置样式
    • 文字属性
    • 背景属性
    • 边框
    • display展示
    • 补充
    • 参考文章

第一章 基本标签及使用

前端简介

前端你可以理解为是跟用户直接打交道的交互界面
后端你可以理解为是幕后操作者不直接跟用户打交道学习前端的流程前端基础之三剑客(必学)HTMLCSSJavaScript前端框架jQueryBootstrapfontawesomesweetalter三剑客详解HTML(网页的骨架)CSS(网页的样式)JavaScript(网页的动态效果)# eg:蜡笔小新一丝不挂的站在你的面前(HTML)# 给他穿上裙子，涂上口红，穿上高跟鞋(CSS)# 给他一根钢管，让他跳起来(JS)

web服务端

软件开发架构cs架构bs架构bs架构本质也是cs架构# 建议:养成看源码的习惯

简易服务端

import socketserver = socket.socket()  # 参数不写默认就是TCP协议
server.bind(('127.0.0.1',8080))
server.listen()
"""
服务端
1.固定的IP和PORT
2.能够24小时不间断提供服务
3.能够支持高并发
"""
# 链接循环
while True:conn, addr = server.accept()data = conn.recv(1024)print(data)# 响应要遵循HTTP协议conn.send(b'HTTP:/1.1 200 OK\r\n\r\n')# conn.send(b'<h1>hello baby<h1>')# 文件操作with open(r'a.txt','rb') as f:res = f.read()conn.send(res)conn.close()

HTTP协议

规定了服务端与浏览器之间数据传输的格式
1.四大特性1.基于TCP/IP作用于应用层之上的协议2.基于请求响应3.无状态cookiesessiontoken4.无连接(短连接)长连接(websocket:服务端主动给客户端发送消息)2.数据格式请求格式请求首行(请求方式)请求头(一大堆K:V键值对)(这里必须要有一个换行符)请求体(携带的数据)eg:post请求提交数据响应格式响应首行(协议版本  响应状态码)响应头(一大堆K:V键值对)(这里必须要有一个换行符)响应体(携带的数据)案例1:浏览器要展示给用户看的数据3.响应状态码用一串简单的数字来表示一串中文意思1XX:服务端已经接受到你的数据正在处理你可以继续提交2XX:服务端成功返回响应数据3XX:重定向4XX:403请求无权限、404请求资源不存在5XX:500服务器内部错误不同的公司还会自己定制自己的响应状态码"""
请求方法1.get请求朝别人要数据(也可以携带额外的数据条件)数据是直接放在url后面携带的url?username=wuchangwen&password=123get请求携带的数据大小是有限制的，其次get请求只能携带一些不敏感的信息，因为一眼就能看到eg:浏览器地址栏属于网址朝服务端所要对应的数据2.post请求朝别人提交数据eg:用户名登录数据是放在请求体里面的，并且数据大小理论上是没有限制的
"""

HTML简介

超文本标记语言
用来构建网页的骨架，可以毫不夸张的说，如果你想让浏览器展示你的页面，那么你就必须书写HTML(所有浏览器能够展示出来的页面内部其实都由HTML构成的)
注意HTML的学习是非常简单的，它没有任何的逻辑，我们只需要知道每一个标签表示的意思即可h1        标题标签a        链接标签img        图片标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>这是最牛的网页</title>
<!--    <style>-->
<!--        h1 {-->
<!--            color: yellowgreen;-->
<!--        }-->
<!--    </style>--><link rel="stylesheet" href="mycss.css">
<!--    <script>-->
<!--        alert(123)-->
<!--    </script>-->
<!--    <script src="myjs.js"></script>--><meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
</head>
<body><h1>这是一个网页</h1>
</body>
</html>

web服务的本质

1.浏览器地址栏输入网址
2.朝服务端发送请求
3.服务端发送响应
4.浏览器接收响应展示结果(文件)文件前端HTML文件的后缀名是.html

HTML语法结构

书写前端页面，我们一般会创建.html结尾的文件
<html><head></head><body></body>
</html>
head内书写的内容一般都不是给人看的
body内书写的内容是浏览器直接展示给人看的

HTML注释

单行<!--单行注释-->
多行<!--多行注释多行注释多行注释-->由于html没有逻辑并且标签就那么多，而一个html文件内html标签非常的多并且重复，我们在维护修改的时候回非常的难找
<!--导航条开始-->
<!--导航条结束-->
<!--左侧菜单开始-->
<!--左侧菜单结束-->

标签的分类01

1.单标签(自闭和标签)  <img/>
2.双标签<a></a># 在HTML中标签之间是可以相互嵌套的(但是需要遵循一些规范)类似于俄罗斯套娃

head内常用标签

title        控制网页标题
style        内部支持直接书写css代码
link        可以引入外部css文件
script        内部可以直接书写js代码也可以导入外部js文件
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="老男孩教育Python学院">

body内基本标签

h1~h6  多级标题标签
s      删除线
b        加粗
i        斜体
u        下划线
p        段落标签
br        换行
hr        分割线

标签的分类02

1.块儿级标签    h1~h6  p独占一行
2.行内标签    u i s b自身文本多大就占多大
块儿级标签内部可以嵌套其他任意的标签(p标签除外)p标签只能嵌套行内标签
行内标签只能嵌套行内
"""
前端不像后端逻辑那么严谨
有时候你不按照规范写也不会有问题
"""

body内常用标签

链接标签a(行内标签)默认颜色的变化蓝色:之前没有访问过紫色:之前访问过默认是在当前页面跳转，我们可以修改target="_self"  当前页面target="_blank"  新建页面a标签除了可以有链接功能之外还具有锚点功能href里面放其他标签的# + id值 图片标签img(行内标签)<img src="111.jpg" alt="这是个美女" title="很有气质" height="200" width='200'>src   图片地址alt  图片加载不出来 提示的信息title    鼠标悬浮上去之后提示的信息height/width用于调节图片的大小，修改一个另外一个自动等比例缩放div块儿级标签主要用于前期页面的布局
span行内标签主要应用文本占位

HTML标签重要参数

id由于同一个前端页面文件内相同的标签太多了为了作区分，可以给标签设置id，类似于是标签的身份证号即在同一个页面内标签的id不能重复class你可以看成是python里面的面向对象的继承一个标签可以有多个类属性值，相当于继承了多个类属性特点

常用标签合集

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--<a href="https://www.baidu.com" target="_self">点我去百度</a>-->
<!--<a href="https://www.sogo.com" target="_blank">点我去搜狗</a>-->
<!--<a href="https://www.xiaohuar.com">点我去搜狗</a>-->
<!--    <h1>111</h1>-->
<!--    <h2>222</h2>-->
<!--    <h3>333</h3>-->
<!--    <h4>444</h4>-->
<!--    <h5>555</h5>-->
<!--    <h6>666</h6>-->
<!--<h1 id="d1">开头</h1>-->
<!--<div style="height: 1000px;background: red"></div>-->
<!--<div style="height: 1000px;background: black"></div>-->
<!--<div style="height: 1000px;background: blue"></div>-->
<!--<h1 id="d2">中间</h1>-->
<!--<div style="height: 1000px;background: red"></div>-->
<!--<div style="height: 1000px;background: black"></div>-->
<!--<div style="height: 1000px;background: blue"></div>-->
<!--<a href="#d1">回到顶部</a>-->
<!--<a href="#d2">回到中部</a>--><!--<h1 class="c1 c2 c3"></h1>-->
<!--<b>加粗</b>-->
<!--<i>斜体</i>-->
<!--<u>下划线</u>-->
<!--<s>删除</s>-->
<!--<p>奥斯卡惊呆了看见爱上大家爱丽丝建档立卡数据</p>-->
<!--<p>奥斯卡惊呆了看见爱上大家爱丽丝建档立卡数据</p>-->
<!--    <br>-->
<!--<p>奥斯卡惊呆了看见爱上大家爱丽丝建档立卡数据</p>-->
<!--    <hr>-->
<!--<p>奥斯卡惊呆了看见爱上大家爱丽丝建档立卡数据</p>--><!--<p>p1-->
<!--    <p>p2</p>-->
<!--</p>--><!--<img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1596842670,3419824800&fm=26&gp=0.jpg" alt="">-->
<!--<img src="111.jpg" alt="这是个美女" title="很有气质" height="400" width="200">-->
<!--<div></div>--><!--<span></span>--></body>
</html>

特殊符号

内容    对应代码
空格        &nbsp;
>        &gt;
<        &lt;
&        &amp;
¥         &yen;
版权        &copy;
注册        &reg;

列表标签

1.无序列表(知道)ulli<ul><li>111</li><li>222</li><li>333</li></ul>只要是有顺序排列的基本上使用的都是无序列表2.有序列表(了解)olli3.标题列表(了解)dldtdd

表格标签

tablethead        表头tr        一个tr就表示一行内容th/td    单元格的数据tbody        表单trtdborder: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）

表单标签

能够将前端获取到的用户数据发送给后端
主要用于注册登录功能界面<form action=""></form>label标签的作用
<!--label与input结合使用方式1--><label for="d1">username:<input type="text" id="d1"></label>
<!--label与input结合使用方式2--><label for="d2">password:</label><input type="text" id="d2">input标签input标签可以说是前端的变形金刚type属性text        普通文本password    加密展示email        邮箱格式date        日期格式radio        单选checkbox    多选submit        提交按钮button        普通按钮reset        重置按钮select标签    下拉框，默认是单选可以改为多选一个个选项就是一个个option标签textarea标签获取大段文本内容

表单重点知识

1.form表单中的参数action控制数据的提交路径method控制数据的提交方式get/post# 注意form表单默认是get请求enctype控制数据的编码格式urlencoded/formdata2.用户获取用户数据的标签都应该有name属性其实我们可以将获取用户数据的标签看成是一个构造字典的工厂用户的数据就类似于是字典的value而name参数指定的数据就类似于字典的key3.默认值radio和checkbox统一使用checked="checked"option使用selected="selected"如果参数名和参数值相同，则可以直接简写checked="checked"    简写  checkedselected="selected"    简写  selected4.能够触发form表单提交数据的标签有两个<input type="submit" value="注册"><button>我行!</button>

CSS层叠样式表

给HTML标签设置样式的css语法结构选择器 {属性名1:属性值1;属性名2:属性值2}注释/*注释*/
具体使用/*这是小米官网首页的css样式表*//*导航条样式开始*/控制导航条样式的css代码/*导航条样式结束*/引入方式1.直接在style标签内部书写<style>h1 {color: red;}</style>2.利用link标签导入外部css文件<link rel="stylesheet" href="mycss.css">3.行内式(使用频率较低)<h1 style="color: yellow">今天有点困!</h1>
最正规的写法就是单独开设一个css文件，但是我们为了教学方便就直接在style标签内书写

CSS学习流程

虽然css是用来给html标签设置样式的，但是一个html文件内相同的标签非常的多，如何做到给相同的标签设置不同的样式？？？eg:第一个p设置为红色，第二个p标签设置为蓝色在学习如何给标签设置样式之前我们应该先学会"如何查找标签"

CSS选择器

# 基本选择器id选择器#d1 {}class选择器.c1 {}标签选择器p {}通用选择器(了解)* {}# 组合选择器后代选择器div p {}儿子选择器div>p {}毗邻选择器div+p {}弟弟选择器div~p {}# 属性选择器/*1.将所有含有name属性的标签文本颜色设置为红色*//*属性选择器*//*[name] {*//*    color: red;*//*}*//*2.将所有含有name属性并值为jason的标签文本颜色设置为蓝色*//*[name='jason'] {*//*    color: blue;*//*}*//*3.将所有含有name属性并值为jason的p标签文本颜色设置为蓝色*//*p[name='jason'] {*//*    color: yellowgreen;*//*}*/

分组与嵌套

多种选择器之间可以相互混用
/*    分组*//*    div,p,span {*//*        color: yellow;*//*    }*//*    嵌套*/.c1,#d1,span {color: yellowgreen;}

伪类选择器

以a标签为例/*鼠标悬浮上去之后颜色改变*/
a:hover {color: yellowgreen;
}

伪元素选择器

p:first-letter {font-size: 48px;color: red;}
p:before {content:"*";color:red;}
p:after {content:"*";color:red;}
before和after多用于清除浮动

选择器优先级

1.当选择器相同的情况下我们采用的是就近原则谁离标签越近听谁的2.选择器不同的情况下 是有优先级之分行内选择器 > id选择器 > 类选择器 > 标签选择器

给标签设置样式

宽和高
width属性可以为元素设置宽度。
height属性可以为元素设置高度。
块级标签才能设置宽度，内联标签的宽度由内容来决定。字体大小font-size
文本颜色方式1color:red方式2color:rgb(126,111,234)方式3color:#4d4d4d方式4color:rgba(126,111,234,0.4)"""
颜色的获取方式
1.pycharm提供的取色器
2.微信或者qq提供的截图功能
"""

文字属性

text-align:center    居中对齐a {text-decoration: none;}
ul {list-style-type: none;list-style: none;}

背景属性

backgroud作为前缀规律:如果多个参数的前缀都是一样的，那么一般情况下都可以有简写的形式，就是以该前缀为参数div {background-image: url("111.jpg");height: 800px;width: 800px;background-repeat: no-repeat;/*background-repeat: repeat-x;*//*background-repeat: repeat-y;*/background-color: gray;/*background-position: center center;*/background-position: 100px 100px;}div {height: 800px;width: 800px;background: url("111.jpg") gray no-repeat center center;}利用背景图片布局
background-attachment: fixed;

边框

div {border-style: solid;border-color: red;border-width: 5px}
div {border:dashed 5px blue
}画圆

display展示

用于控制HTML元素的显示效果。值    意义
display:"none"    HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:"block"    默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
display:"inline"    按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:"inline-block"    使元素同时具有行内元素和块级元素的特点。

补充

HTML标签即可以设置自带的属性也可以设置自定义的属性(大白话就是啥都可以写)
<p name='jason' password=123>111</p>

参考文章

https://www.cnblogs.com/Dominic-Ji/p/10864457.html

作者：吴常文
出处：https://blog.csdn.net/qq_41405475
本文版权归作者和CSDN共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接。

第一章： HTML、CSS、JavaScript入门篇相关推荐

  1. 洗料系列-杂谈篇-麻将自动化---第一章、麻将基础入门

    本文针对麻将的基础入门和常见术语做简单入门科普,为麻将自动化做准备 第一章.麻将基础入门 // TODO 后续章节 1.麻将入门 1.1 麻将组成 北方麻将(共136张) 饼子牌x4 一饼俗称汤圆 二 ...

  2. JavaScript—入门篇

    JavaScript-入门(笔记) 第一章 请做好准备 1-1 为什么学习JavaScript 1-2 新朋友你在哪里(如何插入JS) 1-3 我也可以独立(引用JS外部文件) 1-4 找到你的位置( ...

  3. c语言程序第一章编程,c语言程序的设计第一章 C语言编程入门.ppt

    c语言程序的设计第一章 C语言编程入门 第1章 C语言编程入门 本章是本书的入门篇,专为初学者熟悉编程过程.掌握程序结构而准备的. 本章学习目标 ? 1)? 能够通过模仿与改变来构造带有测试函数的C语 ...

  4. 摄影知识系列讲座 - 第一章《光圈、快门篇》

    is2is 色廊 摄影交流园地 - 摄影知识系列讲座 - 第一章<光圈.快门篇> hotoboy版权所有,任何媒体转载须得到作者书面授权 摄影知识讲座 光圈.快门篇(一)     首先建议 ...

  5. 高一信息技术课件python编程_教科版高中信息技术选修第一章第三节Python入门--奇妙曲线的绘制 课件（22张ppt） 教案 (2份打包)...

    ID:10986924 资源大小:11671KB 资料简介: 教学设计 [课程标准要求] 体验算法思想,了解算法和程序设计在解决问题过程中的地位及作用:能从简单的问题出发,设计解决问题的算法,并能初步 ...

  6. HTML+CSS+JavaScript入门教程（万字）

    前言 作为一名后端开发人员,开发过程中,必不可少的与前端进行对接,因此尽管是后端开发者,也需要一定的前端知识,因此写下HTML+CSS+JavaScript入门知识,着重介绍了JavaScript,方 ...

  7. （转）web前端开发分享-css,js入门篇

    关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人与人的教育背景与成长环境心理活动都有差别,但就别人的心得再结合自己的特点,然后探索适合自己的学 ...

  8. java标识命名服务_阿里巴巴Java开发规约第一章编程规约-命名风格篇

    1.[强制] 代码中的命名均不能以下划线或美元符号开始,也不能以下划线或美元符号结束. 反例: _name /__name / $name / name_ / name$ / name__ 老四附言: ...

  9. 第一章 51单片机开发入门知识介绍

    第一章 单片机开发入门知识介绍 1.1 51单片机介绍 51单片机是对所有兼容Intel 8031指令系统的单片机的统称. 该系列单片机的始祖是Intel的8004单片机,后来随着Flash rom技 ...

最新文章

  1. 分布式事务中间件Fescar—全局写排它锁解读
  2. C++ “::” 作用域符 双冒号 实力解释
  3. 后台图片验证码功能是什么实现的
  4. CloudFlare CDNJS 漏洞差点造成大规模的供应链攻击
  5. 算法（algorithm）、模型（model）与框架（framework）
  6. Android PackageInstaller：安装应用的应用，从三流Android外包到秒杀阿里P7
  7. Pycharm中的Python Console与Terminal
  8. day04 1113 红与黑（flood fill算法，即DFS，BFS）
  9. CAN控制器和CAN收发器初始化
  10. Informerd详解（2）与C#百度地图定位显示项目学习
  11. Win10 扩展显示器后窗口不显示问题
  12. Go语言Gin框架源码分析
  13. 分享一些我的远程办公经验
  14. 制作一个小的彩票系统
  15. 服务器虚拟化方案高校,科学网—联想服务器虚拟化方案构建“数字校园”
  16. Java类与对象，成员方法
  17. DDD概念复杂难懂，实际落地如何设计代码实现模型？
  18. css如何实现多个动画顺序播放
  19. 关于Python大数据就业方向及岗位介绍
  20. Redis 基础入门教程以及使用场景

热门文章

  1. 复杂的1秒--图解Google搜索技术
  2. java highchart统计图_java+highchart实现分类下钻柱形图
  3. SpringBoot实现文件上传和下载
  4. 用户研究专题：桌面研究定性研究
  5. 劳动节 | 耕耘美好，创造不凡
  6. 如何选择最好的研究方法？——Nvivo教程
  7. webdriver和火狐浏览器历史版本下载
  8. JAVA将日期类型（xx年xx月xx日）转化 成字符串变量
  9. Python爬懂车帝的图片-代码
  10. mesothelioma－弥漫性间皮瘤