前端开发是创建web页面或app等前端界面呈现给用户的过程,通过html、css、javascript以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互。它从网页制作演变而来,名称上有很明显的时代特征。
html用于展现网页的内容、css用于展现网页的外观、javascript用于实现一些网页动作。
浏览器输入网址回车后都发生了什么?
浏览器(客户端)给服务端发送了一个消息,服务端在拿到了消息之后,服务端返回消息,浏览器展示页面
客户端和服务端的消息格式要一致,因此就有了http协议来约束两边的消息格式。
我们可以写一个服务端来访问自定义的网页:
import socketsk = socket.socket()sk.bind(('127.0.0.1',8000))sk.listen(4)while 1: conn,addr = sk.accept() data = conn.recv(1024) 牛顿活了多少岁啊 #接收消息 conn.nd(b'http/1.1 200 ok\r\n\r\n') conn.nd(b'hello world!') #发送消息 conn.clo()执行代码后再打开浏览器去访问127.0.0.1:8000这个网址,就可以看到下面的页面:
改变程式码:
conn.nd(b'<h1>hello world!</h1>\n')
这样字体就发生了改变:
发送多行的html代码
我们可以新建一个txt文件,把要执行的html代码放到里面
服务端通过文件读取html代码展现页面:
import socketsk = socket.socket()sk.bind(('127.0.0.1',8000))sk.listen(4)while 1: conn,addr = sk.accept() data = conn.recv(1024) #接收消息 conn.nd(b'http/1.1 200 ok\r\n\r\n') with open('h.txt','rb') as f: msg = f.read() conn.nd(msg) conn.clo()txt文档:
那最后的展现结果和上面是一致的
展示图片:
在网上随便找一张图片去拿到它的图片地址,然后在txt档中写下这段代码:
<img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:and9gctfc_ukj_78k9qpn5-joc16waa-phw7hf8lgst8avumfen3fghr&s'>
执行服务端代码再刷新网页:
增加一个链接
<a href='/d/file/titlepic/guesthome.jsp;jssionid=P5dEoUXiAkpEvtxIacW-Gmq0ZK8zUB1K2zWTuf4vfS4rQ_mCe9GJ!-1193779494 website!</a>
执行服务端代码再刷新网页:
web开发的本质:服务端、浏览器、html文件
同样如果要将txt档里的文件变更为html档,也是可以有相同的执行效果
服务端:
import socketsk = socket.socket()sk.bind(('127.0.0.1',8000))sk.listen(4)while 1: conn,addr = sk.accept() data = conn.recv(1024) #接收消息 conn.nd(b'http/1.1 200 ok\r\n\r\n') with open('h.html','rb') as f: msg = f.read() conn.nd(msg) conn.clo()html是一个标准它规定了大家怎么写网页
像'<标签名>…</标签名>’这种格式的语言是标记语言,比如xml、html。标签可以分为单标签和双标签。
那像前面所写的html语句并不是规范的语句,接下来对它进行改进:
<!doctype html> <!--声明这是一个html5的文件--><html> <!--html格式--> <head> <!--用来展示浏览器相关的一些信息(标题、引用的文件)--> </head> <body> <!--放文件--> <h1>hello world!</h1> <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:and9gctfc_ukj_78k9qpn5-joc16waa-phw7hf8lgst8avumfen3fghr&s'> <a href='/d/file/titlepic/guesthome.jsp;jssionid=P5dEoUXiAkpEvtxIacW-Gmq0ZK8zUB1K2zWTuf4vfS4rQ_mCe9GJ!-1193779494 website!</a> </body></html>
标签分析
我们可以直接创建一个新的html档,里面就有已经写好的html结构
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>title</title></head><body></body></html>
<html lang=”en”>…</html>表示这个网页的主要语言是英文,那如果是中文可以改成<html lang=幸福生活是奋斗出来的221;zh-cn”>…</html>
<meta chart=”utf-8″>表示编码方式为utf-8
<title>…</title>表示网页的标题
<!–注释内容–>表示注释
<style>…</style>表示内部的样式表
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>my first html file</title> <style> a{ color:red; } </style></head><body> <a href="">hello world!</a> </body></html>网页结果:
<script>…</script>表示js代码或引入js外部文件
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>my first html file</title> <style> a{ color:red; } </style> <script> alert("plea wait...") </script></head><body> <a href="">hello world!</a></body></html>网页结果:
<link/>引入外部样式表文件,比如说把css写入另外一个文件中在通过link给引入进来
先创建一个c.css文件再写入代码:
a{ col九溪十八涧or : green;}再在html文件中引入这个css文件:
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>my first html file</title> <link rel="stylesheet" href="c.css"></head><body> <a href="">hello world!</a></body></html>
最后网页上显示:
<meta/>定义网页元信息
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <meta name="description" content="html meta,meta properties,meta conclution"> <!--表示这个网页的相关描述--> <meta name="keywords" content="the first html file."> <!--表示网页的关键字--> <meta http-equiv="refresh" content="10;https://www.runoob.com/"> <!--表示这个网页在十秒之后跳转到另外一个网站--> <meta http-equiv="x-ua-compatible" content="ie=edge"> <!--让ie以最高模式渲染文档--> <title>my first html file</title> <link rel="stylesheet" href="c.css"></head><体能训练;body> <a href="">hello world!</a></body></html>
<h1、2..6>…</h1、2…6>之间的差异
<!doctype html><html lang="en"><head></head><body> <h1>this is h1!</h1> <h2>this is h2!</h2> <h3>this is h3!</h3> <h4>this is h4!</h4> <h5>this is h5!</h5> <h6>this is h6!</h6> this is h!</body></html>
网页效果:
<img src=” ” alt=” ” title=” “>src表示图片的来源地址,alt表示当图片失效后的一些处理,title表示图片的提示
<a href=” ” target=”_blank”>…</a>表示可以保留当前的页面下开启一个新的页面
<!doctype html><html lang="en"><head></head><body> <a href='/d/file/titlepic/guesthome.jsp;jssionid=MEFEofIwVMd0CZ3QAfG3R-A9FcD22qgcFKp_VdtTHO08V0vlSdij!-1193779494' target="_blank">open website!</a></body></html>
制作到顶部到底部效果:
<!doctype html><html lang="zh-cn"><head> <meta chart="gb2312"></head><body> <a href="#a2" id="a1">到底部</a> <h1>aaaaaaaaa</h1> <h1>aaaaaaaaa</h1> <h1>aaaaaaaaa</h1> <h1>aaaaaaaaa</h1> <h1>aaaaaaaaa</h1> <h1>aaaaaaaaa</h1> <h1>aaaaaaaaa</h1> <h1>aaaaaaaaa</h1> <h1>aaaaaaaaa</h1> <h1>aaaaaaaaa</h1> <h1>aaaaaaaaa</h1> <h1>aaaaaaaaa</h1> <h1>aaaaaaaaa</h1> <h1>aaaaaaaaa</h1> <h1>aaaaaaaaa</h1> <h1>aaaaaaaaa</h1> <h1>aaaaaaaaa</h1> <h1>aaaaaaaaa</h1> <h1>aaaaaaaaa</h1> <h1>aaaaaaaaa</h1> <h1>aaaaaaaaa</h1> <h1>aaaaaaaaa</h1> <a href='/d/file/titlepic/guesthome.jsp;jssionid=MEFEofIwVMd0CZ3QAfG3R-A9FcD22qgcFKp_VdtTHO08V0vlSdij!-1193779494' target="_blank">open website!</a> <a href="#a1" id="a2">到顶部</a></body></html>
其他常用标签
1.<b>…</b>表示字体加粗
2.<i>…</i>表示斜体
3.<u>…</u>表示加下划线
4.<s>…</s>表示加删除线
<!doctype html><html lang="zh-cn"><head> <meta chart="gb2312"></head><body> 你好! <b>你好!</b> <i>你好!</i> <u>你好!</u> <s>你好!</s></body></html>
5.<p>…</p>表示一个段落
6.<br>表示换行
7.<hr>表示水平线
特殊字符
1.空格
2.> >
3.< <
4.& &
5.¥ ¥
6.© ©
7.注册 ®
div标签和span标签
div标签:用于定义一个块级元素,本身没有其他的特点,可以通过css样式去赋予不同的表现
span标签:用来定义一个行内元素,本身没有其他的特点,可以通过css样式去赋予不同的表现
<!doctype html><html lang="zh-cn"><head> <meta chart="gb2312"></head><body> <div>d第一行!</div> <div>d第二行!</div> <div>d第三行!</div> <span>s第一行</span> <span>s第二行</span> <span>s第三行</span></body></html>
网页效果:
标签可以分为块级标签和行内标签
块级标签(h1~h6、div、p、hr):
默认占浏览器长度、能设置长和宽
行内标签(a、img、u、s、i、b、span):
根据内容决定长度、不能设置长和宽
列表标签
分为有序列表、无序列表和标题列表
<!doctype html><html lang="zh-cn"><head> <meta chart="gb2312"></head><body> <ul> <li>apple</li> <li>orange</li> <li>pear</li> </ul> <ol> <li>apple</li> <li>orange</li> <li>pear</li> </ol></body></html>
网页效果:
无序列表<ul>…</ul>:
type属性:
①disc(实心圆点,默认值)
②circle(空心圆圈)
③square(实心方块)
④none(无样式)
以实心方块为例:
<!doctype html><html lang="zh-cn"><head> <meta chart="gb2312"></head><body> <ul type="square"> <li>apple</li> <li>orange</li> <li>pear</li> </ul></body></html>
网页效果:
有序列表<ol>…</ol>:
type属性:
①1 数字列表,默认值
②a 大写字母
③a 小写字母
④i 大写罗马
⑤i 小写罗马
strat属性(表示这个标签的起始值)
以大写罗马为例:
<!doctype html><html lang="zh-cn"><head> <meta chart="gb2312"></head><body> <ol type="i" start="5"> <li>apple</li> <li>orange</li> <li>pear</li> </ol></body></html>
网页效果:
标题列表
<!doctype html><html lang="zh-cn"><head> <meta chart="gb2312"></head><body> <dl> <dt>title1</dt> <dd>content1</dd> <dd>content1</dd> <dt>title2</dt> <dd>content2</dd> <dd>content2</dd> </dl></body></html>
网页效果:
&鸟的天堂教学视频lt;!doctype html><html lang="zh-cn"><head> <meta chart="gb2312"> <title>表格示例</title></head><body> <table border="1" cellpadding="10" cellspacing="0" width="0"> <!--border表示边框的像素 cellpadding表示内边距 cellspacing表示外边距 width表示像素的百分比--> <thead> <!--thead可以写也可以不写--> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>爱好</th> </tr> </thead> <tbody> <tr> <td>alice</td> <td>18</td> <td rowspan="2">male</td> <!--rowspan表示单元格竖跨多少行(类似于合并单元格) colspan表示单元格横跨多少列--> <td>football</td> </tr> <tr> <td>bob</td> <td>19</td> <td>skiing</td> </tr> <tr> <td>maria</td> <td>20</td> <td colspan="2">female</td> </tr> </tbody> </table></body></html>
网页效果:
快捷写法
1.h1*4+tab
<h1></h1><h1></h1><h1></h1><h1></h1>
2.h1*4>a+tab
<h1><a href=""></a></h1><h1><a href=""></a></h1><h1><a href=""></a></h1><h1><a href=""></a></h1>
3.h1*4>a{标签$}+tab
<h1><a href="">标签1</a></h1><h1><a href="">标签2</a></h1><h1><a href="">标签3</a></h1><h1><a href="">标签4</a></h1>
4.h1*4>a.c1{标签$}+tab
<h1><a href="" class="c1">标签1</a></h1><h1><a href="" class="c1">标签2</a></h1><h1><a href="" class="c1">标签3</a></h1><h1><a href="" class="c1">标签4</a></h1>
5.h1*4>a.c1[id=a$]{标签$}+tab
<h1><a href="" class="c1" id="a1">标签1</a></h1><h1><a href="" class="c1" id="a2">标签2</a></h1><h1><a href="" class="c1" id="a3">标签3</a></h1><h1><a href="" class="c1" id="a4">标签4</a></h1>
5.多行操作alt键+左键
总结
1.行内标签不能嵌套块级标签
2.p标签不能嵌套块级标签
本文发布于:2023-04-03 09:00:15，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/24833c598d062b0d2224f0120c6c1f71.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：前端学习日记 (一).doc
本文 PDF 下载地址：前端学习日记 (一).pdf
| 留言与评论（共有 0 条评论） |
